?

代碼已經上傳到Github，希望各位大佬指教。

ReadMe還是以GitHub為準

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

?

基本實現了蘋果官網的所有變化動畫，簡單易用的html框架

用法

模仿了蘋果官網的滑動變化效果

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

就可以控制元素的變化

?

timeAxis.js

make html move

引入

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

<script src="sjl.js"></script>

在script中創建新的timeJS類的對象

構造函數中傳入配置object

參數分別有

speed控制手動速度

autoSpeed控制自動播放速度

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

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

其他配置選項

death和birth

規定了全局的開始時間和結束時間

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

delay

規定了動畫的轉換延遲，原理是定義transition屬性，使動畫通過transition屬性來更加順滑

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

例子：

delay:0.2

上面定義延遲為0.2s

使用

使用tp標簽

此腳本會尋找所有tp和autotp標簽，并使他們運動

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

時間

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

<tp f-time="1000/1100/1400/2000">這個節點在1000時出現經過1100，1400，在2000時消失 </tp>

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

變化

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

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

<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中的每個關鍵幀的第一值綁定到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">這個節點在1000時出現，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">這個節點時間從600到1000變化的屬性是left,top,transform，變化值的單位是px,px,rotate($deg)，即它會平行移動并且轉動 </tp>

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

控制

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

動畫循環

f-ifsave用來控制元素的保留，或者動畫的循環

<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;">這個元素會在時間之后一直循環 </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（默認值） 當前元素在時間之外會消失 true：當前元素在時間之后會保留 auto：當前元素會永遠循環播放

管道

f-opt可以使用管道

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

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

<autotp f-ifsave="auto" f-time="0/400" f-value="-30/120" f-bind="left,$%" style="position: relative;top:200px;font-size: 50px;color: aliceblue;" f-opt="rand">0101010101111001011010</autotp>

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

bind方法參數：object{管道名:管道函數function}

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

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

如果一個元素沒有設定f-time f-bind

而設定了f-value和f-opt

則他會在頁面執行時將value中的值全部應用到opt中

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

timeJS中的方法

stop() start()

stop會停止播放，只有start之后才會繼續進行，

bindCtrl() bindAutoCtrl()方法

bindCtrl(time,function,ifonce)

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

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

bindCtrl會綁定手動播放時間值

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

setTime(num)方法

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

getTime()方法

會取得手動播放時間值

auto類別的同理

更多

期待的特性

//timeCtrl 已實現

未來

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

[你的創意帶來改變]

實例Demo

蘋果官網的手機介紹界面一直是我模仿的方向

apple

一份簡單的個人簡歷

timejs-myInfo

在GitHub倉庫中實現了一個網頁PPT，可以回放與正放

demoPPT.html在線地址

?

?

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

總結

以上是生活随笔為你收集整理的timeAxis.js--一个简单的时间轴JS框架--仿苹果官网的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。