快捷導(dǎo)航

使用veloticy-ui生成文字動(dòng)畫效果

更新時(shí)間：2018年02月08日 11:13:00 作者：changli

這篇文章主要介紹了使用veloticy-ui生成文字動(dòng)畫效果及基本使用方法,需要的朋友可以參考下

前言

最近要實(shí)現(xiàn)一個(gè)類似文字波浪線的效果，使用了velocity-ui這個(gè)動(dòng)畫庫,第一個(gè)感覺就是使用簡單，代碼量少,性能優(yōu)異,在此簡單介紹一下使用方法，并實(shí)現(xiàn)一個(gè)看上去不錯(cuò)的動(dòng)畫.

具體使用方法可以點(diǎn)擊這里

基本使用

要使用 velocity-ui 需要先引入velocity,其中velocity可以是依賴jquery,也可以不依賴jquery，具體看一下下面就行了

//不依賴jquery，第一個(gè)參數(shù)為原生js的dom選擇器
Velocity(document.getElementById("dummy"), {
 opacity: 0.5
}, {
 duration: 1000
});
// 使用 jQuery 或 Zepto 時(shí)
$("#dummy").velocity({
 opacity: 0.5
}, {
 duration: 1000
});

可以看出在使用jquery時(shí),velocity的基本使用就像jquery的animate,引入 velocity-ui 的

目的就是提供一些已經(jīng)定義好的動(dòng)畫(指令),有一點(diǎn)像Animate.css這樣的動(dòng)畫庫,但是可以提供

更細(xì)致的控制,

基本配置項(xiàng)

$element.velocity({
 width: "500px", // 動(dòng)畫屬性 寬度到 "500px" 的動(dòng)畫
 property2: value2 // 屬性示例
}, {
 /* Velocity 動(dòng)畫配置項(xiàng)的默認(rèn)值 */
 duration: 400,  // 動(dòng)畫執(zhí)行時(shí)間
 easing: "swing", // 緩動(dòng)效果
 queue: "",  // 隊(duì)列
 begin: undefined, // 動(dòng)畫開始時(shí)的回調(diào)函數(shù)
 progress: undefined, // 動(dòng)畫執(zhí)行中的回調(diào)函數(shù)（該函數(shù)會(huì)隨著動(dòng)畫執(zhí)行被不斷觸發(fā)）
 complete: undefined, // 動(dòng)畫結(jié)束時(shí)的回調(diào)函數(shù)
 display: undefined, // 動(dòng)畫結(jié)束時(shí)設(shè)置元素的 css display 屬性
 visibility: undefined, // 動(dòng)畫結(jié)束時(shí)設(shè)置元素的 css visibility 屬性
 loop: false,  // 循環(huán)
 delay: false,  // 延遲
 mobileHA: true  // 移動(dòng)端硬件加速（默認(rèn)開啟）
});
width: ["500px", "300px"]//這樣設(shè)置后面的300px會(huì)作為初始默認(rèn)值
width: ["500px", "spring"，"300px"]//這樣可以為單個(gè)屬性指定緩動(dòng)函數(shù)
width: function (index, total) {}//對集合對象可以設(shè)置不同的屬性值

可以看出velocity也可以設(shè)置quequ,使用和animate是一致的,而且velocity自身提供一些指令來實(shí)現(xiàn)動(dòng)畫,有fadeIn/fadeOut, slideUp/slideDown,

scroll,finish,reverse,除此以外velocity實(shí)現(xiàn)了對transform, color這些屬性動(dòng)畫的支持,并支持SVG和promise,具體使用可以看上面鏈接的文檔。

velocity-ui 除了提供更多的指令外,還提供了兩個(gè)方法 RunSequence 和 RegisterEffect(非jquery可以去掉$.,把jquery換為原生DOM)

// 將嵌套動(dòng)畫序列儲(chǔ)存到一個(gè)數(shù)組里，很清晰的顯示了它們的執(zhí)行順序
var mySequence = [
 { e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
 { e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
 { e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];
// 調(diào)用這個(gè)自定義的序列名稱 還可以在其他地方復(fù)用
$.Velocity.RunSequence(mySequence);
// name：動(dòng)畫特效名稱 為字符串類型
// defaultDuration：默認(rèn)動(dòng)畫執(zhí)行時(shí)間 單位為毫秒(ms)
// calls：動(dòng)畫隊(duì)列數(shù)組，property - 動(dòng)畫屬性，durationPercentage - 當(dāng)前動(dòng)畫所占總時(shí)間的百分比 (寫成浮點(diǎn)數(shù))，option - 選項(xiàng)
// reset：設(shè)置元素在動(dòng)畫開始時(shí)的初始值
$.Velocity.RegisterEffect(name, {
 defaultDuration: duration,
 calls: [
 [ { property: value }, durationPercentage, { options } ],
 [ { property: value }, durationPercentage, { options } ]
 ],
 reset: { property: value, property: value }
});

除了以上兩個(gè)函數(shù)外,還提供了3個(gè)額外的options屬性

stagger 可以讓集合對象依次錯(cuò)開一段時(shí)間執(zhí)行動(dòng)畫

drag 可以讓集合對象的最后一個(gè)元素有緩沖效果

backwards 可以讓集合對象從最后一個(gè)元素往前依次錯(cuò)開一段時(shí)間執(zhí)行動(dòng)畫

下面就利用 RegisterEffect 和 stagger 實(shí)現(xiàn)一個(gè)簡單的文字動(dòng)畫

實(shí)現(xiàn)一個(gè)自定義動(dòng)畫

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <meta name="renderer" content="webkit">
 <title>Document</title>
</head>
<body>
 <h1 id="J_Text">segmentfault</h1>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.min.js"></script>
 <script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.ui.min.js"></script>
 <script>
 jQuery(function ($) {
 $.Velocity.RegisterEffect('custom', {//注冊一個(gè)叫'custom'自定義動(dòng)畫
 defaultDuration: 1500,
 calls:[
  [{
  rotateY: 360,
  translateY: '-=15',
  }, 0.5],
  [{
  translateY: '+=15',
  }, 0.5]
 ], 
 })
 $('#J_Text').css({
 fontSize: 40,
 color: '#333',
 }) .html(function () {
  return $(this).text().split('').map(function (char) {
 return '<span>' + char + '</span>'; //讓每字符被span元素包裹
 }).join('');
 }).find('span')
 .filter(function (index) {
 return index > 6
 }).css('color', '#009A63').end() //讓后面幾個(gè)字符變?yōu)榫G色
 .css({
 position: 'absolute',
 left: function (index) {
  return index * 20; //設(shè)置字符的間隔
 }
 })
 .velocity('custom', { //調(diào)用自定義的動(dòng)畫指令
 stagger: 300,
 delay: 1000, 
 })
 })
 </script>
</body>
</html>

除去一些字符的操作,可以看出實(shí)現(xiàn)一個(gè)看似復(fù)雜的動(dòng)畫只需簡單設(shè)置calls 和stagger屬性的值就可以了,這個(gè)gif在循環(huán)播放那個(gè)動(dòng)畫,實(shí)際上這個(gè)動(dòng)畫只執(zhí)行了一次，大家可以思考一下怎么實(shí)現(xiàn)整個(gè)隊(duì)列的循環(huán)

最后

velocity內(nèi)部由于對動(dòng)畫方面進(jìn)行了優(yōu)化，所以性能方面比jquery的animate要好，甚至比css的transition還要出色,當(dāng)然這個(gè)我沒有測試過，大家可以測試一下。

總結(jié)

以上所述是小編給大家介紹的使用veloticy-ui生成文字動(dòng)畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: