Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
手淘互动动效探索
Search
w3cplus
June 22, 2017
Technology
0
190
手淘互动动效探索
探索手淘互动动效#2017上海iWeb
w3cplus
June 22, 2017
Tweet
Share
More Decks by w3cplus
See All by w3cplus
CSS Future
w3cplus
2
590
Web Animation
w3cplus
5
460
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.7k
Sass带来的变革
w3cplus
2
540
Responsive小试牛刀
w3cplus
3
530
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
360
http协议与缓存简述
w3cplus
5
510
前端自动化工具探索
w3cplus
4
1k
Other Decks in Technology
See All in Technology
これからクラウドエンジニアになるために本当に必要なスキル 5選
hiyanger
1
440
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
120
パスキーでのログインを 実装してみよう!
hibiki_cube
0
560
チームの性質によって変わる ADR との向き合い方と、生成 AI 時代のこれから / How to deal with ADR depends on the characteristics of the team
mh4gf
4
280
Reactを段階的に覗いてみる
ytaisei
2
840
SpannerとAurora DSQLの同時実行制御の違いに想いを馳せる
masakikato5
0
470
グループポリシー再確認
murachiakira
0
140
Oracle Cloud Infrastructure:2025年3月度サービス・アップデート
oracle4engineer
PRO
0
300
製造業の会計システムをDDDで開発した話
caddi_eng
3
800
「エンジニアマネージャー」の役割を担っている / 担ってみたい方へのキャリアパスガイド
coconala_engineer
1
220
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
150
fukuoka.ts #3 社内でESLintの共通設定を配りたい2025年春版
pirosikick
1
280
Featured
See All Featured
A Tale of Four Properties
chriscoyier
158
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How GitHub (no longer) Works
holman
314
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
What's in a price? How to price your products and services
michaelherold
244
12k
Fireside Chat
paigeccino
37
3.3k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Cult of Friendly URLs
andyhume
78
6.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Transcript
ख౫ޓ动动Ꮘ୳ࡧ !େയJ8FC
ն ߂۾ӬിđࣼᆯႿวЏ
None
ޓ动 动Ꮘ
ޓ动 “互动,是连接⽤用户的桥梁梁”
None
引流 抽奖 ޓ动 橱窗 氛围
视频 提醒 游戏 ޓ动
ޓ动
ޓ动
“动画,⽤用于点缀” 动ը
动Ꮘ JS-Driven Animation Gif Flash 视频 CSS Animation SVG Canvas
త过ఔ
$44动ը௧ 沟通成本⾼高 开发成本⾼高 还原度低 ⽇日渐⽆无法满⾜足业务场景 可控制性低 可交互性弱
JS-Driven Animation
None
None
"OJNBUJPO'MPX5PPM
动ըཧ
None
$44处ཧ动ը衔త൘ ⽕火焰柱喷发 岩浆流动 红包喷发 ⽕火⼭山升起 Delay Delay Delay
ยஈʢ动ըʣ೭间༗ॏ䬓 x x + 0.4 ⽕火焰柱喷发 岩浆流动 红包喷发 ⽕火⼭山升起
扩ల动ը
ޓ动ৗ⻅见త动ը㜎ܕ 精灵动画 路路径动画
ਫ਼䈻动ը CSS Animation AFT Sprites Plugin 80帧(80张图) 80帧(40张图)
$44࿏ܘ动ը
"'5࿏ܘ动ը …
"'5ࠎ髂动ը
"'5Ս构తԋ变 DOM JavaScrip JSON Animation IDE 第三⽅方JS库 AST DSL An/AE
Develop aft.js Animation
元素 尺⼨寸 绘图样式 矩阵变换 位置 动效器器 缓动函数 链式API 时⻓长 循环
序列列帧动画 路路径动画 简单动效 物理理动效 粒⼦子发⽣生器器 时间轴 时钟触发器器 暂停 恢复 取消 跳帧 引擎 交付渲染 N:N组合 ⼆二次开发/插件 管理理 触发 动画 事件 开始/结束 暂停/重播 BGUKT Ս构细节
引擎 aft-engine hilo-adapter weex-adapter Three.js BGUKT Ս构细节 AFT 描述元素 描述动效
描述动画 管理理动画 动画怎么运⾏行行 动画怎么绘制 交付渲染
业务䇖发ࣜ
િ经䇖发ࣜ 前端开发 AFT动画 Gif⽂文件 视频⽂文件 视觉设计 PSD⽂文件
制作动画原型 DSL AE An 视觉设计 Animation AST AFT 前端开发 制作动画⼯工具
脚本 现త业务䇖发ࣜ
现త业务䇖发ࣜ AE / 设计软件 描述动画数据 业务逻辑 Player.js 互动页面 无需介入
None
“可量量化和数据驱动”
None
粗旷的做法 动画视频 代码还原
温馨的做法 美⼥女女设计师 ⼿手把⼿手教你做动画 内⼼心OS:前端就 是这么不不靠谱
正确的做法 动画数据 动画播放器器 动画编程语⾔言
成为⼈人⽣生赢家 内⼼心OS:前端哥哥 好屌的,⼀一下⼦子就 满⾜足我的需求了了 内⼼心OS:有了了动画 制作神器器,还怕没 时间拍拖?
Data-Driven Animation
None
None
None
动画⼯工程师?
GM Lab Presents ࢥߟ୳ࡧ
Q & A 欢迎喜欢动画的同学加⼊入我们 weihua.lwh@alibaba-inc.com
THANK YOU