veloticy-ui實現文字動畫效果-js教程-PHP中文網

首頁

web前端

js教程

veloticy-ui實現文字動畫效果

亚连

Jun 06, 2018 pm 05:43 PM

jquery文字動畫

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

前言

最近要實現一個類似文字波浪線的效果，使用了velocity-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,  // 动画执行时间
 easing: "swing", // 缓动效果
 queue: "",  // 队列
 begin: undefined, // 动画开始时的回调函数
 progress: undefined, // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
 complete: undefined, // 动画结束时的回调函数
 display: undefined, // 动画结束时设置元素的 css display 属性
 visibility: undefined, // 动画结束时设置元素的 css visibility 属性
 loop: false,  // 循环
 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)

// 将嵌套动画序列储存到一个数组里，很清晰的显示了它们的执行顺序
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：默认动画执行时间 单位为毫秒(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 可以讓集合物件依序錯開一段時間執行動畫

drag 可以讓集合物件的最後一個元素有緩衝效果

backwards 可以讓集合物件從最後一個元素往前依序錯開一段時間執行動畫

#下面就利用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>
 <h1 id="segmentfault">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(&#39;custom&#39;, {//注册一个叫&#39;custom&#39;自定义动画
 defaultDuration: 1500,
 calls:[
  [{
  rotateY: 360,
  translateY: &#39;-=15&#39;,
  }, 0.5],
  [{
  translateY: &#39;+=15&#39;,
  }, 0.5]
 ], 
 })
 $(&#39;#J_Text&#39;).css({
 fontSize: 40,
 color: &#39;#333&#39;,
 }) .html(function () {
  return $(this).text().split(&#39;&#39;).map(function (char) {
 return &#39;<span>&#39; + char + &#39;</span>&#39;; //让每字符被span元素包裹
 }).join(&#39;&#39;);
 }).find(&#39;span&#39;)
 .filter(function (index) {
 return index > 6
 }).css(&#39;color&#39;, &#39;#009A63&#39;).end() //让后面几个字符变为绿色
 .css({
 position: &#39;absolute&#39;,
 left: function (index) {
  return index * 20; //设置字符的间隔
 }
 })
 .velocity(&#39;custom&#39;, { //调用自定义的动画指令
 stagger: 300,
 delay: 1000, 
 })
 })
 </script>
</body>
</html>

除去一些字元的操作,可以看出實現一個看似複雜的動畫只需簡單設定calls 和stagger屬性的值就可以了,這個gif在循環播放那個動畫,實際上這個動畫只執行了一次，大家可以思考一下怎麼實現整個隊列的循環

#最後

velocity內部由於對動畫方面進行了優化，所以性能方面比jquery的animate要好，甚至比css的transition還要出色,當然這個我沒有測試過，大家可以測試一下。

上面是我整理給大家的，希望今後對大家有幫助。

詳細解讀vue-admin與後端(flask)分離結合

在jQuery中如何實作定時隱藏對話方塊

使用jquery css3如何實作熊貓tv導航

以上是veloticy-ui實現文字動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。