摘要:前言最近要實(shí)現(xiàn)一個(gè)類似文字波浪線的效果,使用了這個(gè)動(dòng)畫庫(kù)第一個(gè)感覺就是使用簡(jiǎn)單,代碼量少性能優(yōu)異在此簡(jiǎn)單介紹一下使用方法,并實(shí)現(xiàn)一個(gè)看上去不錯(cuò)的動(dòng)畫具體使用方法可以點(diǎn)擊這里基本使用要使用需要先引入其中可以是依賴也可以不依賴,具體看一下下
前言
最近要實(shí)現(xiàn)一個(gè)類似文字波浪線的效果,使用了velocity-ui這個(gè)動(dòng)畫庫(kù),第一個(gè)感覺就是使用簡(jiǎn)單,代碼量少,性能優(yōu)異,在此簡(jiǎn)單介紹一下使用方法,并實(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)畫庫(kù),但是可以提供
更細(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) {}//對(duì)集合對(duì)象可以設(shè)置不同的屬性值
可以看出velocity也可以設(shè)置quequ,使用和animate是一致的,而且velocity自身提供一些指令來實(shí)現(xiàn)動(dòng)畫,有fadeIn/fadeOut, slideUp/slideDown,
scroll,finish,reverse,除此以外velocity實(shí)現(xiàn)了對(duì)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 可以讓集合對(duì)象依次錯(cuò)開一段時(shí)間執(zhí)行動(dòng)畫
drag 可以讓集合對(duì)象的最后一個(gè)元素有緩沖效果
backwards 可以讓集合對(duì)象從最后一個(gè)元素往前依次錯(cuò)開一段時(shí)間執(zhí)行動(dòng)畫
下面就利用 RegisterEffect 和 stagger 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的文字動(dòng)畫
實(shí)現(xiàn)一個(gè)自定義動(dòng)畫
<span class="http"><span class="javascript">Document</span></span>
segmentfault
除去一些字符的操作,可以看出實(shí)現(xiàn)一個(gè)看似復(fù)雜的動(dòng)畫只需簡(jiǎn)單設(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)部由于對(duì)動(dòng)畫方面進(jìn)行了優(yōu)化,所以性能方面比jquery的animate要好,甚至比css
的transition還要出色,當(dāng)然這個(gè)我沒有測(cè)試過,大家可以測(cè)試一下
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/107320.html
摘要:前言最近要實(shí)現(xiàn)一個(gè)類似文字波浪線的效果,使用了這個(gè)動(dòng)畫庫(kù)第一個(gè)感覺就是使用簡(jiǎn)單,代碼量少性能優(yōu)異在此簡(jiǎn)單介紹一下使用方法,并實(shí)現(xiàn)一個(gè)看上去不錯(cuò)的動(dòng)畫具體使用方法可以點(diǎn)擊這里基本使用要使用需要先引入其中可以是依賴也可以不依賴,具體看一下下 前言 最近要實(shí)現(xiàn)一個(gè)類似文字波浪線的效果,使用了velocity-ui這個(gè)動(dòng)畫庫(kù),第一個(gè)感覺就是使用簡(jiǎn)單,代碼量少,性能優(yōu)異,在此簡(jiǎn)單介紹一下使用方法...
摘要:前言最近要實(shí)現(xiàn)一個(gè)類似文字波浪線的效果,使用了這個(gè)動(dòng)畫庫(kù)第一個(gè)感覺就是使用簡(jiǎn)單,代碼量少性能優(yōu)異在此簡(jiǎn)單介紹一下使用方法,并實(shí)現(xiàn)一個(gè)看上去不錯(cuò)的動(dòng)畫具體使用方法可以點(diǎn)擊這里基本使用要使用需要先引入其中可以是依賴也可以不依賴,具體看一下下 前言 最近要實(shí)現(xiàn)一個(gè)類似文字波浪線的效果,使用了velocity-ui這個(gè)動(dòng)畫庫(kù),第一個(gè)感覺就是使用簡(jiǎn)單,代碼量少,性能優(yōu)異,在此簡(jiǎn)單介紹一下使用方法...
摘要:大家最為熟知的就是負(fù),使用負(fù)的,可以用來實(shí)現(xiàn)類似多列等高布局垂直居中等等。那還有沒有其他一些有意思的負(fù)值使用技巧呢下文就再介紹一些負(fù)值有意思的使用場(chǎng)景。但是希望無論左側(cè)內(nèi)容較多還是右側(cè)內(nèi)容較多,兩欄的高度始終保持一致。 寫本文的起因是,一天在群里有同學(xué)說誤打誤撞下,使用負(fù)的 outline-offset 實(shí)現(xiàn)了加號(hào)。嗯?好奇的我馬上也動(dòng)手嘗試了下,到底是如何使用負(fù)的 outline-o...
閱讀 1451·2021-11-25 09:43
閱讀 2591·2021-09-24 10:30
閱讀 3666·2021-09-06 15:02
閱讀 3604·2019-08-30 15:55
閱讀 3306·2019-08-30 15:53
閱讀 1701·2019-08-30 15:52
閱讀 2148·2019-08-30 14:21
閱讀 2014·2019-08-30 13:55