説明例
In this example we created an animation of a ball moving and then taking the place of the letter O’s in our words. We use the actual location of the letter O’s in our words as the final animation destination of the balls. We use one animation that animates two vector image elements: a white ball and a pink ball.
どのように構築したか
ページ要素
In our site we added the following page elements:
A group containing 9 vector images, 2 of which are circles.
コード
In the $w.onReady() function we declare all the elements we need to animate. We then measure the distance between the two balls. We create one timeline animation constant called “tl” to animate both balls.
関連例
これは役に立ったか？
|
ご意見ありがとう！
カスタムボタンアニメーション
Wix Animations APIを使って、時計回りに回転し、クリックすると色が変わるカスタムボタンを作成しましょう。
初心者
ボール落としアニメーション
ボールが迷路の中を落ちていくボール落としアニメーションを作成し、言葉の中のIの文字を点描しましょう。
上級
砂時計アニメーション
Wix Animations APIを使って、砂時計を自動的に、またはボタンクリックで反転させましょう。
上級
テキスト・マイクロインタラクション
Wix Animations APIを使って、3つのテキスト要素に異なるマイクロインタラクションを作成しよう。
中級
太陽系アニメーション
Wix Animations APIを使って、シンプルな太陽系アニメーションを作成しましょう。
上級