![見出し画像](https://assets.st-note.com/production/uploads/images/36850052/rectangle_large_type_2_13181ff2fe70b6b9be726e0a69df680a.jpg?width=1200)
Adobe XDで作る無限ループアニメーションをマスターしよう
こんにちは!えびです!
Adobe XDには自動アニメーションという、お手軽にアニメーションが作れる機能があります。
今回は、自動アニメーションで作れる無限ループアニメーションの作り方を解説していきます。
無限ループアニメーションとは
先日、以下のようなツイートをしました。
AdobeXDの「自動アニメーション」で波打つようなループアニメーションの作り方を紹介する動画を作りました!🌊
— えび🍤@XD芸人 (@pino_ebiebi) October 9, 2020
たったの2枚のアートボードで作れるアニメーションです
是非ご覧ください!
今日から始めるAdobeXD
さざ波アニメーションを作ってみよう#AdobeXD#今週のエビ君 pic.twitter.com/udYklMI7h4
波形が無限ループするアニメーションの作り方です。ただ、かなり駆け足でどのような原理で無限ループを実現しているか、わかりにくかったかと思います。
今回は自動アニメーションの使い方、無限ループの原理の解説から始め、以下のような無限ループアニメーションを作れるようになることが目標になります。
いずれもアートボード2枚だけで作成できます。
シンプルな3種類のループアニメーションですがこれらを覚えることで、前述の波状アニメーションや、以下のようなアニメーションへの応用が可能です。
無限に落ちてくXDUFロゴ作りました!#XDUFesハンズオン pic.twitter.com/EREaBgop4i
— えび🍤@XD芸人 (@pino_ebiebi) September 26, 2020
無限ループアニメーションを覚えると、XDのアニメーションの幅が拡がります。サイトやアプリのデザインだけでなく、スライドなどにも応用できますので、是非覚えてみてください!
以下、有料となりますが詳しい解説の他、サンプルファイルの配信もしますので、気になった方は購入お願いいたします。
ここから先は
¥ 200
ここまで読んでいただきありがとうございました! もし気に入っていただければ投げ銭よろしくお願いします🍤 投げ銭でエビフライを食べに行きます