Zero Block:ステップバイステップのアニメーション

Zero Blockには2つのアニメーションモードがあります。

1)基本アニメーションは単純なアニメーションです。これらは、外観効果(不透明度、ボトムアップ、右から左など)、視差、固定など、既製の最も一般的に使用される効果です。これらは90%のケースで十分です。

基本的なアニメーション→ガイド

2)ステップバイステップのアニメーションにより、明るく創造的なアイデアを好きなように実現できます。

ステップバイステップのアニメーションを使用して達成できることの さまざまな例 を確認してください。

ステップバイステップのアニメーションツールは、プロのデザイナーを対象としたWebエディターであるZero Blockで利用できます。ブロックライブラリ(「その他」カテゴリのすぐ下)でZero Blockを選択するか、ページの下部にあるZero Blockをクリックして、ページにを追加します。

Zero Blockの左上隅にある[ブロックの編集]をクリックしてカスタマイズします。

新しい要素を追加して選択し、[設定]パネルを開き、[ステップバイステップのアニメーション]セクションまで下にスクロールして、[追加]をクリックします。

要素の段階的なアニメーションを作成すると、この要素のすべての基本アニメーション設定がキャンセルされます。

ステップ バイ ステップのアニメーションの作成を開始するには、アニメーションの再生を開始する条件である Event を選択します。次の 5 つの条件から選択できます。

• 画面上の要素 - 特定の要素が画面に表示されるとすぐにアニメーションの再生が開始されます。
• 画面上のブロック - ブロック全体が画面に表示されると、アニメーションの再生が開始されます。
• スクロール時 - アニメーションの再生が開始され、スクロール中も再生が継続されます。
• ホバー時 - ホバー時にアニメーションの再生が開始されます。
• クリック時 - クリック時にアニメーションの再生が開始されます。

アニメーションの開始点には、Start Trigger、Loop、および Trigger Offset の 3 つの追加オプションがあります。

• 開始トリガーは、アニメーションを開始する領域またはものです。ウィンドウ上部、ウィンドウ中央、またはウィンドウ下部の 3 つの領域から選択します。
• トリガー オフセットは、アニメーションの開始点から、選択したウィンドウの上部、ウィンドウの中心、またはウィンドウの下部までのオフセットです。
• ループは、ループで再生するアニメーションを設定するために使用されます。

Play Element または Play All をクリックして、アニメーション、選択した要素、またはブロック内のすべての要素をテストできます。

最初のステップはデフォルトで設定されています。スタートといいます。ステップを追加し、各ステップで要素のプロパティを変更します。これにより、要素が変更されます。

ステップを追加するには、[ステップの追加] をクリックします。

ステップを切り替えることができます。要素の境界線が青色に変わることは、要素が元の位置にあることを意味し、要素の境界線が緑色に変わることは、ステップが編集中であることを意味します。

各ステップには、継続時間、移動、スケール、不透明度、回転、イージング、遅延などの一連のプロパティがあります。

継続時間は、アニメーションの継続時間を秒単位で指定します。
Move は、要素が元の位置を基準にして移動する座標です。それらを設定するには、値を割り当てるか、要素を移動します。
スケール は、ステップの終わりまでに要素を増減する度合いです。
不 透明度は、ステップの終わりまでの要素の透明度の値です。
回転は、ステップの終わりに向かって要素が度単位で回転することです。
イージング は、アニメーション効果を選択するオプションです:線形(線形アニメーション実行);easeIn, easeOut, easeInOut (アニメーションの最初、最後、またはその両方で速度を落とす)。bounceFin (アニメーションの最後に要素が小さく跳ね返ること)。
遅延 は、アニメーションの再生が開始されるまでの一時停止時間です。

この黄色い四角を右に550px移動し、移動中に縮小して元の位置に戻す方法を見てみましょう。

これは、以下のコメントを含む段階的なガイドです。

「要素の再生」ボタンと「すべて再生」ボタンに加えて、アニメーションをプレビューすることもできます。

ブラウザで2つのタブを開きます:Zero Blockとプレビューモードで同じページ。

したがって、[Zero Blockに保存]をクリックすると、更新後にプレビューページに変更が表示されます。