Недавно я наткнулся на эту удобную анимационную библиотеку (Popmotion) и подумал, что было бы здорово попробовать ее для очень простой анимации. Я начал с этих элементов:
Popmotion имеет класс ui.Actor, который будет представлять каждый объект, который вы хотите заставить двигаться на экране. При создании Актера вы можете определить начальные значения для свойств, которые вы анимируете, поэтому, если бы я хотел, чтобы мои элементы исчезали по мере их движения вверх, я бы сделал что-то вроде этого:
Для нашего базового примера мы попробуем класс ui.Tween, но есть несколько дополнительных опций для более сложных анимаций. С классом Tween мы в основном говорим: «перейдите из вашего текущего состояния в это. Спасибо".
Если вы сравните его с начальными значениями в экземпляре Актера, который мы создали ранее, вы увидите, что мы говорим: «Привет, Popmotion, дай мне этот элемент от y:40 до y:0 и сделай то же самое для непрозрачности от 0 до 1». так что у него есть эта приятная атмосфера затухания ».
Если бы мы хотели запустить анимацию для любого отдельного Актера, мы бы использовали метод Actor.start() следующим образом:
mainTitleActor.start(showUpTween)
Но поскольку в нашем примере есть два актера, нам нужно найти способ вызвать их метод start() в последовательности. Хорошо, что нам не нужно придумывать свой собственный секвенсор, поскольку Popmotion, начиная с версии 3.4, предоставляет нам его: класс ui.Sequence.
Здесь мы используем метод Sequence.at(), чтобы определить, когда должна начаться вторая анимация в последовательности; но если бы мы хотели дождаться выполнения первого перед запуском следующего, мы могли бы использовать метод Sequence.then().
Вот пример в действии: http://jmarmolejos.github.io/popmotion-test/
И репозиторий: https://github.com/jmarmolejos/popmotion-test
