安安，今天的學習課程來到Jquery的最後一堂課了，練習的單元為動畫原理，跟之前講過的css動畫有著些微關係，都是在講animate，所以對這堂課還蠻有興趣的～畢竟看了一些炫炮網頁的程式碼有時候都會看見XD
那今天就先把學習到的地方寫成筆記記錄下來在這邊:P今日練習資源是hahow的課程。

狀態變化動畫

$("選擇條件").動作(參數)

• hide / show 消失 顯示 display: none→block
• fadeIn / fadeOut 漸入 漸出 opacity: 0→1
• slideDown / slideUp 下滑 展開 height: 0→300px

※JS與css動畫比較：

JS（適合每個影格都要做更新，像遊戲一樣）

• 較容易進行數學計算
• 能動態修改動畫
• 容易處理事件觸發
• 容易套用速度曲線

css（適合單點、狀態之間轉換的動畫，如Ａ變Ｂ變Ｃ）

• 效能極快 補間順暢
• 管理容易（class）
• keyframes無法管理class

使用Jquery來製作中間動畫：Jquery Animate

$("selector").animate(屬性,設定,速度曲線)

1.屬性：結束狀態，目標想達到的樣子

範例：

$("selector").animate({
	opacity: 0.5,
	left: "300px",
	width: "500px"
},'slow')
//slow 慢速執行

＊可以使用 += / -= 參考初始狀態計算相對位置。

例如：

$('rect').animate({'left':'+=50px'})
//會根據原本的位置往右50px

2.設定：關於動畫設定，長度

$('selector').animate({
	opacity: 0.5
},{
duration: 500,
complete: function(){},
start: function(){},
},'slow')

3.速度曲線：整個動畫的流暢度

$('p').animate({
	opacity: "show"
},'slow','easein');

一般動畫如果不特別設定的話，就會像線性的，位移及改變量是固定，看起來死板。

但會希望動畫自然點，所以就會用ease-in / ease-out / ease-in-out（在第三個引數）。

這邊也有其他的速度曲線可參考：https://www.xuanfengge.com/easeing/easeing/

chaining串連動畫：動畫1→動畫2→動畫3

可以連續的做動作，呼叫動畫1後再繼續呼叫動畫2，會加入一個queue的東西，將他們排成序列。

$('selector').animate({屬性},time,speed)
							.animate({屬性},time,speed)

串連動畫中間可加入的東西：動畫1→可加入的東西ex:delay(500)→動畫2→動畫3

.delay(time)中間延遲、.stop()暫停動畫、.clearQueue()清除動畫序列： 後面原本排定的動畫序列都會被清除。

Jquery動畫的問題

重複與反播需要自己處理，較難處理css transform。

這時就會用到另一個框架"Velocity.js"補足Jquery原生沒有的功能：重播、transform等。

Velocity.js

$('selector').velocity( 屬性 , 設定 )

$(".ball").velocity({
	left: "500px",
	top: "200px",
	opacity: 1
},{
 loop: 5,
 duration: 500
})

講幾個設定裡面主要的說明（詳看註解）

{
    /* Velocity's default options */
    duration: 400, // 持續長度
    easing: "swing", //n套用的速度曲線
    queue: "",
    begin: undefined,   // 特定情況下可觸發的事件，中間可傳予function
    progress: undefined,// 特定情況下可觸發的事件，中間可傳予function
    complete: undefined,// 特定情況下可觸發的事件，中間可傳予function
    display: undefined,
    visibility: undefined,
    loop: false, // 次數 or true/false
    delay: false, // 可以給幾百毫秒做延遲
    mobileHA: true }

reverse：反轉上一次動畫

$('selector')
.velocity( {left: '50px'} , {duration: 300} )
.velocity( {top: '100px'} , {duration: 300} )
.velocity( 'reverse' , {duration: 500} )

假設，執行第二行由top:0到top:100px，使用reverse反轉會變成由top:100px到top:0，使用上要注意他對最後一段畫面進行反轉。

其他特殊動畫

$('selector')
.velocity( 'fadeIn' , {duration: 500} ) // 淡入
.velocity( 'fadeOut' , {duration: 500} ) // 淡出
.velocity( 'slideDown' , {duration: 500} ) // 下滑展開
.velocity( 'slideUp' , {duration: 500} ) // 上滑收起
.velocity( 'scroll' , {duration: 500} ) // 捲動

Transform Function：可以去指定css的transform

有個注意點：他並不會去抓css裡面原本設定的transform。

$element.velocity({
    屬性: [ ⽬標值 , 初始值 ]
    屬性: [ ⽬標值 , 速度曲線, 初始值 ]
});

範例：

$element.velocity({
 scale: [ 4,3 ],
 translateX: [ 500,'easeIn', 100 ]
});

那今天的筆記就到這邊囉！明日會練習此堂課的實作題，再請期待一下:P