velocityJs-动画库

程序员文章站 2024-03-25 13:17:16

...

一、概念

velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能，还拥有：颜色动画、转换动画(transforms)、循环、缓动、SVG 动画、和滚动动画等特色功能。
用法：引入js文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
    //注：如果需要大部分动画效果能兼容 IE8，就必须引入 jQuery 1×，如果不需要，则不需要引入jQuery

额外属性：

$element.velocity({
    width: "500px",        // 动画属性 宽度到 "500px" 的动画
    property2: value2      // 属性示例
}, {
    /* Velocity 动画配置项的默认值 */
    duration: 400,         // 动画执行时间
    easing: "swing",       // 缓动效果
    queue: "",             // 队列
    begin: undefined,      // 动画开始时的回调函数
    progress: undefined,   // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
    complete: undefined,   // 动画结束时的回调函数
    display: undefined,    // 动画结束时设置元素的 css display 属性
    visibility: undefined, // 动画结束时设置元素的 css visibility 属性
    loop: false,           // 循环
    delay: false,          // 延迟
    mobileHA: true         // 移动端硬件加速（默认开启）
});

basics用法（基础用法）

<div class="element"></div>
$(".element").velocity({
    left: "200px"
}, {
    duration: 450,
    delay: 1000
});

// $.animate() 的写法，效果同上
$(".element").delay(1000).velocity({left: "200px"}, 450);

// 无 jQuery 或 Zepto 时，Velocity()方法挂载在 window 对象上 (window.velocity)
// ( 第一个参数为原生js的dom选择器 )
Velocity(document.getElementById("dummy"), {
    opacity: 0.5
}, {
    duration: 1000
});

// 使用 jQuery时
$("#dummy").velocity({
    opacity: 0.5
}, {
    duration: 1000
});

单一对象

$element.velocity({
    properties: { opacity: 1 },
    options: { duration: 500 }
});

// 或者：
$element.velocity({
    p: { opacity: 1 }, // 可以将 properties 简写成 p
    o: { duration: 500 }
});


//逗号分割的参数写法（类似 $.animate）
$element.velocity({ top: 50 }, 1000);
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, "swing");
$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });


//Properties Map 动画属性
//如果不写属性值的单位, Velocity 会将像素(px)作为默认单位
// 等同 padding: 1px
$element.velocity({ padding: 1 });

// 等同 padding-left: 1px, padding-right: 1px
$element.velocity({
    paddingLeft: 1,
    paddingRight: 1
});

// 但你不能这样写！因为这样相当于为 padding 赋了多个值
$element.velocity({ padding: "1 1 1 1" }); // error

//Velocity 在 1.2.0+ 版本里增加了对 "px, em, rem, %, deg, vw/vh" 这些单位的支持， 如果不填写属性单位 默认单位还是"px"，但 "deg" 用于 rotateZ 属性时可以省略不写。 Velocity 还支持动态计算属性值，包括 "+, -, *, /"，还可以设置元素在动画执行前的初始值
$element.velocity({
    top: 50,                // 等同于 "50px"
    left: "50%",
    width: "+=5rem",        // 每次在当前值上叠加 5rem
    height: "*=2"           // 每次在当前值上叠乘 2
    color: ["#888", "#000"] // 每次动画执行前，color 的初始值都为"#000"（从"#000"过渡成"#888"）
});

//Chaining 链式动画
//当一个元素连续应用多个velocity()时，动画将以队列的方式执行
$element
    /* 先执行宽度变为75px的动画 */
    .velocity({ width: 75 })
    /* 等前面的宽度动画结束后，再执行高度变为0的动画 */
    .velocity({ height: 0 });

Option 配置项

Duration 动画执行时间

//动画执行时间以毫秒为单位，并支持 jQuery 中的动画速度关键字: "slow","normal","fast"
$element.velocity({ opacity: 1 }, { duration: 1000 });

// 支持 jQuery 中的动画速度关键字：
$element.velocity({ opacity: 1 }, { duration: "slow" });

Easing 缓动效果

//1、jQuery UI 的缓动关键字
/* 标准写法 */
$element.velocity({ width: 50 }, { easing: "easeInSine" });

/* 或 */
$element.velocity({ width: 50 }, "easeInSine");


//2、CSS3 的缓动关键字
$element.velocity({ width: 50 }, "ease-in");

//3、CSS3 贝塞尔曲线
$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);

//4、弹簧物理缓动
$element.velocity({ width: 50 }, [ 250, 15 ]);

//5、步骤缓动
$element.velocity({ width: 50 }, [ 8 ]);

//自定义缓动函数
// p：动画完成的百分比（十进制值）
// opts：传递到触发 .velocity() 调用的选项
// tweenDelta：补间
// (官网并没有详细说明如何使用，感兴趣的可以自己去查阅相关资料学习)
$.Velocity.Easings.myCustomEasing = function (p, opts, tweenDelta) {
    return 0.5 - Math.cos( p * Math.PI ) / 2;
};

//缓动可应用于单个属性
$element.velocity({
    borderBottomWidth: [ "2px", "spring" ], // border-bottom 使用 "spring"
    width: [ "100px", [ 250, 15 ] ],        // width 使用 spring physics
    height: "100px"
}, {
    easing: "easeInSine" // 默认所有属性使用 "easeInSine"
});

Queue 动画队列

//通过设置queue: false 强制并行执行一个新动画
// 执行宽度变为"50px"的动画
$element.velocity({ width: "120px" }, { duration: 3000 });

setTimeout(function() {
    /* 1.5秒后 开始并行执行高度变为"50px"的新动画 */
    $element.velocity({ height: "120px" }, { duration: 1500, queue: false });
}, 1500);


//可以自定义动画队列，但不会立即执行，需要通过dequeue()方法手动执行动画
//loop循环选项 和reverse反向动画指令，不能和队列一起使用
// 自定义队列，这里并不会立即执行
$("div")
  .velocity({ translateX: 75 }, { queue: "a" })
  .velocity({ width: 50 }, { queue: "b" })
  .velocity({ translateY: 75 }, { queue: "a" })
  .velocity({ height: 0 }, { queue: "b" })

// 2秒后 执行队列"a"的动画
setTimeout(function() {
  $("div").dequeue("a");
}, 2000);

// 4秒后 执行队列"b"的动画
setTimeout(function() {
  $("div").dequeue("b");
}, 4000);

Begin & Complete & Progress 回调函数

//1、Begin
//动画开始前的回调函数，但在循环模式下（设置了loop选项时），该函数只会在第一次循环前执行一次
$element.velocity({
    opacity: 0
}, {
    begin: function(elements) { console.log(elements); }
});

//2、Complete
//为动画结束时的回调函数，在无限循环模式下（设置loop: true） 该回调函数将不会执行，但是有规定次数的循环模式下（比如设置设置loop: 3） 该回调函数 将只会在最后一次循环结束后 执行一次
$element.velocity({
    opacity: 0
}, {
    complete: function(elements) { console.log(elements); }
});
$element.velocity({
    opacity: 0
}, {
    // 动画循环执行3次
    loop: 3,
    // 回调函数将在第3次循环结束后 执行一次
    complete: function(elements) {
        alert("I am hungry！");
    }
});

//3、Progress
//为动画执行过程中调用的函数， 有elementscomplete, remaining,start, tweenValue5个参数
//elements：当前执行动画的元素，可以用$(elements)来获取
//complete：整个动画过程执行到百分之多少，该值是递增的，注意：该值为一个十进制数值 并不带单位 (%)
//remaining：整个动画过程还剩下多少毫秒，该值是递减的
//start：动画开始时的绝对时间
//tweenValue：动画执行过程中 两个动画属性之间的补间值
$element.velocity({
    opacity: 0,
    tween: 1000 // 可选的
}, {
    duration: 2000,
    progress: function(elements, complete, remaining, start, tweenValue) {
        console.log((complete * 100) + "%");
        console.log(remaining + "ms remaining!");
        console.log("The current tween value is " + tweenValue)
    }
});

// 可以简写这些参数：
$element.velocity({
    tween: [ 0, 1000 ]
}, {
    easing: "spring",
    progress: function(elements, c, r, s, t) {
        console.log("The current tween value is " + t)
    }
});

mobileHA 移动端硬件加速

//可以设置是否开始移动端硬件加速， 默认值为true，也可以通过设置 mobileHA: false关闭硬件加速
// 关闭移动端硬件加速
$element.velocity(propertiesMap, { mobileHA: false });

Loop 动画循环执行

//1、设置loop为一个正整数，比如如设置loop: 2，就可以让动画循环执行2次
// 循环执行2次（注意：元素height值变化到10em 再从10em变化到初始值 是一次循环）
$element.velocity({ height: "10em" }, { loop: 2 });

//2、设置loop: true，可以让动画无限循环执行
$element.velocity({ height: "10em" }, { loop: true });

Delay 动画延迟执行

//动画将会延迟所设定的毫秒后执行
// 动画将延迟1500毫秒后执行
$element.velocity({ height: "+=10em" }, { delay: 1500 });

Display & Visibility

//以在动画执行结束后 动态设置元素的 css 属性:display或visibility
//display 或 visibility 的值可以设为 css 中规定的其他值，比如 display: "inline-block"
//当使用reverse方向动画指令时，display 和 visibility 选项都将被忽略
/* 动画结束后 元素 display 属性设为 "none" */
$element.velocity({ opacity: 0 }, { display: "none" });

/* 动画结束后 元素的 visibility 属性设为 hidden */
$element.velocity({ opacity: 0 }, { visibility: "hidden" });

该插件还有Command 指令、Feature 特色、Advanced 高级用法、Plugins 插件等内容，有需要的童鞋可以戳一下链接去看，小编在此就不列举了。

官网地址：http://shouce.jb51.net/velocity/index.html

相关标签：常用插件 js 插件动画库

上一篇：快速排序算法原理和Java实现。详细版

velocityJs-动画库

一、概念

velocityJs-动画库

css animation动画

高级之路篇十：高性能动画

Animate.css库使用

vue2.0使用animate.css动画，transition&transition-group

vue动画笔记

帧动画（关键帧@keyframes）

vue添加animate.css动画

WPF 动画笔记

vue 和animate.css动画使用