私はアニメのオープニング・エンディングの演出や表現をWEBサイト上のアニメーションの参考にしています。
今回は最近ハマった「サイバーパンクエッジランナーズ」のオープニングのアニメーション表現の一部を作ってみました。
まずはオープニング映像を見ていただいた方が良いでしょう。
非常にカッコいい映像でしたね！
流石に全てを表現するのは難しいので今回は映像の0:37〜0:42辺りを切り取ってチャレンジしてみます。
いきなり完成版
最初に完成版をお見せします。
ここからは制作上のポイントについて解説していきます。
背景のパラパラした画像を作る
最終的にこういうアニメーションGIFを用意しました。
素材の用意
アニメーションだけだと味気ないのでまずは背景の画像が欲しいです。
こういったサンプルを作る際につまづくのはそもそも素材がない、ということです。
エンジニアなのでCSSやJSを作るのはお手のものでも、デザイン的な素材を用意することができずに挫折します。
しかし今はAIで簡単に画像を生成することができます。
今回は「DALL-E 2」を使ってサイバーパンクっぽい画像を複数生成してもらいました。
アニメーションGIF作成
生成した画像を使って、オンラインでアニメーションGIFを作ってくれるサービスで作成しました。
検索すればいっぱいありますので是非探してみてください。
CSSのclip-pathで要素をくり抜き
完成版では複雑な形をした要素の中に背景画像としてアニメーションGIFを読み込んでいます。
これは矩形をCSSのclip-pathでくり抜いています。
clip-pathは指定した座標で要素をくりぬける便利なプロパティですが、座標指定をコード上で書いていくのは至難です。
.block1 {
background: url(https://storage.googleapis.com/zenn-user-upload/0a5022b3b59d-20230128.gif);
background-size: cover;
width: 70vw;
height: 150px;
//↓これをコード上で指定していくの大変
clip-path: polygon(0% 0%, 78% 0%, 80% 24%, 75% 28%, 89% 30%, 78% 31%, 78% 38%, 95% 40%, 95% 45%, 100% 47%, 100% 99%, 96% 98%, 92% 100%, 0% 99%);
}
こちらも外部サービスを利用しました。
「https://bennettfeely.com/clippy/ 」
このように画面上で簡単に座標を指定できます。
スクロールアニメーションの実装
最初は生のJavaScriptで実装しようとしていたのですが、イベントハンドリングが煩雑になりそうだったので諦め、今回はアニメーションライブラリのGSAPを使います。
使い方については省きますが、実装がとても楽になる上に表現の幅が広がる便利なライブラリです。
gsap.registerPlugin(ScrollTrigger)
const blockAnimation = gsap.timeline({
scrollTrigger: {
trigger: ".wrap",
start: 'top 100%',
end: 'bottom 20%',
scrub: true,
}
})
blockAnimation.fromTo(".block1", { width: '50vw' }, { width: "70vw" });
blockAnimation.fromTo(".block2", { width: '35vw' }, { width: "55vw" },"<");
blockAnimation.fromTo(".text", { x: '25vw' }, { x: "35vw" },"<");
blockAnimation.fromTo(".block3", { width: '20vw' }, { width: "30vw" },"<");
blockAnimation.fromTo(".block4", { width: '40vw' }, { width: "60vw" },"<");
ポイント
- スクロールイベントのため、「ScrollTrigger」プラグインを読み込みます。
- スクロールに合わせてアニメーションを動かすため
scrub: trueを指定します。 - 各要素のアニメーションを同期させるため
fromToメソッド内に"<"を指定します。これを指定しないと各要素それぞれのタイミングで動き出してしまいます。
https://gyazo.com/d2699dffaca982f7b69eeda35b5d8688
まとめ
一番苦戦したのは生のJavaScriptで実装しようとしていた時でした。
GSAPを使うと決めてからは実装時間よりもむしろ使い方を調べている時間の方が長かったです。
こうやって実際に作ることで、制作する上での自分の表現力も広がった気がします。
他にもアニメ作品の参考になる演出はいっぱいありますので今後も作っていきたいと思います。
参考サイト
Discussion