velocity语法 一个高性能js动画库velocity.js简介

1.为什么velocity不是jquery

现在如何快速制作js动画，很多人可能会想到先用jquery。Jquery的这么受欢迎。jquery产生的各种效果在网上也很丰富。jquery的优势不言而喻，易于使用，开发效率高。但是要知道jquery动画性能并不是最优的。因为jquery想要达到的目标太多，不可避免的要牺牲动画的性能。因此，要制作高性能的js动画，我们可能不得不放弃jquery，改用原生js。有没有js高性能动画库，和jquery一样简单易用，有动画，高性能？这是velocity.js动画库。

第二，速度的优势

1.Velocity是一个轻量级JS动画库，使用简单，性能高，功能丰富。它可以完美地与jQuery一起工作，并且具有与$相同的API。animate，但它不依赖于jQuery，可以独立使用。Velocity不仅包括$的所有功能。animate，但也有一些特殊的功能，如彩色动画，变换，循环，慢动作，SVG动画，滚动动画。2.还有几十个类似animate.css 3的预定义动画api3。支持自定义动画，组装队列动画等。4.动画回调，如开始&:完成& amp进度回调函数

第三，速度的运用

1.速度介绍

可以使用标签介绍

& ltsrc= "../lib/velocity.min.js " >;& lt/>。

也可以通过npm安装

npm安装速度-动画

2.速度语法

Velocity使用与jquery相同的语法。换句话说，如果您熟悉jquery的animate函数，您只需要将animate语法应用于velocity。

Jquery:

$。animate；

速度:

$。velocity；

速度参数的使用

$element.velocity({

宽度:“500px”，//动画属性宽度最大为“500px”的动画

属性2的示例:value2 //属性

}, {

/*速度动画ci的默认值*/

时长:400，//动画执行时间

放松:“摇摆”/>