はじめに
Webアニメーションの中でも、うねうねやグネグネした水っぽい動きは特に魅力的ですが、実現するには少し工夫が必要です。
本記事では、水っぽいアニメーションを作るためのアイデアを紹介します。
1.SVGフィルタで波打たせる
SVGの中に画像を用意しフィルター効果を与え、feTurbulenceを使い画像を歪ませています。
そのフィルターをgsapで横にずらすことで波打っている様に見せています。
2.mask-imageで波打たせる
こちらのアニメーションは2枚の画像を重ね片方の画像をスケールし波紋のようなマスク画像を使用することで波打っているかの様に見せています。
使用したマスク画像
3.マスキング+スプライトで滲ませるアニメーション
なぜかcodepenで画像が表示されないので下記の動画でアニメーションをご確認ください。
まずは、マスクで使用する素材を準備します
アフターエフェクトを使い実現させたい滲みアニメーションを作成し連番で書き出す。それを繋げて一つの画像にします。
（例）
作成した画像をmask-imageに設定しcssプロパティanimation-timing-functionのstepsでコマ送りアニメーションさせることで滲んだような表現を演出しています。
いかがだったてしょうか。
（本記事で紹介したのはあくまでアイデアで細かいチューニングなどはしておりませんのでご注意ください。）
以上この記事を読んだ誰かのお役に立てれば幸いです。