【イベントレポ】Webとアニメーションの様々なありかたに参加しました

Posted on by misumi_takuma

2016年2月20日に開催された関西フロントエンドUGの「Webとアニメーションの様々なありかた」に参加してきました。

関西フロントエンドUGのconnpassページはこちら

セッション内容
  1. ディズニーから学ぶ アニメーションの基本原則
  2. Adobe Animate CCを触ってみた
  3. Canvas でパラパラ漫画を作ってみた
  4. パララックスサイトの設計方法、制作フロー
  5. アニメーションライブラリについて
  6. アニメーションの基礎知識
  7. 自社ロゴを手書きSVGで書いてアニメーションさせてみた話

#1：ディズニーから学ぶ アニメーションの基本原則

Web上でアニメーションをつける時、どのように考えたらいいのか？
それをディズニーから学ぼうというセッションでした。

参考にされてた本は「ディズニーアニメーション 生命を吹き込む魔法 ― The Illusion of Life」

Amazonに「大型本」と書かれていて、実際見るとめちゃくちゃデカかかった記憶があります（笑）

この中から一部紹介されてた中のさらに一部を紹介します。

潰しと伸ばし

潰しと伸ばしを意識することで物質の柔軟性を表現できます。

例えば、ボールが落ちて地面にぶつかる瞬間、ボールは横に潰れます。

ただ単に要素を動かすだけなじゃく、潰しと伸ばしを意識すると本当に物が動いているような気持ちいい動きになりそうですね。

参考動画

あと、参考に紹介されていた雪見だいふくのサイトいいですね！
雪見だいふくに触れた時の動きが気持ちいい。

雪見だいふく

まさに潰しと伸ばし

この伸縮に関してはCSSのtransform:scaleですぐに取り入れられそう

予備動作

いきなり要素を動かすのではなく、次の動作を予測させる動きを入れるのが予備動作です。

人が運動する時には、走る前に腕を構えたり、膝を曲げて踏ん張ったりしますよね。

参考動画

演出

ある表現を明確に提示することです。

注目させたい要素を引き立たせるために他の要素を動かしたり、他の要素にマスクをかけたりします。

例としてあげられていたのがモーダルウィンドウ。
注目させたい要素とそれ以外を半透明のレイヤーで区切ることで注目させることができます。

CSSフィルターのblurでぼかすこともできるので、
注目させたいもの以外はぼかすのも一つですかね。

参考動画

最近、クリエイティブモグモグというブログが好きでよく見てますが、
このブログドロワーメニューを開くとメインコンテンツにぼかしがかかります。

クリエイティブモグモグ

ドロワーメニューでぼかすの初めてみたので参考になりました。

他にもアニメーションの基本原則を紹介されていて、もっと聞いてみたいと思いました。

しまさんも言ってる

#2：Adobe Animate CCを触ってみた

2015年12月1日に発表されたAdbe Animate CC。
Adobe Flash Professionalから名前が変わりました。

Adobe Flash Professional を Adobe Animate CC に名称変更

Canvas, SVGの書き出し機能が強化され、2016年2月9日にリリースされました。

アニメーションは要素ごとにタイムラインで管理できて、最終的にHTMLとJavaScriptで書き出されるそうです。

デモとして関西フロントエンドUGのロゴのアニメーションを作成されてました。

要素が出てくるタイミングや動きをタイムラインで管理できるのはいいですね。
あとは書き出されたHTMLとJavaScriptをコピペするだけみたいですし。

気になったところ

アニメーションを楽に作れるAdobe Animate CCですが、気になったところもあったようです。

  • プレビューでの実行だと変更が反映されない
  • スクリプトのエラーやデバックをFlash上ではできない
  • UIアニメーションは作りにくいかも

などなど

とはいえ、けっこうおもしろそうだったので、使ってみたいと思いました。

#3：Canvas でパラパラ漫画を作ってみた

パラパラ漫画を作れるスクリプトを書いたそうです。すごい。

こちらから作成できます。

Cartoon8.js

左側のエリアでマウスを使ってイラストを描き、「copy」をクリックするとコマに追加されます。

いくつか追加して、右側のエリアの「play」を押すと再生されます。

イラストを描くペンの太さや色を選ぶこともできます。

この記事がCartoon8.jsの記事ですかね。英語分からないのでごめんなさい…。

http://blendaround.com/Cartoons/SelectFrames

実際にパラパラ漫画を作った方がいました。

手軽にパラパラ漫画作れておもしろいですね。子供が好きそう。

#4：パララックスサイトの設計方法、制作フロー

インタビュー取材とロケーション撮影で作るウェディングブック「はっぴ本」ができるまでをパララックスを使って作った時の話。

そのパララックスサイトがこちら。

はっぴ本ができるまで

スクロールしていくと、はっぴ本ができるまでのストーリーが展開されます。

使用プラグイン：「skrollr」

このアニメーションには「skrollr」というプラグインを使ったそうです。

skrollr

スクロール位置によって、要素ごとに細かくCSSの設定ができるようです。

スクロールで色が変わっていくサンプルをつくってみました。

デモサイト

使い方はすごく簡単でした。

使い方

  1. Githubからダウンロード
  2. skroller.min.jsを読み込む
  3. jsファイルに「var s = skrollr.init();」と記述
  4. data-（数値）でスタイルを指定
<div data-0="background-color:rgb(134,18,64);" data-1000="background-color:rgb(65,40,169);" data-2000="background-color:rgb(195,255,255);" data-3000="background-color:rgb(38,130,36);" data-4000="background-color:rgb(218,233,93);" data-5000="background-color:rgb(230,92,43);"><p>スクロールしてください</p></div>

スクロールによる変化をdata-の後の数値とCSSでできるので簡単です。

ごちゃるHTMLをJadeで対処した

skroller簡単ですが、タグに直接書いていくので動かしたいものが増えるとHTMLがごちゃりますよね。

先ほどのサンプルサイトのように簡単なものならいいですが、はっぴ本のような複雑な動きになるとHTMLがすごいことになりそう。。。いや、実際すごいことになったみたい。。。

そこでJadeを使って、要素ごとに切り分けて、includeで呼び出すようにしたそうです。

なるほどそういう使い方もあるのか。

ってか無理矢理ぶっ込んできたな、Jade。

Jadeを知らないという方はこちらで

【Jade】ゴリラでもわかるJade入門 〜Jadeを使ってみる〜

#5：アニメーションライブラリについて

アニメーションの手法って、CSSのtransitionでやったり、jQueryでやったりいろいろありますが、
他にもいろいろあるよっていう話だったと思います。（トイレ行ってて出だし聞けなかった。。。）

Velocity.jsやSnap.js、WebGLの話をされていました。

詳しくはブログを書かれていたのでそちらを見る方がいいと思います。

VelocityとPixiの手抜きアニメーション。こうして花を咲かせましょう

「花吹雪をcanvas(WebGL)でちらせてしてみる。」とかすごいですね。

アニメーションライブラリの紹介だけでなく、どれで動かすとパフォーマンスが良いか・滑らかに動くかという話をされていてすごく勉強になりました。

Velocity.jsを試してみた

Velocity.jsは有名ですが、使ったことなかったのでちょっと試しました。

デモサイトの上がVelocity.jsで下がjQueryで動かしてます。

スタートボタンを押すと右に動きます。

デモサイト

jQueryがカクカク動くのに対して、Velocity.jsの方は滑らかに動いています。

Velocity.jsの書き方

先ほどのサンプルは以下のように書いています。

// Velocity.js
$('.box1').velocity({
  'left': 500
}, 1000);
// jQuery
$('.box2').animate({
  'left': 500
}, 1000);

jQueryのanimateを置き換えているだけです。
すごく簡単！

詳しい使い方は調べるといろいろ出てきます。

Javascriptのアニメーション処理を高速化するプラグインVelocity.jsの使い方

#6：アニメーションの基礎知識

来ました、果たして理解できるのかどうか分からないセッション。

スライドはこちら

アニメーション(のためのパフォーマンス)の基礎知識 from Yosuke Onoue

「アニメーション = 16ミリ秒毎に画面を
 更新し続けること！」と言われて
「あ、もう無理かもしれない！」と思いました。

60FPS

「16ミリ秒毎 = 60FPS」は1秒間に60枚の静止画を使って動画を作ること。

たぶん増やせばより滑らかになるのかもしれないけど、60FPSが人間が認識できる時間解像度らしい。
（よく分からなかったのでニコニコ大百科をみた）

Web-Animations-js

Web-Animations-jsというものがあるらしい。

これのことですかね。

web-animations-jsで策定中のAPIを先取りする

Web-Animations-jsはまだよく分かってないので、もうちょい調べてみます。

CSSアニメーション

スライドの最後に書かれているようにアニメーションを取り入れる際は、まずCSSアニメーションから検討しましょう

あとeasingの早見表。CSSはまだ全てサポートされてないみたいです。

Easing Function 早見表

#7：自社ロゴを手書きSVGで書いてアニメーションさせてみた話

最近、SVGの仕組みが知りたくて手書きSVGをやってみてたので、気になるセッションでした。

自社ロゴというのは「chatbox.inc」さんのロゴ

そして、こちらが手書きSVGのロゴとアニメーション

廻しすぎではないですか…？笑

最後のサンプルはマウスオーバーすると、緑色の四角が消えます。
こういったCSSとの組み合わせもできるんですね。

SVGのパス定義

SVGで使われるパス定義のコマンド（MとかLとか）は大文字と小文字があります。

大文字は絶対位置（指定した座標まで描く）
小文字が相対位置（現在地から指定した分描く）

コンマ（,）を挟んで左がx座標、右がy座標です。
スペースで区切ると連続で指定できます。

パス定義 結果
M,m 初期位置,位置のスキップ
M0,0
L,l 直線を引く
L100,200 200,200
H,h 水平線を引く
H 200
V,v 垂直線を引く
V -200
Z,z 直近のM位置まで直線を引いて線を閉じる
Q,q 曲線を引く
q10,10 10,0

他にもいろいろありますが、基本的な図形はこれでいけます。

参考サイト

svg要素の基本的な使い方まとめ

他に参加されていた方のブログ（見つけ次第追加）

  • [JS/CSS/SVG] Webとアニメーションの様々なありかた、に参加してきました
  • VelocityとPixiの手抜きアニメーション。こうして花を咲かせましょう
  • 関西フロントエンド UG の『 Webとアニメーションの様々なありかた』にいった
  • 関西フロントエンドUG Webとアニメーションの様々なありかたに参加してきました
  • 【勉強会レポ】Webとアニメーションの様々なありかた-KFUG

こちらの記事もどうぞ

Tweet
このエントリーをはてなブックマークに追加
Pocket

One thought on “【イベントレポ】Webとアニメーションの様々なありかたに参加しました”

  1. ピンバック: [JS/CSS/SVG] Webとアニメーションの様々なありかた、に参加してきました

Comments are closed.