JavaScript 动画的优势

Question

CSS 动画

• 适合悬停
• 在样式表中管理动画，难以维护
• 不能实时动画的定时控制
• 放弃基于物理的动效设计，缺乏真实感
• 不支持旧浏览器版本

JavaScript 动画

• js 动画和 css 动画一样快
• 不要将 js 和 JQuery 混为一谈
• jQuery 动画慢是因为不使用 requestAnimationFrame() 函数
• 易维护

velocity 功能

页面滚动

$element.velocity("scroll", 1000);

动画反转

用于撤消元素前一个动画的简便方法

// 第一个动画:设置元素的opacity属性变动至0的动画
$element.velocity({ opacity: 0 });
// 第二个动画:设置元素的opacity属性值变动回初始值1的动画
$element.velocity("reverse");

物理动效：缓动

// 使用500个张力单位和20个摩擦力单位的弹簧物理缓动,设置将元素的宽度变动至"500px"的动画
$element.velocity({ width: "500px" }, { easing: [ 500, 20 ] });