以前「簡単！！！PhotoshopですぐにつくれるアニメーションGIF」という記事を書きました

この作り方だけだと、画像がカクカクしますよね、でもスムーズなアニメーションGifを作りたい！

今日はそんな時に便利な、動きをスムーズに見せる機能をご紹介します。

トゥイーンというエフェクト機能です。

FLASHでもよく使用される動的エフェクトですが、PhotoShop上タイムラインにもこのエフェクトがついており、とても便利です。

簡単に言えばA地点からB地点にオブジェクト（パーツ）をスムーズ移動させる機能になります。

トゥイーンの設定

１）始点パーツを置いたフレームと終点になるフレームをつくります。

２）始点パーツを置いたフレームを選択して上記の赤丸部分のトゥイーンボタンをクリックします。

３）この時点で設定するタイムライン（コマ）数や透明度などをうまく調整するとなめらかな動きになります。

スピード調整

また、各フレームの秒数を少なく設定すればスピード感がより増します。

ほぼ0に近い0.01秒のように設定することも可能ですが、主流のブラウザ間でもこのタイムレートの限界が異なり、0.01秒と設定してしまうとブラウザによっては0.1秒に強制的に修正され、プレビューされてしまうようです。

各ブラウザを考慮したフレームレート速度の限界は0.06と言われています。

などなどを踏まえて↓のような動きになりました。

フレーム数等を細かく計算していないので、ちょっとぎこちない動きにも見えますが、大分スムーズですよね。

オブジェクトの影などを工夫すると更に “っぽく” 見えたのかもしれません。

※GIFなので、グラデーションやドロップシャドウはほどほどでw

色々と工夫して、試して見て下さい！