-カズノコカズノコです。サブカルチャー開拓、銭湯です。shop,Illustrator)についての情報を発信しています!カズノコです。CCの標準機能のみを使用して、リピート背景となるようなおしゃれなモーションタイルアニメーションの作り方について解説します。今回は正方形が規則的に出現するモーショングラフィックスを作っていきましょう。N)まず新規コンポジションを作成してください。デュレーションは30秒でコンポジションサイズはフルHDの1920×1080で作成していきましょう。Y)次に背景となる平面レイヤーを作成しましょう。ここは何色でも大丈夫です。今回はピンクにしてみました。これで、コンポジション内のベースは完了です。手順2(シェイプレイヤー1)次に、動きのある正方形を作るためにシェイプレイヤーを作成します。基本的なアニメーションの設定シェイプレイヤー1作成[レイヤー<新規<シェイプレイヤー]からシェイプレイヤーを作成しましょう。このシェイプレイヤーはまず、画面いっぱいに表示させておきましょう。画面は長方形なので、長方形ツールのボタンをダブルクリックすると、現在の設定の長方形が表示されます。※この状態で比率を固定しておきましょう。塗り:なし(塗りの色の箇所をoptionを押しながら数回クリックすると透過されます)線:背景の色とは重ならない色に設定しておきましょう。今回は黄色にしました。矢印キー]で10フレームずつ移動できます。全てのキーフレームを選択し、イージーイーズをかけましょう。(F9または右クリックでキーフレーム補助のイージーイーズを選択)グラフエディターの速度曲線で速度の調整を行いましょう。長方形パスのサイズのグラフを下記のようにしました。次に線幅のグラフを下記のようにしました。次に、シェイプレイヤーのリピーターという機能を使用して、アニメーションをつけたシェイプを規則的に複製していきます。リピーターの適用リピーターは追加の矢印をクリックすると出てくるプロパティーの中から適用することができます。[コンテンツ]を選択した状態で追加してください。リピーターのプロパティ・コピー数:10・オフセット:-5・トランスフォーム:リピーター1(位置):(220,0)[コンテンツ<長方形1<トランスフォーム:長方形1][コンテンツ]内の長方形のトランスフォームから回転の値を45°に設定しておきましょう。することで、リピーターで複製した全ての図形が45°傾きます。リピーターの位置を微調整し、最大に開くところでギリギリ重ならないところに設定されているか確認しておきましょう。今こんな感じになってます↓リピーター1を複製&縦にリピート次に、横に伸びているリピーターを複製します。D)リポーター2のトランスフォーム:リピーター2の位置の値を(0,220)に変更すると、縦にも複製することができます。シェイプのアニメーションを繰り返すシェイプのアニメーションは線が中央から出現して消えるだけなので、この図形を複製させて動きをずらすと、ループさせることができます。複製してUでキーフレームを表示させて長方形2のキーフレームを下記のようにずらしましょう。長方形2の塗りの色を変えてみる今のままでもいいのですが、長方形2の塗りの色を変えると、変わり映えすると思いますので、変えてみましょう。今回は青系の色にしてみました。長方形2のサイズを微調整アニメーションの最後のフレームでプレュー画面を拡大してみてみると青い図形が微妙にずれているのがわかると思います。長方形2のサイズの最後のキーフレームのサイズを少し大きく変更して隙間を無くしておきましょう。今回は150→156に変更しました。これで、一つ目のレイヤーは完成です。手順3(シェイプレイヤー2)次に、シェイプレイヤー1を複製し、残り半分の穴を埋めていきます。位置をずらす最後のアニメーション終了時に合わせて位置を調整し、画面が単色になるように変更しましょう。再生してみると全画面が動いて万華鏡のような動きになります。まとめいかがでしたか?リピーターの機能を使って円形に図形を出現させるなどの有名なアニメーションのチュートリアルも多いですね。それの兄弟的なアニメーションとしてこちらの万華鏡のようなアニメーションの作り方も是非おさえておきましょう。-カズノコカズノコです。サブカルチャー開拓、銭湯です。コメントをキャンセルメールアドレスが公開されることはありません。