其他分享
首页 > 其他分享> > Velocity的使用方法

Velocity的使用方法

作者:互联网

什么是Velocity?

Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。

它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用

Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。

它比 $.animate() 更快更流畅,性能甚至高于 CSS3 animation, 是 jQuery 和 CSS3 transition 的最佳组合,它支持所有现代浏览器,最低可兼容到 IE8 和 Android 2.3。

 

Velocity的使用步骤

1.导入模块

1.1单独导入velocity.min.js模块

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

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

 

1.2导入jquery.min.js、velocity.min.js模块。(注意:使用 jQuery 时,必须在 Velocity 之前加载 jQuery:)

<body>
    <!-- dom -->
    <div class="element"></div>

    <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>
</body>

 

2.利用Velocity实现动画

Velocity接收一组 css 属性键值对 (css map) 作为它的第一个参数,该参数作为动画效果的最终属性。第二个参数是可选参数 为动画的额外配置项。下面为参数的写法:

$element.velocity({
    width: "500px",        // 动画属性 宽度到 "500px" 的动画
    property2: value2      // 属性示例
}, {
    /* Velocity 动画配置项的默认值 */
    duration: 400,         // 动画执行时间
    easing: "swing",       // 缓动效果
    queue: "",             // 队列(你可以通过设置多个queue:"" 强制并行执行多个新动画:)
    begin: undefined,      // 动画开始时的回调函数
    progress: undefined,   // 动画执行中的回调函数(该函数会随着动画执行被不断触发)
    complete: undefined,   // 动画结束时的回调函数
    display: undefined,    // 动画结束时设置元素的 css display 属性
    visibility: undefined, // 动画结束时设置元素的 css visibility 属性
    loop: false,           // 循环(注意点: 从初始位置到指定位置再到初始的位置算一次)
    delay: false,          // 延迟
    mobileHA: true         // 移动端硬件加速(默认开启)
});

 

Velocity常用事件

progress为动画执行过程中调用的函数, 有elementscomplete, remaining,start, tweenValue5个参数:

elements:当前执行动画的元素,可以用$(elements)来获取
complete:整个动画过程执行到百分之多少,该值是递增的,注意:该值为一个十进制数值 并不带单位 (%)
remaining:整个动画过程还剩下多少毫秒,该值是递减的
start:动画开始时的绝对时间 (Unix time)
tweenValue:动画执行过程中 两个动画属性之间的补间值

progress: function(elements, complete, remaining, start, tweenValue) {
        console.log((complete * 100) + "%");
        console.log(remaining + "ms remaining!");
        console.log("The current tween value is " + tweenValue)
    }

//简写progress
progress: function(elements, c, r, s, t) {
        console.log("The current tween value is " + t)
    }

标签:jQuery,动画,velocity,progress,使用,Velocity,方法,remaining
来源: https://www.cnblogs.com/sunchao0709/p/12194694.html