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
500
前端自动化工具探索
w3cplus
4
1k
Other Decks in Technology
See All in Technology
AIxIoTビジネス共創ラボ紹介_20250311.pdf
iotcomjpadmin
0
110
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
0
100
# Azure Cosmos DB パフォーマンス最適化入門 - 設計・開発・運用の実践テクニック
shibayan
0
160
開発者体験を定量的に把握する手法と活用事例
ham0215
0
170
AIは脅威でなくチャンス。 AIと共に進化するエンジニアの成長戦略 / geeksai-2025-spring
carta_engineering
0
140
データモデルYANGの処理系を再発明した話
tjmtrhs
0
550
エンジニアのキャリアパスと、 その中で自分が大切にしていること
noteinc
4
3.4k
EC-CUBEはサーバレスで動かせるのか?
yukishimada
1
110
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
550
生成AIがローコードツールになる時代の エンジニアの役割を考える
khwada
0
400
一歩ずつ成長しながら進める ZOZOの基幹システムリプレイス/Growing Stap by Stap ZOZO BackOffice System Replacement
cocet33000
2
400
TechBullエンジニアコミュニティの取り組みについて
rvirus0817
0
180
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
Designing Experiences People Love
moore
140
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Optimizing for Happiness
mojombo
377
70k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Done Done
chrislema
182
16k
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 欢迎喜欢动画的同学加⼊入我们
[email protected]
THANK YOU