渐进式动画解决方案

2020-02-27 172浏览

  • 1.渐进式动画解决⽅方案 渚薰／淘宝-虚拟互动实验室 GM Lab Presents
  • 2.渚薰 12年年加⼊入⼿手机淘宝 三年年基础架构⼯工作 三次H5⾸首⻚页改版 15年年加⼊入Weex ⼀一年年Framework开发⼯工作 16年年进军动画3D领域 GM Lab Presents
  • 3.996乐队 爆裂⿎鼓⼿手 GM Lab Presents
  • 4.P w A GM Lab Presents
  • 5.P rogressive w eb A nimations GM Lab Presents
  • 6.GM Lab Presents
  • 7.• 重新认识动画 • 如何操作动画 • 如何管理理动画 • 如何制作动画 • 重新思考动画 GM Lab Presents
  • 8.“动效和插值” -重新认识动画 GM Lab Presents
  • 9.动效是什什么？ A 持续 延迟 缓动 次数 ⽅方向 填充 Motion Effect GM Lab Presents B
  • 10.动效作⽤用对象？ 0 .1 .2 .3 .4 .5 .6 .7 .8 .9 1 插值的过程 起始值 GM Lab Presents Interpolation 结束值
  • 11.颜⾊色的插值 #ff5000 转换 H 19 S 100% L 50% GM Lab Presents #000000 转换 0 H 0% S 0% L
  • 12.颜⾊色的插值 #ff5000 转换 H 19 S 100% L 50% GM Lab Presents #000000 转换 0 H 0% S 0% L
  • 13.⼏几何图形的插值 GM Lab Presents
  • 14.“脚本驱动” –如何操作动画 GM Lab Presents
  • 15.CSS Animation SVG Animation JS-Driven Animation GM Lab Presents
  • 16.JS-Driven Animation GM Lab Presents
  • 17.GM Lab Presents
  • 18.GM Lab Presents
  • 19.GM Lab Presents
  • 20.GM Lab Presents
  • 21.GM Lab Presents
  • 22.GM Lab Presents
  • 23.GM Lab Presents
  • 24.GM Lab Presents
  • 25.GM Lab Presents
  • 26.GM Lab Presents
  • 27.GM Lab Presents
  • 28.GM Lab Presents
  • 29.“动画流” –如何管理理动画 GM Lab Presents
  • 30.动效1 动效2 动效3 时间轴 GM Lab Presents
  • 31.时间轴 add(e, {playAt:number }) => assign(e, {playAt}); tick(elapsed) => { if (e.playAt >= elapsed) e.start(); } GM Lab Presents
  • 32.时间轴 add(e, {playAt:() => boolean }) => assign(e, {playAt}); tick(elapsed) => { if (e.playAt()) e.start(); } GM Lab Presents
  • 33.时间轴 add(e, {playAt:() => number }) => assign(e, {playAt}); tick(elapsed) => { if (e.playAt() >= elapsed) e.start(); } GM Lab Presents
  • 34.时间轴 () => e1.finished; () => assets_fetched; () => store.getState() === ‘BTN_CLICKED’; () => e2.started && (e2.startAt + 500); GM Lab Presents
  • 35.流 插值 0 1 时间 1s 5s 按钮 hold clicked 动效 started finished …… 控制/决定/管理理 Motion Effect’s playAt or stopAt GM Lab Presents
  • 36.“可量量化和数据驱动” –如何制作动画 GM Lab Presents
  • 37.GM Lab Presents
  • 38.粗旷的做法 动画视频 GM Lab Presents 代码还原
  • 39.温馨的做法 美⼥女女设计师 ⼿手把⼿手教你做动画 GM Lab Presents 内⼼心OS：前端就 是这么不不靠谱
  • 40.正确的做法 动画数据 动画编程语⾔言 GM Lab Presents 动画播放器器
  • 41.成为⼈人⽣生赢家 内⼼心OS：前端哥哥 好屌的，⼀一下⼦子就 满⾜足我的需求了了 GM Lab Presents 内⼼心OS：有了了动画 制作神器器，还怕没 时间拍拖？
  • 42.Data-Driven Animation GM Lab Presents
  • 43.GM Lab Presents
  • 44.GM Lab Presents
  • 45.GM Lab Presents
  • 46.Animation Flow Toolkit GM Lab Presents
  • 47.“动画⼯工程师” –重新思考动画 GM Lab Presents
  • 48.设计师 GM Lab Presents 前端⼯工程师
  • 49.设计师 动画⼯工程师 设计师 前端⼯工程师 分镜漫画 制作动画 材质渲染 代码还原 GM Lab Presents
  • 50.GM Lab Presents