Animations

命令式

JavaScript Animations

显式调用动画函数

• jQuery.animate
• Velocity.js
• setInterval()

• 动画与应用写在一起，不易维护
• 可进行精细控制：物理模拟等
• 在js线程上需要大量计算

声明式

CSS3 Animations

通过切换Class控制状态

• CSS3 Animation
• CSS3 Transition

• 动画与应用分离，易维护
• 受限于cubic-bezier 曲线或 keyframes
• 计算消耗小
• 可满足基本动画效果
• GPU硬件加速！

基于帧的动画算法(Frame-based)

http://jsbin.com/remako/edit?js,console,output

• 使用浏览器的定时器(setInterval/setTimeout)
• 以一定时间间隔执行动画函数
• 时间间隔决定FPS，当时间间隔为(1000/60)毫秒时，FPS为60
• JS定时器存在精度问题
• 性能问题，帧间隔不可控

常见需求：方块下移400像素，时长1秒

基于时间的动画算法(Time-based)

• “弃帧保时”
• 依然可以使用setInterval()/setTimeout()
• 根据动画已进行时间计算进度，由进度决定动画状态
• 终态处理
• 保证时间准确

http://jsbin.com/lisixe/edit?js,console,output

requestAnimationFrame

http://jsbin.com/dakehe/edit?html,js,console,output

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。

流动进度条的实现

利用绝对定位与background-position

柱体增高

打字效果：steps

.css3 .sec1 .typing-4 {
        visibility: visible;
        animation: typing-4 0.5s steps(4,end);
        -webkit-animation: typing-4 0.5s steps(4,end);
    }
    @keyframes typing-4 {
        from {width:0;}
    }
    @-webkit-keyframes typing-4 {
        from {width:0;}
}

http://designmodo.com/demo/stepscss/index.html      

坑

设计稿按全屏做 1366*768、1920*1080

任务栏、菜单栏等占据一定高度

浏览器视口高度为屏幕高度减少100~200像素

提前沟通，防止内容区溢出