Pixi’VNアニメーション（motion）
canvas.animate 関数を使用して Pixi’VN のキャンバスコンポーネントにアニメーションを付ける方法を学びます。移動、回転、フェード、ズーム、ミラーリングの例を含みます。
Pixi’VN では、canvas.animate という関数を使用して、開発者がキャンバスコンポーネントにアニメーションを付けることができます。 この関数は、motion ライブラリの animate 関数 を再実装したもので、アニメーションイベントのトリガーに PixiJS のティッカーを使用するように調整されています。
使用
canvas.animate は Pixi’VN で最もよく使われる関数の一つで、シンプルに使えるように設計されています——ただし、その基本的な考え方は最初は少しわかりにくいかもしれません。考え方はシンプルです。 キャンバスコンポーネントの目標状態（例えば位置、スケール、不透明度など）と継続時間を定義すると、Pixi’VN はフレームごとにコンポーネントをその状態へスムーズに遷移させます。 目標に到達すると、アニメーションは自動的に終了します。
例えば、コンポーネントを1秒かけて位置 { x: 100, y: 50 } に移動させるには、keyframes として { x: 100, y: 50 } を、options として { duration: 1 } を渡します。 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.
以下にいくつかの例を示します。