Upgrade to Pro — share decks privately, control downloads, hide ads and more …

我々はCreateJSをどう使うべきか?

 我々はCreateJSをどう使うべきか?

2020年にFlash Playerのサポート終了を控えた今、過去にFlashで作られていたようなアニメーションをブラウザで目にする機会が減っています。一方で、UI/UXを重視する人々からは、動きを伴ったマイクロインタラクションに注目が集まっています。動きを作り出す技術は、時代を問わずに求められています。本セッションでは、HTML5時代にCreateJSをどう用いれば効果的なのか、考えるためのヒントをご紹介します。

448jp | OKI Yoshiya

December 07, 2017
Tweet

More Decks by 448jp | OKI Yoshiya

Other Decks in Technology

Transcript

  1. 2017.12.7 (Thu)
    我々はCreateJSを
    どう使うべきか?
    世路庵 沖 良矢

    View Slide

  2. 沖 良矢
    ◉ 世路庵
    ◉ フリーランス10年目
    ◉ インタラクションデザイナー
    @448jp
    おき よしや

    View Slide

  3. KASHIYAMA the Smart Tailor
    (2017-)

    View Slide

  4. 黒歴史トリオ
    (2017)

    View Slide

  5. Web Designing連載
    (2009-2015)

    View Slide

  6. 『Flash for HTML5』
    ◉ 電子書籍(PDF / Kindle)
    ◉ 全72ページ
    ◉ 価格:864円
    ◉ 著者:沖 良矢、池田 泰延
    ◉ 出版社:マイナビ出版

    View Slide

  7. CreateJS Tシャツ

    View Slide

  8. Grant Skinnerも
    着てます!

    View Slide

  9. 1. アニメーションが持つ力
    2. CreateJSを使いこなすヒント
    本日お話しすること

    View Slide

  10. アニメーションが持つ力
    01
    The Power of Animation

    View Slide

  11. アニメーション
    非アニメーション
    時間軸

    View Slide

  12. フェナキスティスコープ(和名:驚き盤)

    View Slide

  13. フェナキスティスコープ(和名:驚き盤)

    View Slide

  14. 画は静止していても
    動いているように見える

    View Slide

  15. 語源はギリシア語で
    「騙す」

    View Slide

  16. アニメーション(animation)
    語源はラテン語で「霊魂(anima)」

    View Slide

  17. 私たちはアニメーションによって
    そこに存在するはずのない
    嘘を作り出すことができる

    View Slide

  18. webにおけるアニメーションの技術的制約
    ◉ インタラクションとの関係性
    ◉ 多様な画面解像度
    ◉ 再生環境のスペック依存
    ◉ ベースとする技術の縛り

    View Slide

  19. webにおけるアニメーションの目的
    ◉ フィードバック
    ◉ 世界観の演出
    ◉ ストーリーの伝達

    View Slide

  20. webにおけるアニメーションの目的
    ◉ フィードバック
    ◉ 世界観の演出
    ◉ ストーリーの伝達
    CreateJSが強みとするのは、
    このあたり

    View Slide

  21. 転倒ます型雨量計の例

    View Slide

  22. テキストの場合
    雨量計の内部に、シーソーの支点(転倒軸)上で結合され
    た2つの容器(枡)からなる転倒ますと呼ばれる機構を持
    つ。受水器が集めた降水は一方のますに注ぎ込み、一定量
    (多くは降水量0.5mm相当)がたまると、その重さによっ
    てシーソーが転倒し、降水は跳ね上がったもう片方のます
    に注ぎ込むようになる。これを繰り返して、1時間当たり
    の左右交互に転倒する回数を数えることによって雨量が測
    られる(大雨の時には猛スピードで転倒が繰り返されるこ
    とになる)。
    引用:https://ja.wikipedia.org/wiki/%E9%9B%A8%E9%87%8F%E8%A8%88

    View Slide

  23. 画像の場合
    引用:http://www.snwm.co.jp/uryou2.html

    View Slide

  24. テキスト+画像の場合
    ① 受水口(雨が降り込んでくる所)
    ② 漏斗 (降り込んだ雨を集める所)
    ③ 転倒ます(水を計る所)
    「受水口」からの雨が「漏斗」で集められ「転倒ま
    す」へ雨水を貯める。0.5mmに達すると「転倒ます」
    が倒れ、溜まった雨水を排水する。倒れる事により反
    対側の「ます」へ再び雨水が溜まりはじめる。
    「転倒ます」が転倒をするたびに接点パルスを発生す
    る。これを計測することによって降水量がわかります。
    引用:http://www.snwm.co.jp/uryou2.html

    View Slide

  25. アニメーションの場合
    アニメーションを開く

    View Slide

  26. アニメーションにしか
    伝えられないことがある

    View Slide

  27. CreateJSを使いこなすヒント
    02
    Tips on using CreateJS

    View Slide

  28. webにおけるアニメーション技術
    ◉DOMアニメーション
    ◉CSS3アニメーション
    ◉Canvas
    ◉GIFアニメーション
    ◉video要素のインライン再生

    View Slide

  29. DOMアニメーション
    要素のstyle属性を連続的に変更する
    $("#hoge").animate({
    "color": "#ff0000",
    "backgroundColor": "#00ff00"
    }, 1000);

    View Slide

  30. 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;
    }

    View Slide

  31. Canvas(Context2d / WebGL)
    HTML5で追加されたcanvas要素を利用する

    フォールバックコンテンツ

    View Slide

  32. 主流はコード思考のアニメーション
    three.js

    View Slide

  33. CreateJSの強み

    View Slide

  34. Animate CCによる
    アニメーションの
    圧倒的な作りやすさ

    View Slide

  35. コード思考
    タイムライン思考
    本来Animateが持つ強み

    View Slide

  36. 事例紹介

    View Slide

  37. まとめ
    Conclusion

    View Slide

  38. アニメーションにしか
    伝えられないことがある

    View Slide

  39. タイムライン思考の
    アニメーションにしか
    伝えられないことがある

    View Slide

  40. これからのwebにも
    アニメーションの力が必要

    View Slide

  41. View Slide

  42. ありがとうございました
    沖 良矢
    @448jp

    View Slide