説明例
In this example we created an effect of balls falling through a maze and bouncing into their correct places of dotting the letter I’s in our words. We have three different animations:
The animation of the maze itself.
The animation of the right ball.
The animation of the left ball.
どのように構築したか
ページ要素
In our site we added the following page elements:
Group 1: A text element and 2 pink vector images for the initial text and the 2 balls.
Group 2: 12 vector images to create the maze.
Group 3: A text element for the final text and 2 black vector images where the balls will fall to.
コード
We define three timeline animation constants:
maze_tl: The animation of the maze.
left_ball_tl: The animation of the left ball.
right_ball_tl: The animation of the right ball.
In the $w.onReady() function we declare all the elements we want to animate. We then manually order the maze child elements for the maze animation. The maze animation uses a loop that goes through the different wheels of the maze. After building the maze animation, we make sure to time the balls animation when the maze animation ends. For the balls animation, we perform calculations and then build separate ball paths for the left and right balls. The balls animation includes the exact computations of the horizontal and vertical journey each ball has to take in order to get to its final destination.
関連例
これは役に立ったか？
|
ご意見ありがとう！
ベクター画像アニメーション
ボールが動き、あなたの言葉のOの文字の代わりになるアニメーションを作成します。
初心者
砂時計アニメーション
Wix Animations APIを使って、砂時計を自動的に、またはボタンクリックで反転させましょう。
上級
太陽系アニメーション
Wix Animations APIを使って、シンプルな太陽系アニメーションを作成しましょう。
上級
テキスト・マイクロインタラクション
Wix Animations APIを使って、3つのテキスト要素に異なるマイクロインタラクションを作成しよう。
中級
カスタムボタンアニメーション
Wix Animations APIを使って、時計回りに回転し、クリックすると色が変わるカスタムボタンを作成しましょう。
初心者