В этом блоге мы узнаем, как добавить анимацию отскока для любого представления в .Net Maui/Xamarin Forms.

Давайте разберемся с основами компьютерной графики.

Как мы можем видеть выше, верхний левый угол экрана равен (0,0), координаты X будут увеличиваться, когда мы движемся к правой стороне экрана слева, а координаты Y будут увеличиваться, когда мы двигаться к нижней части экрана.

Я разделил логику в следующих шагах.

  1. Создайте базовый пользовательский интерфейс (с кнопкой и шариком).
  2. Получить высоту и ширину экрана.
  3. Перевести (отскочить) мяч.

Дизайн

Использовал AbsoluteLayout для центрирования BoxView и дал ему радиус 100 углов, чтобы сделать его круглым.

Кнопка для запуска и остановки отскока мяча/BoxView.

Захват высоты и ширины экрана

.Net Maui и Xamarin Forms имеют этот метод переопределения OnSizeAllocated, который вызывается, когда размер элемента устанавливается во время цикла макета, в нашем случае это вся страница.

Итак, у нас есть общая высота и ширина экрана, теперь пришло время поколдовать.

Перевести (отскочить) мяч

Событие нажатия кнопки BounceBall запускает анимацию

StartBouncingBall содержит весь логический код.

xDirectionBounceFactor и yDirectionBounceFactor в основном являются положительными или отрицательными значениями направления X и Y мяча. Если значения положительные, значения координат также будут идти в положительном направлении и наоборот.

Всякий раз, когда координата X или Y мяча достигает половины ширины экрана или высоты от его фактического положения 0, мы меняем координату X или Y на обратную. увеличить значение, чтобы уменьшить его.

И всякий раз, когда координата X или Y мяча достигает верхней или левой части экрана из его фактического положения 0, мы меняем значение уменьшения координаты X или Y на обратное, чтобы увеличить его.

Я добавил половину высоты и ширины мяча в условия if, чтобы проверить, достиг ли мяч конца или начала экрана.

Спасибо за внимание. Вы также можете ознакомиться с другими моими блогами, такими как Basic Animations в Net Maui/Xamarin Forms, нажав здесь. Удачного кодирования :-)