2020年にFlash Playerのサポート終了を控えた今、過去にFlashで作られていたようなアニメーションをブラウザで目にする機会が減っています。一方で、UI/UXを重視する人々からは、動きを伴ったマイクロインタラクションに注目が集まっています。動きを作り出す技術は、時代を問わずに求められています。本セッションでは、HTML5時代にCreateJSをどう用いれば効果的なのか、考えるためのヒントをご紹介します。
2017.12.7 (Thu)我々はCreateJSをどう使うべきか?世路庵 沖 良矢
View Slide
沖 良矢◉ 世路庵◉ フリーランス10年目◉ インタラクションデザイナー@448jpおき よしや
KASHIYAMA the Smart Tailor(2017-)
黒歴史トリオ(2017)
Web Designing連載(2009-2015)
『Flash for HTML5』◉ 電子書籍(PDF / Kindle)◉ 全72ページ◉ 価格:864円◉ 著者:沖 良矢、池田 泰延◉ 出版社:マイナビ出版
CreateJS Tシャツ
Grant Skinnerも着てます!
1. アニメーションが持つ力2. CreateJSを使いこなすヒント本日お話しすること
アニメーションが持つ力01The Power of Animation
アニメーション非アニメーション時間軸
フェナキスティスコープ(和名:驚き盤)
画は静止していても動いているように見える
語源はギリシア語で「騙す」
アニメーション(animation)語源はラテン語で「霊魂(anima)」
私たちはアニメーションによってそこに存在するはずのない嘘を作り出すことができる
webにおけるアニメーションの技術的制約◉ インタラクションとの関係性◉ 多様な画面解像度◉ 再生環境のスペック依存◉ ベースとする技術の縛り
webにおけるアニメーションの目的◉ フィードバック◉ 世界観の演出◉ ストーリーの伝達
webにおけるアニメーションの目的◉ フィードバック◉ 世界観の演出◉ ストーリーの伝達CreateJSが強みとするのは、このあたり
転倒ます型雨量計の例
テキストの場合雨量計の内部に、シーソーの支点(転倒軸)上で結合された2つの容器(枡)からなる転倒ますと呼ばれる機構を持つ。受水器が集めた降水は一方のますに注ぎ込み、一定量(多くは降水量0.5mm相当)がたまると、その重さによってシーソーが転倒し、降水は跳ね上がったもう片方のますに注ぎ込むようになる。これを繰り返して、1時間当たりの左右交互に転倒する回数を数えることによって雨量が測られる(大雨の時には猛スピードで転倒が繰り返されることになる)。引用:https://ja.wikipedia.org/wiki/%E9%9B%A8%E9%87%8F%E8%A8%88
画像の場合引用:http://www.snwm.co.jp/uryou2.html
テキスト+画像の場合① 受水口(雨が降り込んでくる所)② 漏斗 (降り込んだ雨を集める所)③ 転倒ます(水を計る所)「受水口」からの雨が「漏斗」で集められ「転倒ます」へ雨水を貯める。0.5mmに達すると「転倒ます」が倒れ、溜まった雨水を排水する。倒れる事により反対側の「ます」へ再び雨水が溜まりはじめる。「転倒ます」が転倒をするたびに接点パルスを発生する。これを計測することによって降水量がわかります。引用:http://www.snwm.co.jp/uryou2.html
アニメーションの場合アニメーションを開く
アニメーションにしか伝えられないことがある
CreateJSを使いこなすヒント02Tips on using CreateJS
webにおけるアニメーション技術◉DOMアニメーション◉CSS3アニメーション◉Canvas◉GIFアニメーション◉video要素のインライン再生
DOMアニメーション要素のstyle属性を連続的に変更する$("#hoge").animate({"color": "#ff0000","backgroundColor": "#00ff00"}, 1000);
CSS3アニメーション(Transitions / Animations)CSS3で追加されたCSS TransitionsまたはCSS Animationsを利用する#hoge {color: "#ff0000";transition: 1s ease-in-out;}#hoge:hover {color: "#0000ff";}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}#hoge {animation-name: fadeIn;}
Canvas(Context2d / WebGL)HTML5で追加されたcanvas要素を利用するフォールバックコンテンツ
主流はコード思考のアニメーションthree.js
CreateJSの強み
Animate CCによるアニメーションの圧倒的な作りやすさ
コード思考タイムライン思考本来Animateが持つ強み
事例紹介
まとめConclusion
タイムライン思考のアニメーションにしか伝えられないことがある
これからのwebにもアニメーションの力が必要
ありがとうございました沖 良矢@448jp