STUDIOのモーション機能とは | 使い方とイージング一覧まとめ
スマートキャンプデザインブログ、Designerのhaguriです。
先日STUDIOが3.0にアップデートされました!その中で新しく追加された「モーション機能」について紹介します。
記事後半で、STUDIO上で用意されているイージングの一覧をまとめたサイトを作成しましたので、モーションを導入するときは参考にしてみてください。
モーション機能とは
要素がホバーしたとき(マウスで触れたとき)か、要素が画面内に表示されたときに、自由に設定できる動きのことです。
使い方
モーションをつけたい要素を選択
右上のメニューからコンディション選択
コンディションは以下の2種類が選択できます。
今回は、appearを選択
選択しているときは、画面に表示されていないときです。
この状態をスタート地点として、画面内に表示されたら、もとの状態にアニメーションしていきます。
極端な例をやってみます。傾きをつけたり、文字の色を変えたりしました。
この状態から、1600msかけてイージングで設定したような緩急をつけてアニメーションされていきます。
実際にこちらを見てください
https://smartcamp-toybox.studio.design/studio/easing-test
つぎに、設定できるイージングの種類を紹介します。
イージング一覧
STUDIOではデフォルトでいくつか用意されています。
ただ、それぞれどのような動きをするのかわからないので、今回は一覧ページを独自に作成したので、ぜひ参考にしてみてください。
用意しているのは、カスタマイズせずに、デフォルトで用意されているものです。(2020/06/19時点)
アニメーションはどのような動きをするのかのイメージを事前にすることが大切です。
理解するのは少しむずかしいですが、アニメーションが入るとWebサイトが一気にかっこよくなります!
ぜひ、導入してみてください。
▼ STUDIO公式サイト
あなたのサポートがデザインブログ更新の意欲になります!いただけたらブログの中で恩返しできればと思います!