當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

timeAxis.js--一个简单的时间轴JS框架--仿苹果官网

發(fā)布時間：2024/3/13 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 timeAxis.js--一个简单的时间轴JS框架--仿苹果官网小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

代碼已經(jīng)上傳到Github，希望各位大佬指教。

ReadMe還是以GitHub為準(zhǔn)

GitHub地址:https://github.com/royalknight56/timeAxis.js

基本實(shí)現(xiàn)了蘋果官網(wǎng)的所有變化動畫，簡單易用的html框架

用法

模仿了蘋果官網(wǎng)的滑動變化效果

由于網(wǎng)站的變化元素很多，我使用了JS來抽象出一個時間控制的簡單框架，只需要在html元素的屬性中加入控制屬性

就可以控制元素的變化

timeAxis.js

make html move

引入

通過src引入，放在文檔末尾

在script中創(chuàng)建新的timeJS類的對象

構(gòu)造函數(shù)中傳入配置object

參數(shù)分別有

speed控制手動速度

autoSpeed控制自動播放速度

沒有這個屬性的話腳本會自動設(shè)置為1

let tim=new timeJS({speed:1,autoSpeed:10})

其他配置選項(xiàng)

death和birth

規(guī)定了全局的開始時間和結(jié)束時間

動畫不會播放到這個時間之外

delay

規(guī)定了動畫的轉(zhuǎn)換延遲，原理是定義transition屬性，使動畫通過transition屬性來更加順滑

定義之后還會解決visible的問題（兩個動畫不在同一時間卻重疊在一起）

例子：

delay:0.2

上面定義延遲為0.2s

使用

使用tp標(biāo)簽

此腳本會尋找所有tp和autotp標(biāo)簽，并使他們運(yùn)動

<tp>tp指手動控制 </tp><autotp>autotp指此元素會自動播放 </autotp>

時間

控制動畫，就需要關(guān)鍵幀，關(guān)鍵幀節(jié)點(diǎn)的時間是由f-time屬性控制的格式是關(guān)鍵幀時間1(開始時間)/關(guān)鍵幀時間2/......關(guān)鍵幀時間n(結(jié)束時間)

以上例子是指Email會在1000時顯示，2000時消失

變化

只有關(guān)鍵幀而沒有變化是無意義的在f-value屬性中，可以定義每個時間段的CSS屬性值

格式是變化值1(開始時間)/變化值2/......變化值n(結(jié)束時間)

<tp f-value="00,0/30,0/400,0/900,0" f-time="1000/1100/1400/2000">Email </tp>

屬性綁定

我們可以將變化值通過f-bind綁定在其他屬性上 f-bind中：使用/分隔每個CSS屬性使用,分隔每個屬性的屬性名和單位比如 left,$px中，會使f-value中的每個關(guān)鍵幀的第一值綁定到left屬性中格式為$px,變化的值會自動填寫在$中

<tp f-value="700,200/800,200/700,100/700,200" f-bind="left,$px/top,$px" f-time="1000/1100/1400/2000">這個節(jié)點(diǎn)在1000時出現(xiàn)，left值為700 px，top值為200 px;在1100時，left值為800 px，top值為200px； </tp> <tp f-value="1700,300,300/700,300,360/700,300,360" f-bind="left,$px/top,$px/transform,rotate($deg)" f-time="600/700/1000">這個節(jié)點(diǎn)時間從600到1000變化的屬性是left,top,transform，變化值的單位是px,px,rotate($deg)，即它會平行移動并且轉(zhuǎn)動 </tp>

在上個例子中，我們綁定了transform,rotate($deg) 會使當(dāng)前元素旋轉(zhuǎn)

控制

本腳本的幀主要通過[右鍵]，[下鍵]，[滑輪向下]來前向播放通過[左鍵]，[上鍵]，[滑輪向上]來反向播放 tpauto的標(biāo)簽的元素會自動播放

動畫循環(huán)

f-ifsave用來控制元素的保留，或者動畫的循環(huán)

<tp f-ifsave="auto" f-value="1700,300,300/700,300,360/700,300,360" f-bind="left,$px/top,$px/transform,rotate($deg)" f-time="600/700/1000" style="font-size: 30px;">這個元素會在時間之后一直循環(huán) </tp><tp f-ifsave="true" f-value="1700,300,300/700,300,360/700,300,360" f-bind="left,$px/top,$px/transform,rotate($deg)" f-time="600/700/1000" style="font-size: 30px;">這個元素會在時間之后固定 </tp>

共有三種值：false（默認(rèn)值）當(dāng)前元素在時間之外會消失 true：當(dāng)前元素在時間之后會保留 auto：當(dāng)前元素會永遠(yuǎn)循環(huán)播放

管道

f-opt可以使用管道

在下面的例子中，使用了名為rand的管道

管道使得所有的值通過這個管道函數(shù)的變化后再渲染出來

定義管道函數(shù)需要使用timeJS類中的bind方法

bind方法參數(shù)：object{管道名:管道函數(shù)function}

在下面的例子中定義的rand會使得所有值隨機(jī)

tim.bind({rand:function(pos){return Math.random()*100-50;},})

如果一個元素沒有設(shè)定f-time f-bind

而設(shè)定了f-value和f-opt

則他會在頁面執(zhí)行時將value中的值全部應(yīng)用到opt中

可以參見demoPPT中的播放控制組件的用法

timeJS中的方法

stop() start()

stop會停止播放，只有start之后才會繼續(xù)進(jìn)行，

bindCtrl() bindAutoCtrl()方法

bindCtrl(time,function,ifonce)

用例：以下代碼在300的autoTime（自動播放時間值）時會調(diào)用函數(shù)，false指定他是會重復(fù)調(diào)用的(true則是一次性的)

tim.bindAutoCtrl(300, function () {tim.stop();console.log("stop");}, false)

bindCtrl會綁定手動播放時間值

setTime() getTime() setAutoTime() getAutoTime()方法

setTime(num)方法

重新設(shè)定手動播放時間值，會渲染出設(shè)定值的畫面

getTime()方法

會取得手動播放時間值

auto類別的同理

期待的特性

//timeCtrl 已實(shí)現(xiàn)

未來

為什么使用html來控制動畫我考慮到可以通過html的簡單屬性就可以完成大部分動畫效果因此，未來有可能通過一些工具就可以可視化的設(shè)置動畫，讓動畫效果廣泛的應(yīng)用在html中即時你不熟悉Js，也能做出有設(shè)計感的動態(tài)頁面

[你的創(chuàng)意帶來改變]

實(shí)例Demo

蘋果官網(wǎng)的手機(jī)介紹界面一直是我模仿的方向

apple

一份簡單的個人簡歷

timejs-myInfo

在GitHub倉庫中實(shí)現(xiàn)了一個網(wǎng)頁P(yáng)PT，可以回放與正放

demoPPT.html在線地址