待機のアニメーションをanime.jsで作成してみよう!

  待機のアニメーションをanime.jsで作成してみよう!

Web読み込みなどで、待機している時にアニメーションを見ることがあるかと思います。

このアニメーションはgifを使っているのですが…こんな待機アニメーションをanime.jsで作るとしたら、どんなコードになってくるのか。ということが気になったので、実際に作ってみました!

1.UiPathのロード画面を参考に、下記のスライド型アニメーションの作成。
ちょっと規則ただしすぎる動きになっているかと思いますが…こんな感じだと思います。


 

 
 
 
 

2.最初のGIF画像を参考に、下記の点滅する待機アニメーションを作成。
 
 
 
 
やっぱり作るのに時間がかかるし、サイトのロードも重くなるので待機画面はGIFでいいのかもしれませんね。コードは今回全部載せると長くなってしまうのでポイントだけ切り出したいと思います。

1.のポイントとしては、.addでアニメーションを1つ1つ処理していきます。

2.のポイントとしては、 Opacityで要素の透明度を変えているというところです。

いかがでしたか?anime.jsを使って思った通りの待機アニメーションを作るのって難しいですね…でも作れたらやっぱり面白いですよね。

Flat Preloaders 

こんなアニメーションなんかも作れそうな気がしてきますよね…ぜひ、自分が作ったコードも参考に実際にanime.jsを使ってアニメーションを作ってみてください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です