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