:::::::: 學習自定動畫及加減速的設計 ::::::::

一、加強認識物件

二、自定動畫效果

選取器物件.animate(properties [,duration][,easing][,complete]) [參考][參考]

改變選取器物件的屬性來設計動畫 (物件屬性改變的目標 [,動畫持續的時間][,加減速效果][,完成動畫後執行的工作])

三、加減速變化的外掛

下載動畫時加減速變化的外掛 [參考]

加上加減速變化的外掛後, 可以運用以下加減速的參數 [參考]

linear,easeInSine,easeOutSine,easeInOutSine,easeInQuad,easeOutQuad,easeInOutQuad,

easeInCubic,easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,

easeInQuint,easeOutQuint,easeInOutQuint,easeInExpo,easeOutExpo,easeInOutExpo,

easeInCirc,easeOutCirc,easeInOutCirc,easeInBack,easeOutBack,easeInOutBack,

easeInElastic,easeOutElastic,easeInOutElastic,easeInBounce,easeOutBounce,easeInOutBounce

四、了解Dimensions尺寸的偵測方式

[參考]

五、運用animate設計自定動畫

HTML：
CSS：
JS：	設計區塊以1秒時間向右移動, 停留1秒後再向下移動, 停留1秒後再向左移動, 停留1秒後再向上移動
結果：	區塊在網頁的四周移動一圈, 但移動到下方時, 區塊超出視窗一部份了
改良：	設定網頁body高度大於視窗, 再運用setTimeout函數讓動畫不斷地循環移動
結果：	區塊會移動到網頁文件的最下方, 也就是超出了視窗
改良：	如果希望區塊在視窗可見範圍內的四週移動, document物件改成window物件, 如果高度包含了padding設定, 則偵測高度的方法必須由height()改成innerHeight()
結果：