Pixi’VNАнимация (motion)
Узнайте, как анимировать компоненты canvas в Pixi’VN с помощью функции canvas.animate, включая примеры перемещения, вращения, затухания, масштабирования и зеркального отражения.
Pixi’VN позволяет разработчикам анимировать компоненты canvas с помощью функции под названием canvas.animate. Эта функция является переработанной реализацией функции animate из библиотеки motion, адаптированной для использования тикеров PixiJS для запуска событий анимации.
Использование
canvas.animate — одна из наиболее часто используемых функций в Pixi’VN, разработанная так, чтобы быть простой в использовании, хотя лежащая в основе концепция может быть не сразу очевидна. Идея проста: вы задаёте целевое состояние для компонента canvas (например, позицию, масштаб или прозрачность) и длительность, и Pixi’VN плавно, кадр за кадром, переведёт компонент в это состояние. Как только цель достигнута, анимация автоматически завершается.
Например, чтобы переместить компонент в позицию { x: 100, y: 50 } за одну секунду, вы передаёте { x: 100, y: 50 } в качестве keyframes и { duration: 1 } в качестве options. Параметр keyframes определяет, чего нужно достичь; options определяет, как этого достичь.
canvas.animate внутренне создаёт Ticker. For advanced use cases — such as pausing, resuming, or stopping an animation — you can use the functions available to control Pixi’VN Tickers.
Вот несколько примеров: