シームレスなズーム表示

2022年8月14日 19:54

GSAP(GreenSock Animation Platform)とはWebアニメーションに特化したJaveScriptライブラリです。GSAPを使えば複雑なアニメーションも簡単に実装できる！・・・らしいので、試してみたいと思います。

いろいろな機能があるようですが、今回は「ExpoScaleEase」という機能を試してみたいと思います。画像がどこまでも拡大していくような効果を演出出来そうです。

仕組み自体はシンプルで、登録された画像を滑らかに（カクカクしないで）切り替えていくというものです。今回は16枚の画像を用意しました。

因みにGifアニメーションだとこんな感じになります。
スピードを上げてもカクカクして、コマ間の継ぎ目を感じますね。

GSAPのサンプルコードを書き替えてサーバーにアップして、Webブラウザで開きます。

コマ間の継ぎ目を補完しているらしく、スムースにズームしているように見えますね。コマの継ぎ目を感じません。どんどん小さな世界に入っていく。という表現に使えそうです！
↓ gifの場合と見比べてくださいね。

この記事が気に入ったらサポートをしてみませんか？