目次
効率的にアニメーションを導入していくために。
はじめまして。
フロントエンドエンジニア１年生のマンノです。
日本語教師として台湾でかわいい生徒達と、マンゴーなんか食べながらのんびり暮らしてたのですが、
今年からはAWESOMEで、フロントエンドエンジニアとして働かせていただくこととなりました。
オフィスの隣に小学校がありまして、新一年生同士ワイワイ言いながら出勤させていただいております。
そんな新１年生の私ですが、HPを作成する流れでクライアント様やデザイナーからのデザイン案として
「アニメーションを導入したい」という話はよく出てきます。
最近は時代の流れでFLASHからスマホにも対応しているcanvasアニメーションへと移行してきていることから、弊社でもアニメーションに関しては、
HTML canvas＋JavaScript／CreateJS などで書いていくことが多いのですが。
Animate CCなんかのオーサリングツールを使っていく方が効率的にも良いため、主にAnimate CCで現在は作業を進めています。
以前はEdge CCなども活用していたのですが、開発が終了してしまったため、、残念！
では今回はAnimate CCを実際に使って簡単なアニメーションを作成してみます。
こんなに簡単に作れてしまいます
弊社株式会社AWESOMEのデザイン案でも三角形がくるくる回っているアニメーションの案が出てAnimate CCで作成しました。
とても単純なアニメーションですので、こちらで三角形を直接書いて作っちゃおうと思ったんですが
デザイナーから「私の三角形を使いなさい」と指示があったため、
一体どこが違うんだろう？と疑問に思いながらも、頂いたデータを元に作成することになりました。
とりあえず三角形を配置しまして。
今回はランダムで三角形を生成したりなど複雑な動作はなく、単純に回すだけでOKということだったので
配置してコードスニペット内にある「連続回転」を指定してあげるだけでアニメーション自体は完成となりました。
ちょっとテストに使ってたのをそのまま貼り付けたので横長ですが、簡単にこのようなアニメーションが作れてしまいます。
Animate CC で透過ってどうするの？
ただ実際に実装していく時にAnimate ccで自動出力したコードを直接貼り付けただけでは、透過されず他の画像に干渉してしまっていたため
<canvas id="canvas" width="1220" height="440" style="background-color:#000000"></canvas>
を
<canvas id="canvas" width="1220" height="440"></canvas>
とスタイル指定だけ消してあげたら無事透過されました。
ただそれでも透過されない場合などは、直接javascriptの方にcanvasはrgba(0,0,0,0)なんだよーって指定してやれば透過されるでしょう。
canvas.style.backgroundColor="rgba(0,0,0,0)"; document.body.style.backgroundColor = "rgba(0,0,0,0)";
などで指定すれば透過されます。
さいごに
プログラミングの知識が全くないデザイナーさんなどでもサクっと作れてしまうほど使い勝手の良いAnimate CC。
とても単純なアニメーションなどでも、サイトデザインに合わせて効果的に導入していけば、
他のサイトデザインとは違う特徴を与えてくれます。
アイデア次第で面白いことも色々できるため、是非Animate CCでアニメーションを作ってみてください。
