シームレスなズーム表示
GSAPの「ExpoScaleEase」でつなぎ目の無いズーム
GSAP(GreenSock Animation Platform)とはWebアニメーションに特化したJaveScriptライブラリです。GSAPを使えば複雑なアニメーションも簡単に実装できる！・・・らしいので、試してみたいと思います。
いろいろな機能があるようですが、今回は「ExpoScaleEase」という機能を試してみたいと思います。画像がどこまでも拡大していくような効果を演出出来そうです。
仕組み自体はシンプルで、登録された画像を滑らかに（カクカクしないで）切り替えていくというものです。今回は16枚の画像を用意しました。
因みにGifアニメーションだとこんな感じになります。
スピードを上げてもカクカクして、コマ間の継ぎ目を感じますね。
GSAPのサンプルコードを書き替えてサーバーにアップして、Webブラウザで開きます。
結果は・・
コマ間の継ぎ目を補完しているらしく、スムースにズームしているように見えますね。コマの継ぎ目を感じません。どんどん小さな世界に入っていく。という表現に使えそうです！
↓ gifの場合と見比べてくださいね。