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

Zero Block:

1) 基本アニメーションはシンプルなアニメーションです。アピアランス効果（不透明度、ボトムアップ、右から左へなど）、視差、固定など、既製で最もよく使われる効果です。

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

2) ステップバイステップアニメーションは、明るくクリエイティブなアイデアを、思い通りに実現することができます。

ステップバイステップアニメーションで実現できるさまざまな例をご覧ください。

ステップ・バイ・ステップのアニメーションツールは、プロのデザイナー向けのウェブエディタ、Zero Block で利用できます。ブロックライブラリ（「その他」カテゴリのすぐ下）でZero Block を選択するか、ページ下部のZero Block をクリックしてページに追加します。

Zero Block の左上にある「ブロックの編集」をクリックし、カスタマイズします。

新しい要素を追加し、それを選択し、設定パネルを開き、「ステップ・バイ・ステップ・アニメーション」セクションまでスクロールダウンし、「追加」をクリックします。

要素に対してステップ・バイ・ステップのアニメーションを作成すると、この要素の基本アニメーションの設定はすべてキャンセルされます。

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

• エレメント・オン・スクリーン・・・特定のエレメントがスクリーンに表示されると同時にアニメーションが再生されます；
• ブロック・オン・スクリーン-画面上にブロック全体が表示されると、アニメーションが再生されます；
• On Scroll-アニメーションの再生が開始され、スクロール中も再生されます；
• On Hover-カーソルを合わせるとアニメーションが再生されます；
• クリックするとアニメーションが再生されます。

アニメーションの開始点には、さらに3つのオプションがあります：Start Trigger、Loop、Trigger Offsetです。

• Start Trigger（スタートトリガー）は、アニメーションを開始させるエリアまたはモノです。ウィンドウ上部、ウィンドウ中央、ウィンドウ下部の3つの領域から選択します；
• Trigger Offset は、選択した Window Top、Window Center、Window Bottom に対するアニメーションの開始点のオフセットです；
• ループは、ループ再生するアニメーションを設定するために使用します。

要素を再生」または「すべてを再生」をクリックすると、アニメーション、選択した要素、またはブロック内のすべての要素をテストできます。

最初のステップはデフォルトで設定されている。これは "Start "と呼ばれている。ステップを追加し、各ステップで要素のプロパティを変更します。

ステップを追加するには、Add stepをクリックします。

ステップを切り替えることができます。要素のボーダーが青くなるのは、その要素が元の位置にあることを意味し、要素のボーダーが緑になるのは、そのステップが編集中であることを意味します。

各ステップには、Duration（継続時間）、Move（移動）、Scale（スケール）、Opacity（不透明度）、 Rotate（回転）、Easing（イージング）、Delay（遅延）などのプロパティがあります。

Duration（継続時間）は、アニメーションの継続時間を秒単位で表したものです。
Move（移動 ）は、要素が元の位置から相対的に移動する座標です。設定するには、値を割り当てるか、要素を移動させます。
Scaleは、ステップの終了時点までに要素が増減する度合いです。
Opacity は、ステップの終了時点までに要素が透明化する値です。
Rotate は、ステップの終了時点までに要素が回転する度合いです。
Easing は、アニメーション効果を選択するオプションです：Linear (直線的なアニメーションの実行); easeIn, easeOut, easeInOut (アニメーションの最初、最後、または最初と最後の両方で減速); bounceFin (アニメーションの最後で要素が小さく跳ねる)。
Delayは、アニメーションが再生を開始する前の一時停止の時間です。

この黄色い正方形を550px右に移動させ、移動中に縮小し、元の位置に戻す方法を見てみよう。

以下、ステップバイステップのガイドとコメントを掲載する：

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

ブラウザで2つのタブを開いてください：Zero Block とプレビュー・モードの同じページです。

そのため、Zero Block で「保存」をクリックすると、更新後にプレビュー・ページに変更が表示されます。