ローディング中

Animate CC でサクッとアニメーションを作ってみた

効率的にアニメーションを導入していくために。

はじめまして。
フロントエンドエンジニア1年生のマンノです。

日本語教師として台湾でかわいい生徒達と、マンゴーなんか食べながらのんびり暮らしてたのですが、
今年からはAWESOMEで、フロントエンドエンジニアとして働かせていただくこととなりました。
オフィスの隣に小学校がありまして、新一年生同士ワイワイ言いながら出勤させていただいております。
そんな新1年生の私ですが、HPを作成する流れでクライアント様やデザイナーからのデザイン案として

「アニメーションを導入したい」という話はよく出てきます。

最近は時代の流れでFLASHからスマホにも対応しているcanvasアニメーションへと移行してきていることから、弊社でもアニメーションに関しては、

HTML canvas+JavaScript/CreateJS などで書いていくことが多いのですが。

Animate CCなんかのオーサリングツールを使っていく方が効率的にも良いため、主にAnimate CCで現在は作業を進めています。
以前はEdge CCなども活用していたのですが、開発が終了してしまったため、、残念!

では今回はAnimate CCを実際に使って簡単なアニメーションを作成してみます。

こんなに簡単に作れてしまいます

弊社株式会社AWESOMEのデザイン案でも三角形がくるくる回っているアニメーションの案が出てAnimate CCで作成しました。
とても単純なアニメーションですので、こちらで三角形を直接書いて作っちゃおうと思ったんですが

デザイナーから「私の三角形を使いなさい」と指示があったため、

一体どこが違うんだろう?と疑問に思いながらも、頂いたデータを元に作成することになりました。
とりあえず三角形を配置しまして。

triangle

今回はランダムで三角形を生成したりなど複雑な動作はなく、単純に回すだけでOKということだったので
配置してコードスニペット内にある「連続回転」を指定してあげるだけでアニメーション自体は完成となりました。

スクリーンショット 2016-05-08 午後4.48

 

 

ちょっとテストに使ってたのをそのまま貼り付けたので横長ですが、簡単にこのようなアニメーションが作れてしまいます。

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でアニメーションを作ってみてください。

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.