Velocity.js

特点

• 高性能：Velocity.js 提供比 jQuery 和 CSS 动画更快的性能。
• 易用的 API：与 jQuery 的 $.animate() 方法一致，简单易学。
• 回调函数：支持 begin、complete 和 progress 回调函数，增强动画控制。
• 多种缓动效果：内置缓动效果，包括贝塞尔曲线、自定义弹簧物理效果等。
• SVG 支持：全面支持 SVG 元素动画。
• 队列管理：默认支持动画队列，可以自定义动画顺序。
• UI Pack 插件：提供预定义的动画效果，如 callouts 和 transitions，简化复杂动画的实现。

使用场景

• 页面元素动画：适用于需要动态更新页面元素样式的场景，如滑动、淡入淡出等。
• 复杂动画序列：通过队列和回调函数，轻松实现复杂的动画序列。
• SVG 动画：适用于需要对 SVG 元素进行动画处理的场景。

安装方式

使用 npm 安装：

npm install velocity-animate

使用 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2/velocity.min.js"></script>

使用示例

// 简单的元素动画
Velocity(document.getElementById("element"), { opacity: 0.5, width: "50%" }, { duration: 1000 });

// 使用回调函数
Velocity(document.getElementById("element"), { opacity: 0.5 }, {
  duration: 1000,
  begin: function() { console.log("Animation started"); },
  complete: function() { console.log("Animation completed"); }
});

// UI Pack 插件效果
Velocity(document.getElementById("element"), "transition.bounceUpIn", { duration: 1000 });

常用 API 介绍

• Velocity()：主函数，用于执行动画。参数包括元素、属性映射、动画选项等。
• 回调函数：
  • begin：动画开始时调用。
  • complete：动画完成时调用。
  • progress：动画进行时调用。
• 缓动效果：
  • easing：设置动画缓动效果，如 "ease", "ease-in-out", "spring" 等。
• 动画选项：
  • duration：动画持续时间。
  • queue：设置是否使用动画队列，默认为 true。
  • stagger：为一组元素的动画设置交错延迟。
  • drag：逐步增加一组元素动画的持续时间，实现类似跨元素的缓动效果。
  • backwards：从最后一个元素开始动画，适用于元素的隐藏效果。

官方资料

• Velocity.js 官方文档
• GitHub 仓库
• UI Pack 插件

Velocity.js 提供了一种强大而灵活的方式来实现现代 Web 应用中的动画效果，适用于各种复杂的动画需求，并且在性能和易用性上都表现出色。