怎樣使用veloticy-ui產生文字動畫-js教程-PHP中文網

首頁

web前端

js教程

怎樣使用veloticy-ui產生文字動畫

php中世界最好的语言

Mar 14, 2018 pm 05:38 PM

信產生

這次帶給大家怎麼使用veloticy-ui產生文字動畫，使用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="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', {//注册一个叫'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() //让后面几个字符变为绿色
 .css({
 position: 'absolute',
 left: function (index) {
  return index * 20; //设置字符的间隔
 }
 })
 .velocity('custom', { //调用自定义的动画指令
 stagger: 300,
 delay: 1000, 
 })
 })
 </script>
</body>
</html>

登入後複製

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

#最後

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1422

Laravel 教程

1316

PHP教程

1267

C# 教程

1239

Related knowledge

ppt怎麼做圓形的圖片和文字 Mar 26, 2024 am 10:23 AM

首先，在 PPT 中繪製一個圓圈，然後插入一個文字框，輸入文字內容。最後，設定文字方塊的填滿和輪廓為無，即可完成圓形圖片和文字的製作。

word中怎麼給文字加點？ Mar 19, 2024 pm 08:04 PM

我們在日常製作Word文件時,有時需要給文檔中的某些文字下方加點,尤其是出試題的時候。來用於重點突出這部分內容,小編給大家分享下word中怎麼給文字加點的技巧，希望能幫助到您。 1.開啟一個空白word文檔。　　2.舉例例如給「如何為文字加點」幾個字的下面加上點。　　3.我們先把「如何給文字加點」幾個字用滑鼠左鍵選擇了，注意以後你想給那個字加點就先用滑鼠的左鍵選擇哪個字。今天我們給這幾個字都加一點，所以幾個字都選了。選中這幾個字後右鍵，在彈出的功能框中點擊字體。　　4.然後就會出現一個這樣的

如何使用Python產生兩個日期之間的k個隨機日期？ Sep 09, 2023 pm 08:17 PM

產生隨機數據在數據科學領域非常重要。從建構神經網路預測、股市數據等來看，通常都會將日期當作參數之一。我們可能需要在兩個日期之間產生隨機數以進行統計分析。本文將展示如何產生兩個給定日期之間的k個隨機日期使用隨機和日期時間模組日期時間是Python內建的處理時間的庫。另一方面，隨機模組有助於產生隨機數。因此，我們可以結合隨機和日期時間模組來產生兩個日期之間的隨機日期。語法random.randint(start,end,k)這裡的random指的是Python隨機函式庫。 randint方法採用三個重要的

Golang圖片處理：學習如何添加浮水印和文字 Aug 17, 2023 am 08:41 AM

Golang圖片處理：學習如何添加浮水印和文字引言：在現代數位化和社群媒體的時代，圖片處理已經成為了一項重要的技能。無論是個人使用還是商務運營，添加浮水印和文字都是常見的需求。在本文中，我們將探討使用Golang進行圖片處理的方法，學習如何添加浮水印和文字。背景：Golang是一門開源的程式語言，以其簡潔的語法、高效的性能和強大的並發能力而聞名。它已經成為許多開發

如何修改圖片上的文字 Aug 29, 2023 am 10:29 AM

修改圖片上的文字可以透過使用圖片編輯軟體、線上工具或截圖工具來實現。其具體步驟為：1、開啟圖片編輯軟體並匯入需要修改文字的圖片；2、選擇文字工具；3、點擊圖片上的文字區域，以建立文字方塊；4、在文字方塊中輸入您要要的新文字；5、如果只是想刪除圖片上的文字，可以使用橡皮擦工具或選擇工具來選擇並刪除文字區域。

如何使用PHP產生可刷新的圖片驗證碼 Sep 13, 2023 am 11:54 AM

如何使用PHP產生可刷新的圖片驗證碼隨著網路的發展，為了防止惡意攻擊和機器自動操作現象，許多網站都使用了驗證碼來進行使用者驗證。其中一個常見的驗證碼類型就是圖片驗證碼，透過產生一張包含隨機字元的圖片，要求使用者輸入正確的字元才能進行後續操作。本文將介紹如何使用PHP產生可刷新的圖片驗證碼，並提供具體的程式碼範例。步驟一：建立驗證碼圖片首先，我們需要建立一個用於生

使用Python中的pyWaffle產生一個華夫餅圖 Aug 17, 2023 am 11:49 AM

數據視覺化對於高效的資訊理解和展示至關重要。在眾多可用的圖表類型中，華夫餅圖以方形瓦片在網格狀結構中顯示資料的新穎方式。強大的Python模組PyWaffle方便了華夫餅圖的開發，類似於許多計算和數據分析方法。在本文中，我們將看看如何使用複雜的Python模組PyWaffle創建華夫餅圖。讓我們安裝PyWafle並看看如何使用它來視覺化分類資料。在您的cmd中執行以下命令來安裝該庫，然後將其導入到您的程式碼中pipinstallpywaffleExample1的中文翻譯為：範例1在這個例子中，我們

如何使用PHP進行基本的自然語言生成 Jun 22, 2023 am 11:05 AM

自然語言生成是一種人工智慧技術，它能夠將資料轉換為自然語言文字。在當今的大數據時代，越來越多的業務需要將資料視覺化或呈現給用戶，而自然語言生成正是一種非常有效的方法。 PHP是一種非常受歡迎的伺服器端腳本語言，它可以用來開發網頁應用程式。本文將簡要介紹如何使用PHP進行基本的自然語言生成。引入自然語言生成庫PHP自帶的函數庫並不包括自然語言生成所需的功能，因此

See all articles

怎樣使用veloticy-ui產生文字動畫

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題