Smart Sliderで利用出来る『レイヤーアニメーション』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。
また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。
本記事は、パソコンの画面から見ていただくことを推奨します。
レイヤーアニメーションとは
Smart Slider (Pro版)では、各スライドに配置したテキストや画像、ボタンなどの各レイヤーに、個別にアニメーションを設定することが出来ます（レイヤーアニメーションと言います）。
レイヤーアニメーションによって、さまざまな動きを設定することが出来ますが、本記事では、最も基本的な「フェードイン」の動きを設定する流れを例に解説していきます。
アニメーションを設定したいレイヤーを選択して『レイヤーウィンドウ』の『アニメーション』タブから設定していきます。
レイヤーアニメーションの設定
ここでは、以下のような『見出し』『テキスト』『ボタン』のレイヤーを中央に配置したスライドを例に、レイヤーアニメーションの設定を解説していきます。
『レイヤーウィンドウ』の『アニメーション』タブから、設定を行っていきます。
レイヤーアニメーションのタイプは『IN』『ループ』『OUT』『EVENTS』の４つ用意されています。
『IN(Incoming)』は８つの動きのカテゴリーに分けられており、選択すると、そのカテゴリーのプリセットが下に表示されます。
『IN』→『フェード』
『IN』→『移動』
ここでは例として『フェード』のプリセットから『左フェード』を選択します。
『見出し』レイヤーに『左フェード』のレイヤーアニメーションが適用され、動きの設定画面が表示されます。
『左フェード』を選択
動きの設定画面が表示される
再生ボタンを押すと、見出しレイヤーに適用された『左フェード』の動きを確認することが出来ます。
また、「見出し」レイヤーに適用されている動きが、設定された数値として確認できます。
設定項目の種類は以下となります：
・Duration：アニメーションの持続時間
・遅延(Delay)：アニメーション開始まで待機する時間
・Easing：アニメーション速度の変化のしかた
・不透明度：レイヤーの透明度レベル
・ぼかし：レイヤーのぼかし効果
・オフセット：レイヤーの位置
・Rotate：レイヤーの回転度数
・Scale：レイヤーの拡大・縮小率
・Skew：レイヤーの歪ませ率
ここでは以下のように調整して、フェードの距離をもっと短く、少しゆっくり表示されるようにします。また、動き出しまで0.5秒ほどDelay(遅延)を入れます。
・Duration：800MS → 1200MS
・Delay(遅延)：0MS → 500MS
・オフセット：400px → 100px
タイムラインで編集
レイヤーアニメーションの設定や編集は『レイヤーウィンドウ』からだけではなく、『タイムライン』から行うことも出来ます。
左下のボタンを押すと『タイムライン』を表示させることが出来ます。(Pro版のみの機能)
レイヤーエディター下部に『タイムライン』が表示されました。『見出し』に設定したアニメーションが、タイムライン上でも確認できますね。
『見出し』レイヤーを右クリックして、コンテキストメニューを表示。『見出し』に設定されたアニメーションをコピーできます。
コピーしたアニメーションを、下にある『テキスト』『ボタン』レイヤーにそれぞれペーストしてみます。
『見出し』『テキスト』『ボタン』それぞれのレイヤーに、同じアニメーションが設定されました。
ここでは、それぞれのレイヤーが、0.1秒ごとに順番にアニメーションを開始するようにずらしてみます。
今回、設定したレイヤーアニメーションの実際の動きは、以下のようになりました。
まとめ
今回は、Smart Slider3 Proの『レイヤーアニメーション (Basic)』設定の流れについて解説いたしました。
今回ご説明した『Incoming』アニメーションのほかに『Outgoing(非表示になっていく)』や『Loop(動作を繰り返す)』などの動きも設定することが出来ます。
それらを組み合わせれば、より多彩な表現を実現することが出来るでしょう。
また、一定の条件、例えば『マウスクリックしたら』『マウスオーバー時に』などのきっかけで、アニメーションを発動させる機能もあり、それらについても別の記事で詳しく解説していきます。
Pro版を使ってみる
本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀
Pro版の機能を含めた使い方については、詳しく解説した記事を少しずつ追加しておりますので、こちらもぜひご覧ください👇👇👇
コメント