手淘互动动效探索

Transcript

1. ख౫ޓ动动Ꮘ୳ࡧ 
   
   
   !େയ
   
   J8FC

2. ն଑ ׮߂۾ӬിđࣼᆯႿวЏ

3. None

4. ޓ动 动Ꮘ

5. ޓ动 “互动，是连接⽤用户的桥梁梁”

6. None

7. 引流 抽奖 ޓ动 橱窗 氛围

8. 视频 提醒 游戏 ޓ动

9. ޓ动

10. ޓ动

11. “动画，⽤用于点缀” 动ը

12. 动Ꮘ JS-Driven Animation Gif Flash 视频 CSS Animation SVG Canvas

13. త过ఔ

14. $44动ը௧఺ 沟通成本⾼高 开发成本⾼高 还原度低 ⽇日渐⽆无法满⾜足业务场景 可控制性低 可交互性弱

15. JS-Driven Animation

16. None
17. None

18. "OJNBUJPO
    'MPX
    5PPM

19. 动ը؅ཧ

20. None

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 互动页面 无需介入

36. None

37. “可量量化和数据驱动”

38. None

39. 粗旷的做法 动画视频 代码还原

40. 温馨的做法 美⼥女女设计师 ⼿手把⼿手教你做动画 内⼼心OS：前端就 是这么不不靠谱

41. 正确的做法 动画数据 动画播放器器 动画编程语⾔言

42. 成为⼈人⽣生赢家 内⼼心OS：前端哥哥 好屌的，⼀一下⼦子就 满⾜足我的需求了了 内⼼心OS：有了了动画 制作神器器，还怕没 时间拍拖？

43. Data-Driven Animation

44. None
45. None
46. None

47. 动画⼯工程师？

48. GM Lab Presents ࢥߟ୳ࡧ

49. Q & A 欢迎喜欢动画的同学加⼊入我们 weihua.lwh@alibaba-inc.com

50. THANK YOU