anime.jsを導入した話

Transcript

1. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Copyright (C)

   DeNA Co.,Ltd. All Rights Reserved. July 25, 2018 守⾕ 豊 デザイン本部デザイン戦略部 UI/UXデザイン第⼀グループ anime.jsを導⼊した話

2. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 守⾕ 豊 @yutakam80

   株式会社ディー・エヌ・エー フロントエンドエンジニア

3. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 最近関わったプロダクト ਓੜΛ΋ͬͱϙδςΟϒʹ

4. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

5. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. サービス上で実現したかったこと •ミニマムで実装できること •使いやすいこと

   •SVGに対応していること •イケてること

6. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. anime.jsの採⽤理由 •ファイルサイズが軽い（14KB） •公式のドキュメントがサンプル集になっていてわかりやすい

   •アニメーション設定を直感的に書ける •イージングが⼀通り⽤意されている •SVGに対応している

7. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. アニメーション設定：基本形 anime({ targets:

   ‘.class’, duration: 1000, left: ‘100px’, easing: ‘easeOutBack’ }) ཁૉ(ཁૉ໊, Ϋϥε໊, ID໊) Ξχϝʔγϣϯʹֻ͚Δ࣌ؒ Ξχϝʔγϣϯର৅ͷϓϩύςΟ Πʔδϯά

8. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. アニメーション設定：応⽤形 anime({ targets:

   [‘.class1’, ‘.class2’], opacity: { duration: 1000, value: 1 easing: 'easeOutExpo' }, rotate: { duration: 1200, value: [180, 360] } }) ഑ྻͰෳ਺ͷཁૉΛࢦఆՄೳ ϓϩύςΟ୯ҐͰݸผʹઃఆ͕Մೳ ։࢝஋ɺऴྃ஋͕ઃఆՄೳ

9. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 導⼊例1 : 連続アニメーション

   timeline()を⽤いて、add()で要 素別にアニメーションを指定。 delayで時差を付けた動きを表現 example: https://codepen.io/yutakam80/pen/RBGBOK

10. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 導⼊例2 : SVGアニメーション

    + カウントアップ 円グラフをアニメーション update()でカウントアップ example: https://codepen.io/yutakam80/pen/zLZLyj

11. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. anime.jsまとめ •軽量ライブラリながら機能は多め •多少複雑なアニメーションも実現可能

    •細かな部分のアニメーションを実装したいプロジェクト向け
 (演出ゴリゴリしたいなら他のライブラリがおすすめ)