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 full-size slide

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

    View full-size slide

  3. KASHIYAMA the Smart Tailor
    (2017-)

    View full-size slide

  4. 黒歴史トリオ
    (2017)

    View full-size slide

  5. Web Designing連載
    (2009-2015)

    View full-size slide

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

    View full-size slide

  7. CreateJS Tシャツ

    View full-size slide

  8. Grant Skinnerも
    着てます!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

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

    View full-size slide

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

    View full-size slide

  33. CreateJSの強み

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 事例紹介

    View full-size slide

  37. まとめ
    Conclusion

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide