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

公開日: : 最終更新日:2016/02/29 イベント・セミナー , , , , , ,

内容のメモ、です。

#[JS/CSS/SVG] Webとアニメーションの様々なありかた
http://kfug.connpass.com/event/25576/

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

risa.yasui

そもそもアニメーションとは?
「ディズニーアニメーション 生命を吹き込む魔法」
webアニメーションに活かそう!

第三章のアニメーションの原則、を紹介。

潰しと伸ばし

力がかかる方向に物質が歪む表現。
雪見だいふく、のページが参考になる。
雪見だいふく | お口の恋人 ロッテ
柔らかさの表現

予備動作

動き出す直前の動作を入れる。
予測させる。違和感を取り除く。
SAVVYのデジタルカタログ。左上のページが少しめくれる動作、が参考。
株式会社 京阪神エルマガジン社|SAVVY 2016年3月号 京都 ごはんとおやつ2016
ここの「立ち読み」をクリック後

演出

見せたい要素を他の要素の変化で目立たせる。
電球表現とか、クローズアップとか。
webだと、モーダルウインドウで周りを暗くする、とかが演出になる。

逐次書きと原画による設計

逐次書き…パラパラ漫画
原画による設計….キーフレームを置いて間を補完
100本のスプーン、が予想外の動きでよかった
100本のスプーン
メニューの「kodomo」をクリックするとコミカルなサイトに変わります。

後追いの動き

止めるときなど、余韻を残す。
急に止まると不自然。
webだと、パララックスの動きがこれにあたる。

スローインとスローアウト

いわゆる、イージング。
ゆっくり変化したさせることで綺麗にアニメーションを見せることが出来る。

まとめ

アニメーションの原則を活かして動きを考えよう。

Adobe Animate CCを触ってみた

https://usk.herokuapp.com/lab/animate_cc_demo/demo.html
発表させてもらいました。
詳細は社内のブログで書く予定です。

以下にて詳細書きました!
【関西フロントエンドUG】Webとアニメーションの様々なありかた、で発表してきました – Tips Note

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

H_HASEGAWA
http://blendaround.com/Cartoons/cartoon8

灰色で前のフレームが残す点に苦労した。
source-in 描画モード

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

@shima_x_o

https://happibon.jp/happy-ever-after/

skrollrを使った。
https://github.com/Prinzhorn/skrollr
スクロール量とプロパティを書くだけで動かす事ができる。

ただし、複雑なページだとdiv内にプロパティが大量に入って大変。
なんとかしたい。

jadeを使おう

  • htmlをカテゴリごとに分割できたことで若干マシになった。
  • CSSの値を変数化したら楽だった。
  • パララックスサイトは既存のJSを使うと楽

パララックスサイトを請け負う場合はぼったくり価格でやる!

jadeが気になる場合は、フロントエンドカンファレンスでハンズオンを規格してます!

ライブラリの紹介とか

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

jQyery、CSS、Velocityアニメーション

CSSアニメーションとの使い分けは、チェーンアニメーションが出来るかどうか、だったが、CSSアニメーションでも出来るようになったのであまりメリットないかも。

jQueryのanimateのコールバックでつなぐ

velociry.jsを使えば便利。
http://julian.com/research/velocity/

animatevelociry に変えるだけ。
早くなる、よう。
なので、animate使う場合は、velocity使った方がいい。

CSS、animate、velocityを同時に実行してみたら、CSSが一番早かった。
CSSのアニメーションだと、色をつけたりも簡単に出来る。

velocityを作ってる人が、タイポグラフィアニメーション用のBlast.jsてのを作っている。
http://julian.com/research/blast/

velociry.jsにはプラグインがある。
VMD、てのがすごい。
オンラインでアニメーションをデモ出来る。
ブックマークレットを使って、任意のサイト上で要素をアニメーションさせる事ができる。
デバッグツールのアニメーション版、みたいな。

velociryではCSS3のアニメーションをするのは大変だった。

Pixi

http://www.pixijs.com/

桜を振らせてみた。
桜の花びら一枚すつがimgタグでそれらを全て変化させている。
しかし、数が増えるとフレームレートが落ちる。
それをWEB GL使うと、FPS60くらい出て重くもならずスムーズ

http://cloudkidstudio.github.io/PixiParticlesEditor/
https://github.com/CloudKidStudio/PixiParticlesEditor

pixiのプラグインでwebブラウザ上のエディターが公開されている。
その中で好きなように作成し、そのアニメーションを書き出してやる事が出来る。
それだけでアニメーションが完成する。

まとめ

手抜きをしよう!

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

@_likr

16

1000 / 16 = 16.66666
60FPSの場合の1画面が表示される時間

アニメーション

16ミリ秒ごとに画面を切り替えること

60FPS?

人間が認識出来る限界
ブラウン管の技術に由来しているよう。
Googleも60FPSを提唱している。
https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail

16ミリ秒

16ミリ秒、とはいってもPCにとっては意外と遅い。

実装

昔はsetIntervalで回していた。
今は、requestAnimationFrameがある。
最大FPSが60FPSになるようにスケジュールしてくれる。
(処理が思い場合はそれ以下になるが)
ブラウザのタブでアクティブじゃない場合は更新頻度を落としてくれる。PCの処理が重くならない

チューニング

requestAnimationFrameで自前で実装するのはしんどい。

  • jQuery
  • D3.js
  • velociry

CSSで指定出来るeasingファンクションの一覧
http://easings.net/ja

もっと楽に…

webの標準仕様だけでアニメーションできる時代になっている。
CSS Animations/ CSS Transitions
CSS Transionsは一度だけ動かすもの。Animationsはずっと動かすもの

Web Animations(JS)
web-animations.ja
https://www.polymer-project.org/0.5/platform/web-animations.html
https://github.com/web-animations/web-animations-js
JSで作ると、2つのアニメーションを同期させたり出来る

まとめ

アニメーションは細かい画面を更新してるだけ、というのを忘れない。
無理なものは無理、と判断する。

実際の検討は、

  1. CSS Animations / CSS Trantisons
  2. Web Animations
  3. requestAnimationFramae

の順で頑張りましょう。

ライブラリ使う前に、CSSで出来るものはやるほうが良いよ。web標準だし。

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

@mikakane

なぜSVGか?

帳票を作成してる時、
イラレで作ってると誰でも編集出来てしまう。

web上に作れば便利じゃない?
印刷しようとすると、黒背景に白文字とかが出来ない(背景色が抜ける)

PDFで画像にする?→SVGでやっちゃおう
意外と簡単に出来た!

調子にのって、自社ロゴをSVGで書いてみました。

流れ

<pathタグのプロパティに座標を打っていく。
Qをつけると曲線が書ける。ベジェポイントを打つ感じ。

触ってみて

複雑なSVGでも、ちょっといじるだけでアニメーションをさせられたりする。
仕組みがわかればいじるのも怖くなくなる。

おまけ

LT

GPUアクセラレーションを効かせた無限スクロールを2/20までに実装してどやっ!ってする

@itozyun

iScrollから取ってきたものを組み込んでる
行が少ない場合はよいが、1万行くらいある場合、最初に全部書いてしまうと重くなりすぎる。
なので、次々と順番に読み込む、「無限スクロール」を実装したかった。

GPUアクセラレーションとかGPUレイヤーとかを使いたかった。
が、なんやかんやで出来ませんでした。。。

他の参加者の方のブログ

【イベントレポ】Webとアニメーションの様々なありかたに参加しました | Snaplog
関西フロントエンドUG Webとアニメーションの様々なありかたに参加してきました
2016-02-20 関西フロントエンド UG の『 Webとアニメーションの様々なありかた』にいった – blog.bouzuya.net

ad

ad

ad

PAGE TOP ↑