手淘互动动效探索

探索手淘互动动效#2017上海iWeb

Transcript

1. ख౫ޓ动动Ꮘ୳ࡧ 
   
   
   !େയ
   
   J8FC
2. ն଑ ׮߂۾ӬിđࣼᆯႿวЏ
4. ޓ动 动Ꮘ
5. ޓ动 “互动，是连接⽤用户的桥梁梁”
7. 引流 抽奖 ޓ动 橱窗 氛围
8. 视频 提醒 游戏 ޓ动
9. ޓ动
10. ޓ动
11. “动画，⽤用于点缀” 动ը
12. 动Ꮘ JS-Driven Animation Gif Flash 视频 CSS Animation SVG Canvas
13. త过ఔ
14. $44动ը௧఺ 沟通成本⾼高 开发成本⾼高 还原度低 ⽇日渐⽆无法满⾜足业务场景 可控制性低 可交互性弱
15. JS-Driven Animation
18. "OJNBUJPO
    'MPX
    5PPM
19. 动ը؅ཧ
21. $44处ཧ动ը衔઀త୹൘ ⽕火焰柱喷发 岩浆流动 红包喷发 ⽕火⼭山升起 Delay Delay Delay
22. ยஈʢ动ըʣ೭间༗ॏ䬓 x x + 0.4 ⽕火焰柱喷发 岩浆流动 红包喷发 ⽕火⼭山升起
23. 扩ల动ը
24. ޓ动ৗ⻅见త动ը㜎ܕ 精灵动画 路路径动画
25. ਫ਼䈻动ը CSS Animation AFT Sprites Plugin 80帧（80张图） 80帧（40张图）
26. $44࿏ܘ动ը
27. "'5࿏ܘ动ը …
28. "'5ࠎ髂动ը
29. "'5Ս构తԋ变 DOM JavaScrip JSON Animation IDE 第三⽅方JS库 AST DSL An/AE Develop aft.js Animation
30. 元素 尺⼨寸 绘图样式 矩阵变换 位置 动效器器 缓动函数 链式API 时⻓长 循环 序列列帧动画 路路径动画 简单动效 物理理动效 粒⼦子发⽣生器器 时间轴 时钟触发器器 暂停 恢复 取消 跳帧 引擎 交付渲染 N:N组合 ⼆二次开发/插件 管理理 触发 动画 事件 开始/结束 暂停/重播 BGUKT Ս构细节
31. 引擎 aft-engine hilo-adapter weex-adapter Three.js BGUKT Ս构细节 AFT 描述元素 描述动效 描述动画 管理理动画 动画怎么运⾏行行 动画怎么绘制 交付渲染
32. 业务䇖发໛ࣜ
33. િ经䇖发໛ࣜ 前端开发 AFT动画 Gif⽂文件 视频⽂文件 视觉设计 PSD⽂文件
34. 制作动画原型 DSL AE An 视觉设计 Animation AST AFT 前端开发 制作动画⼯工具 脚本 现త业务䇖发໛ࣜ
35. 现త业务䇖发໛ࣜ AE / 设计软件 描述动画数据 业务逻辑 Player.js 互动页面 无需介入
37. “可量量化和数据驱动”
39. 粗旷的做法 动画视频 代码还原
40. 温馨的做法 美⼥女女设计师 ⼿手把⼿手教你做动画 内⼼心OS：前端就 是这么不不靠谱
41. 正确的做法 动画数据 动画播放器器 动画编程语⾔言
42. 成为⼈人⽣生赢家 内⼼心OS：前端哥哥 好屌的，⼀一下⼦子就 满⾜足我的需求了了 内⼼心OS：有了了动画 制作神器器，还怕没 时间拍拖？
43. Data-Driven Animation
47. 动画⼯工程师？
48. GM Lab Presents ࢥߟ୳ࡧ
49. Q & A 欢迎喜欢动画的同学加⼊入我们 weihua.lwh@alibaba-inc.com
50. THANK YOU