エンジニア向けのマイクロインタラクション入門

Slide 1

Slide 1 text

エンジニア向けのマイクロインタラクション⼊⾨株式会社ICS 池⽥泰延平成30年11⽉30⽇ @ DIST.

Slide 2

Slide 2 text

⾃⼰紹介池⽥泰延 (Yasunobu Ikeda) 株式会社 ICS 代表 / 筑波⼤学⾮常勤講師 @clockmaker

Slide 3

Slide 3 text

ICS MEDIA - Webデザイナー/フロントエンジニアのメディア https://ics.media/

Slide 4

Slide 4 text

エンジニアがインタラクションを作る⽅法

Slide 5

Slide 5 text

エンジニアがインタラクションを作る⽅法 1. デザイナーが作ったモーションを組み込む 2. プログラムでモーションを実装する

Slide 6

Slide 6 text

デザイナーが作ったモーションを組み込む

Slide 7

Slide 7 text

アニメーションデータをエンジニアにどうやって渡すか？

Slide 8

Slide 8 text

デザイナーとエンジニアの分業も可能イラストやアニメ  だけ制作インタラクションの  実装なら任せな

Slide 9

Slide 9 text

アニメーションのフォーマットソフト内でアニメーションを定義動画として書き出すスクリプトとして書き出す

Slide 10

Slide 10 text

アニメーションのフォーマットソフト内でアニメーションを定義動画として書き出すスクリプトとして書き出すファイルから実装者が読み解くしかない表現が忠実。データ容量が巨⼤になりがち動的なデータに対して、組み込める。軽量

Slide 11

Slide 11 text

ツールの使い分けスクリプト書き出し XD できない After Eﬀects プラグインで  利⽤可能 Animate 利⽤可能

Slide 12

Slide 12 text

アニメーションのスクリプト化 • データ容量が少なくなる • 再⽣コントロールが容易 • インタラクション開発も可能

Slide 13

Slide 13 text

Animate + HTML Canvas CreateJS (再⽣エンジン) 標準機能で書き出し

Slide 14

Slide 14 text

After Eﬀects + Bodymovin + Lottie Web iOS Android React Native Bodymovin (プラグイン) Lottie (再⽣エンジン)

Slide 15

Slide 15 text

• 映画やTV、ビデオ、ウェブ • モーショングラフィックスやビジュアルエフェクトの制作 After Eﬀects

Slide 16

Slide 16 text

Bodymovin https://www.adobeexchange.com/creativecloud.details. .html

Slide 17

Slide 17 text

After Eﬀects + Bodymovinのアニメーション

Slide 18

Slide 18 text

After Eﬀects + Bodymovinのアニメーション

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Micro-Interaction Toolkit https://www.lottieﬁles.com/collections/micro-interaction-toolkit

Slide 21

Slide 21 text

• 元Flash Professionalというアニメーション制作ツール • ゲーム制作 • 広告コンテンツ • キャラクターアニメーション Animate

Slide 22

Slide 22 text

Animateのアニメーション精密なアニメーション制作が可能ベクターツールが充実

Slide 23

Slide 23 text

実演

Slide 24

Slide 24 text

Animate + SVG

Slide 25

Slide 25 text

• カスタムプラットフォームSDK • Animate CCのタイムラインは拡張機能によって、様々な媒体に出⼒できるようになる • PixiJS / GAF / OpenFL / AwayJS / SnapSVG Animate CC

Slide 26

Slide 26 text

⽇本全国花粉⾶散マップ Pollen Map in Japan | ICS http://ics-web.jp/projects/pollenmap/

Slide 27

Slide 27 text

HTML 製のデザインツール Particle Develop - ICS  https://ics-creative.github.io/project-particle-develop/

Slide 28

Slide 28 text

スクリプト書き出しの⽐較表現の制約媒体 After Eﬀects + Bodymovin ベクターのみ HTML + SVG iOS / Android Animate + HTML Canvas 無し HTML Canvas Animate + SnapSVG 無し HTML + SVG Animate + Pixi.js 無し WebGL

Slide 29

Slide 29 text

プログラムでモーションを実装する

Slide 30

Slide 30 text

デザイナーとエンジニアの分業も可能インタラクションの  実装は俺がすべてやる

Slide 31

Slide 31 text

Creative Icons

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

• DOMとWebGLの⼆段構え • DOMはVue.jsで実装 • WebGLはThree.jsで実装技術

Slide 34

Slide 34 text

• WebGLでは3D空間を描画 • DOMではアイコンを配置アーキテクチャー WebGL DOM(Vue.js) 重ねる

Slide 35

Slide 35 text

Three.js側でプロジェクション座標を計算座標をDOMに割り当てる x y left top

Slide 36

Slide 36 text

Three.js側のコード

Slide 37

Slide 37 text

Vue.js側のコード

Slide 38

Slide 38 text

• CSS Transitionが楽すぎる • 座標が切り替わったら⾃動的にトラジションしてくれるなぜDOMを使うか

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

• Vue.jsのタグで出現・消去のモーションが楽 • CSSクラスを割り振ってくれるなぜDOMを使うか

Slide 41

Slide 41 text

• nth-child()にtransition-delayを  仕込む •ふわっふわっ〜☁という  出現モーションができあがる順番に出す

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

• Vue.jsはDOMの管理に便利だが、   毎フレームの更新が苦⼿ • 性能観点で別のフレームワークへ切り替えるか今後の展望

Slide 44

Slide 44 text

Angular vs Vue.js vs React

Slide 45

Slide 45 text

パフォーマンス⽐較 React Angular Vue MB MB MB React Angular Vue fps fps fps React v Angular Vue . React v Angular Vue . メモリ使⽤量描画性能⼩さいほど省メモリ⼤きいほど⾼速

Slide 46

Slide 46 text

マイクロインタラクションの世界では  接続型アニメーションが今後増えていくトレンドのマイクロインタラクション

Slide 47

Slide 47 text

Native-Like Animations for Page Transitions on the Web | CSS-Tricks  https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/