使用 Velocity.js 实现动画

Question

JavaScript 动画库的种类

• WebGL 动画: Three.js
• Canvas 动画
• SVG 动画
• UI 动画库：GSAP、Velocity

velocity 基本知识

// 设置一个持续1000毫秒的动画(且隐式使用"swing"的默认缓动值)
$element.velocity({ top: 50 }, 1000);
// 设置一个持续1000毫秒且缓动类型为"ease-in-out"的动画
$element.velocity({ top: 50 }, 1000, "ease-in-out");
// 设置一个缓动类型为"ease-out"的动画(且隐式使用默认持续时间400毫秒)
$element.velocity({ top: 50 }, "ease-out");
// 设置一个持续1000毫秒且在动画执行完毕后触发回调函数的动画
$element.velocity({ top: 50 }, 1000, function() { alert("Complete.") });

运算符 + 、 - 、 * 和 /

$element.velocity({
top: "50px", // 无运算符,按预期设置top属性变动至50的动画。
left: "-50", // 负运算符,按预期设置left属性变动至-50的动画。
width: "+=5rem", // 将当前的width值转成以rem为单位的,然后再加5个单位。
height: "-10rem", // 将当前height值转成以rem为单位的,然后再减10个单位。
paddingLeft: "*=2" // 将当前的paddingLeft值乘以2。
paddingRight: "/=2" //将当前的paddingLeft值除以2。
});

链式操作

$element
.velocity({ width: "100px", height: "100px" })
.velocity({ top: "50px" });

选项

• duration："slow" (600ms)、 "normal" (400ms)、 "fast" (200ms)或具体数值
• easing：缓动类型摆脱了线性速度的死板
• begin、complete：begin 设置的函数在动画开始前触发，complete 设置的函数在动画完成时触发
• loop：循环次数
• delay：延迟毫秒数
• display、visibility：可见性

Velocity 其他功能

• reverse(反转)
• scrolling(滚动)
• color(颜色)
• transform(变换，包括 translation“平移”、rotate“旋转”和 scale“缩放”)