time.js--一個簡單的時間軸JS框架--仿蘋果官網

 

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

 

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

用法

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

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

就可以控制元素的變化

 

time.js

make html move

引入

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

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

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

構造函數中傳入配置object

參數分別有

speed控制手動速度

autoSpeed控制自動播放速度

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

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

使用

使用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;
        },
    })

timeJS中的方法

stop() start()

stop會停止播放，只有start之後纔會繼續進行，

timeCtrl方法

timeCtrl(num,fun)方法

指定在num的時間時，執行fun方法

setTime方法

setTime(num)方法

重新設定

更多

期待的特性

//timeCtrl 已實現

未來

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

實例Demo

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

apple

一份簡單的個人簡歷

timejs-myInfo

 

 

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