![見出し画像](https://assets.st-note.com/production/uploads/images/71113527/rectangle_large_type_2_c366f0326e2eb4bb64c311e88e3f77dc.png?width=1200)
【Wix EditorX】アニメーション機能を使ってみた②
前回は、EditorXでのアニメーション効果の使い方・基本編をお届けしました。今回はさらに調査した情報をお届けしたいと思います。
▼ 前回の記事はこちら
サンプル:文字との組み合わせ
前回の記事では、背景・コピー・ボタンなどの要素に動きを加える例をお届けしました。
それだけでも素敵ですが、異なる動きを組み合わせることで、よりリッチなテキストアニメーションにすることも可能です。
![](https://assets.st-note.com/production/uploads/images/73270041/picture_pc_f8225f338a97e8c2f35127b9c829df2b.gif?width=1200)
サンプル:アイコンを印象付ける
題材にもよりますが、画像・文字の組み合わせに別々の動きを付けて、より印象を強めることも。
![](https://assets.st-note.com/production/uploads/images/73273118/picture_pc_5a35e2d2850e4ac158d0aceed8d8e8d2.gif)
やっぱり、できないこともある…!
サンプルを考案するにあたり、Editor Xのアニメーション機能には不可能なこともあると知りました。。
まだまだ他にもあるかもしれませんが、覚え書きとして。
【注意 その1】 ループはできない
例えばマイクロインタラクションで、下へスクロールを促す矢印をつけるとした場合。
![](https://assets.st-note.com/production/uploads/images/73269840/picture_pc_281c4047c025894e9793923c7739e5dc.gif)
理想: 下へ流れるように矢印が表示され、数秒ごとにループする。
現実: 下へ流れるように矢印を表示することはできるが、一度だけ。
というように、理想を叶えるならばGIFアニメを使わなければならないので、注意が必要です。
【注意 その2】 回転はできない
その1に通じるものがありますが、最近たまに見かけるアテンションで、下記のような文字サークルをやりたい場合。
![](https://assets.st-note.com/production/uploads/images/71680063/picture_pc_9d7b65c7a4aa0d44fd24269f04d72029.gif)
こちらも、まず単純に回転させるアニメーション効果がないことと、ループ機能がないため、理想を叶えるならばGIFアニメを使うことになります。
日々進化を続けているWix・Editor X。
まだまだできないこともありますが、念願のグラデ機能もベータ版で実装されているらしいですし、今後もアップデートに期待が膨らみます!
「こんな使い方も出来るかも」「これをやりたかったけど、出来なかった…」など、他にも発見したらまとめたいと思います。
それではまた!
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?