浅谈 css 与 - huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf ·...
TRANSCRIPT
![Page 1: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/1.jpg)
![Page 2: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/2.jpg)
浅谈 CSS 与 web 界面动效开发模式
尤雨溪
@尤小右 @yyx990803 @尤雨溪
![Page 3: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/3.jpg)
之前:Google Creative Lab HTML5 交互原型开发
![Page 4: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/4.jpg)
现在:METEOR 工程师 Node.js 全栈开发
![Page 5: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/5.jpg)
·界面动效正变得越来越重要,尤其在移动端
· web app 提升用户体验和挑战原生应用的必经之路
在 Creative Labs 期间参与了很多对界⾯面动效有较⾼高要求的交互原型的开发,对这⼀一块积累了⼀一些经验。
![Page 6: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/6.jpg)
如何提升界面动效开发者的开发体验?
在这个短短的演讲⾥里,我没有办法给⼤大家⼀一个答案。同时我认为,在 web app 的这个领域我们还没有找到⼀一个完美的解决⽅方案。今天我只是和⼤大家探讨⼀一下⼀一些我们⾯面对的问题和已经存在的解决⽅方案,希望能够抛砖引⽟玉,激发⼤大家在这个领域的思考。
![Page 7: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/7.jpg)
API 设计:命令式 vs. 声明式
⾸首先我想探讨的就是我们作为开发者书写界⾯面动效的思维模式。
这⾥里有两⼤大类别:命令式和声明式。
![Page 8: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/8.jpg)
命令式
• jQuery.animate
• Velocity.js
• GSAP (GreenSocks)
![Page 9: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/9.jpg)
命令式
显式调用动画函数来触发效果
![Page 10: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/10.jpg)
声明式
• CSS Transition
• CSS Animation
• ngAnimate
• Vue.js transitions
![Page 11: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/11.jpg)
声明式
·声明式地定义各个“状态”下的 CSS 规则
·通过状态的变化 (切换 CSS class) 来触发动画效果
![Page 12: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/12.jpg)
· 为了示例代码的简洁,我们在下面的代码都省略前缀并假设已经包含了
* { transition: all .5s ease }
![Page 13: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/13.jpg)
·切换一个 class 可以触发嵌套的多个 transition
![Page 14: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/14.jpg)
基于 CSS 预处理器可以让声明式的样式更易维护 (下图为 LESS 代码示例)
![Page 15: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/15.jpg)
Angular / Vue.js: 通过数据绑定直接将 CSS class 与应用状态挂钩
HTML CSS
JS
![Page 16: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/16.jpg)
命令式 vs. 声明式
·命令式:
·动画状态和应用状态混杂在一起,逻辑复杂后不易维护,容易导致 bug
·声明式:
·将应用状态和动画状态分离,易于维护
![Page 17: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/17.jpg)
可以基于命令式的 API 构筑声明式的上层 API
![Page 18: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/18.jpg)
具体实现:JavaScript vs. CSS
![Page 19: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/19.jpg)
JavaScript Animations
·通过逐帧计算并设置 CSS property 来模拟动画
·可以进行更精确的控制:时间轴、缓动曲线、物理模拟、增量动画
·需要在 js 主线程进行大量计算
·通常伴随着命令式的 API
![Page 20: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/20.jpg)
CSS Transitions / Animations
·通过 CSS class / property 的变更来触发动画
·对 js 主线程的计算消耗小
·通常伴随着声明式的 API
·受限制于 cubic-bezier 曲线或是 keyframes 受限制于固定状态之间的切换,无法处理增量动画
![Page 21: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/21.jpg)
针对使用场景选择解决方案
可维护性 vs. 细节要求
现有的声明式解决方案已经可以在保证可维护性的基础上应对基本的动效需求
![Page 23: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/23.jpg)
HTML5 原型开发 - 声明式+命令式混合
Google iOS App
![Page 24: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/24.jpg)
理想的动效解决方案
![Page 25: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/25.jpg)
• 提供声明式的 API • 可以组构(composable):顺序、并发、时间轴 • ⽀支持状态切换,也⽀支持增量动画 • ⽀支持缓动曲线,也⽀支持物理模拟
![Page 26: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/26.jpg)
值得关注的一些新方案
![Page 27: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/27.jpg)
Famo.us·彻底绕过浏览器的 CSS 布局,全部依赖 CSS transform 自己实现一套布局系统,从而避免 reflow 的问题
·类似游戏的渲染机制
·强大的缓动和物理模拟系统
·混合了命令式和声明式的 APIModifier + Transitionable
![Page 28: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/28.jpg)
WebAnimations
·Google 在 web 动效标准化方面的尝试
·应用在 Polymer 之中
![Page 29: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/29.jpg)
WebAnimations· 通过 JavaScript 提供了可组构的、面向对象的底层抽象,便于构造声明式的上层 API
![Page 30: 浅谈 CSS 与 - Huodongjia.compic.huodongjia.com/ganhuodocs/2016-10-09/1475978875.74.pdf · JavaScript Animations ·通过逐帧计算并设置 CSS property 来模拟动画 ·可以进行更精确的控制:](https://reader033.vdocuments.pub/reader033/viewer/2022042605/5f47e431104e5a2ac13e786b/html5/thumbnails/30.jpg)
{ THANKS }