溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關使用veloticy-ui怎么實現一個文字動畫效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
基本使用
要使用 velocity-ui 需要先引入velocity,其中velocity可以是依賴jquery,也可以不依賴jquery，具體看一下下面就行了
//不依賴jquery，第一個參數為原生js的dom選擇器
Velocity(document.getElementById("dummy"), {
opacity: 0.5
}, {
duration: 1000
});
// 使用 jQuery 或 Zepto 時
$("#dummy").velocity({
opacity: 0.5
}, {
duration: 1000
});可以看出在使用jquery時,velocity的基本使用就像jquery的animate,引入 velocity-ui 的
目的就是提供一些已經定義好的動畫(指令),有一點像Animate.css這樣的動畫庫,但是可以提供
更細致的控制,
基本配置項
$element.velocity({
width: "500px", // 動畫屬性 寬度到 "500px" 的動畫
property2: value2 // 屬性示例
}, {
/* Velocity 動畫配置項的默認值 */
duration: 400, // 動畫執(zhí)行時間
easing: "swing", // 緩動效果
queue: "", // 隊列
begin: undefined, // 動畫開始時的回調函數
progress: undefined, // 動畫執(zhí)行中的回調函數（該函數會隨著動畫執(zhí)行被不斷觸發(fā)）
complete: undefined, // 動畫結束時的回調函數
display: undefined, // 動畫結束時設置元素的 css display 屬性
visibility: undefined, // 動畫結束時設置元素的 css visibility 屬性
loop: false, // 循環(huán)
delay: false, // 延遲
mobileHA: true // 移動端硬件加速（默認開啟）
});
width: ["500px", "300px"]//這樣設置后面的300px會作為初始默認值
width: ["500px", "spring"，"300px"]//這樣可以為單個屬性指定緩動函數
width: function (index, total) {}//對集合對象可以設置不同的屬性值可以看出velocity也可以設置quequ,使用和animate是一致的,而且velocity自身提供一些指令來實現動畫,有fadeIn/fadeOut, slideUp/slideDown,
scroll,finish,reverse,除此以外velocity實現了對transform, color這些屬性動畫的支持,并支持SVG和promise,具體使用可以看上面鏈接的文檔。
velocity-ui 除了提供更多的指令外,還提供了兩個方法 RunSequence 和 RegisterEffect(非jquery可以去掉$.,把jquery換為原生DOM)
// 將嵌套動畫序列儲存到一個數組里，很清晰的顯示了它們的執(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 } }
];
// 調用這個自定義的序列名稱 還可以在其他地方復用
$.Velocity.RunSequence(mySequence);
// name：動畫特效名稱 為字符串類型
// defaultDuration：默認動畫執(zhí)行時間 單位為毫秒(ms)
// calls：動畫隊列數組，property - 動畫屬性，durationPercentage - 當前動畫所占總時間的百分比 (寫成浮點數)，option - 選項
// reset：設置元素在動畫開始時的初始值
$.Velocity.RegisterEffect(name, {
defaultDuration: duration,
calls: [
[ { property: value }, durationPercentage, { options } ],
[ { property: value }, durationPercentage, { options } ]
],
reset: { property: value, property: value }
});除了以上兩個函數外,還提供了3個額外的options屬性
stagger 可以讓集合對象依次錯開一段時間執(zhí)行動畫
drag 可以讓集合對象的最后一個元素有緩沖效果
backwards 可以讓集合對象從最后一個元素往前依次錯開一段時間執(zhí)行動畫
下面就利用 RegisterEffect 和 stagger 實現一個簡單的文字動畫
實現一個自定義動畫
<!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> <h2 id="J_Text">segmentfault</h2> <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', {//注冊一個叫'custom'自定義動畫 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() //讓后面幾個字符變?yōu)榫G色 .css({ position: 'absolute', left: function (index) { return index * 20; //設置字符的間隔 } }) .velocity('custom', { //調用自定義的動畫指令 stagger: 300, delay: 1000, }) }) </script> </body> </html>
看完上述內容，你們對使用veloticy-ui怎么實現一個文字動畫效果有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業(yè)資訊頻道，感謝大家的支持。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
