Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 守⾕ 豊 @yutakam80 株式会社ディー・エヌ・エー フロントエンドエンジニア

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Copyright (C) DeNA Co.,Ltd. All Rights Reserved. anime.jsの採⽤理由 •ファイルサイズが軽い（14KB） •公式のドキュメントがサンプル集になっていてわかりやすい •アニメーション設定を直感的に書ける •イージングが⼀通り⽤意されている •SVGに対応している

Slide 7

Slide 7 text

Copyright (C) DeNA Co.,Ltd. All Rights Reserved. アニメーション設定：基本形 anime({ targets: ‘.class’, duration: 1000, left: ‘100px’, easing: ‘easeOutBack’ }) ཁૉ(ཁૉ໊, Ϋϥε໊, ID໊) Ξχϝʔγϣϯʹֻ͚Δ࣌ؒ Ξχϝʔγϣϯର৅ͷϓϩύςΟ Πʔδϯά

Slide 8

Slide 8 text

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] } }) ഑ྻͰෳ਺ͷཁૉΛࢦఆՄೳ ϓϩύςΟ୯ҐͰݸผʹઃఆ͕Մೳ ։࢝஋ɺऴྃ஋͕ઃఆՄೳ

Slide 9

Slide 9 text

Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 導⼊例1 : 連続アニメーション timeline()を⽤いて、add()で要 素別にアニメーションを指定。 delayで時差を付けた動きを表現 example: https://codepen.io/yutakam80/pen/RBGBOK

Slide 10

Slide 10 text

Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 導⼊例2 : SVGアニメーション + カウントアップ 円グラフをアニメーション update()でカウントアップ example: https://codepen.io/yutakam80/pen/zLZLyj

Slide 11

Slide 11 text

Copyright (C) DeNA Co.,Ltd. All Rights Reserved. anime.jsまとめ •軽量ライブラリながら機能は多め •多少複雑なアニメーションも実現可能 •細かな部分のアニメーションを実装したいプロジェクト向け
 (演出ゴリゴリしたいなら他のライブラリがおすすめ)