fat
v0.6.8
在原始動畫方面，速度脂肪的表現優於每個網絡動畫庫，還提供了靈活的動畫功能，例如場景，序列，變換，著色，控制和寬鬆。
安裝指南•API參考•示例•自定義構建•基準排名
獲取最新（穩定版本）：
| 建造 | 文件 | CDN |
| 脂肪.min.js | 下載 | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js |
| fat.light.js | 下載 | https://cdn.jsdelivr.net/gh/nexpapps-de/fat@master/fat.light.js |
| fat.compact.js | 下載 | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.compact.js |
| fat.custom.js | 自定義構建 |
所有功能：
| 特徵 | 脂肪.min.js | fat.compact.js | fat.light.js |
| 動畫片 | x | x | x |
| 場景（組） | x | x | x |
| 寬鬆收藏（定制bezier） | x | x | - |
| 控制（時間軸） | x | - | - |
| 序列 | x | - | - |
| 關鍵框架 | x | - | - |
| 預設（效果） | x | - | - |
| 變換（2D/3D） | x | x | - |
| 篩選 | x | - | - |
| 顏色 | x | x | - |
| 自定義屬性/渲染器 | x | x | x |
| 相對值 | x | - | - |
| 滾動 | x | - | - |
| 畫 | x | - | - |
| 並發（嚴格模式） | x | - | - |
| 渲染引擎 | JS，CSS3，Waapi | JS | JS |
| 文件大小（GZIP） | 7.0 kb | 4.5 kb | 1.9 kb |
fat.js也可以使用旗幟調試和剖面劑，以供非生產使用。
進行自定義構建也很簡單
圖書館比較：基準“彈跳球”
“動畫”（2000彈跳球）
| 秩 | 庫名稱 | 庫版 | 庫大小 | 內存堆 * | 內存分配** | 每秒更新 | 每秒影格數 |
| 1 | 胖的 | 0.6.6 | 1.9 kb | 0.85 MB | 0.15 mb | 103954 | 51.5 |
| 2 | GSAP | 2.0.2 | 25.8 kb | 28.32 MB | 8.1 MB | 87249 | 43.1 |
| 3 | tweenjs | 1.0.2 | 8.3 kb | 3.16 MB | 3.1 MB | 69647 | 34.4 |
| 4 | HTML5（WAAPI） | - | - | 0.91 MB | 0.75 MB | - | 32.2 |
| 5 | 蒂尼亞特 | 0.4.0 | 1.5 kb | 1.93 MB | 1.98 MB | 28801 | 29 |
| 6 | Mootools | 1.6.0 | 31.2 kb | 3.14 MB | 3.42 MB | 26919 | 25.2 |
| 7 | CSS3（過渡） | - | - | 0 MB | 0 MB | - | 22.3 |
| 8 | 速度 | 2.0.5 | 16.6 kb | 8.33 MB | 7.98 MB | 16820 | 6.3 |
| 9 | 動植物 | 2.2.0 | 5.9 kb | 7.14 MB | 8.2 MB | 9877 | 2.8 |
| 10 | anim.js | - | 1.9 kb | 7.08 MB | 9.49 MB | 6994 | 2.8 |
| 11 | Dojo | 1.14.2 | 53.0 kb | 9.1 MB | 6.5 MB | 10607 | 2.3 |
| 12 | morpheus | 0.7.2 | 2.7 kb | 4 MB | 2.97 MB | 8543 | 2.1 |
| 13 | jQuery | 3.3.1 | 30.0 kb | 25.14 MB | 25.16 MB | 7206 | 1.3 |
| 14 | bajs | 1.0 | 1.2 kb | 1.25 mb | 0.91 MB | - | 0.8 |
| 15 | Justanimate | 2.5.1 | 7.3 kb | 109.5 MB | 61.18 MB | 5087 | 0.6 |
| 16 | yui | 3.18.1 | 24.4 kb | 159.59 MB | 88.35 MB | 2182 | 0.5 |
| 17 | Zepto | 1.2.0 | 11.0 kb | 40.14 MB | 18.49 MB | - | 0.3 |
“變換”（2000彈跳球）
| 秩 | 庫名稱 | 庫版 | 每秒更新 | 每秒影格數 |
| 1 | 胖的 | 0.6.6 | 91960 | 46.1 |
| 2 | tweenjs | 1.0.2 | 67931 | 33 |
| 3 | GSAP | 2.0.2 | 50337 | 26 |
| 4 | 動植物 | 2.2.0 | 41040 | 21.6 |
| 5 | HTML5（WAAPI） | - | - | 16 |
| 6 | CSS3（過渡） | - | - | 15.5 |
| 7 | Zepto | 1.2.0 | - | 12.4 |
| 8 | morpheus | 0.7.2 | 6665 | 3.3 |
| 9 | bajs | 1.0 | - | 1 |
| 10 | Justanimate | 2.5.1 | 1218 | 0.3 |
| 11 | jQuery | 3.3.1 | 309 | 0.01 |
“顏色”（2000個閃爍的球）
| 秩 | 庫名稱 | 庫版 | 每秒更新 | 每秒影格數 |
| 1 | 胖的 | 0.6.6 | 113950 | 57 |
| 2 | GSAP | 2.0.2 | 89665 | 42.65 |
| 3 | tweenjs | 1.0.2 | 89499 | 42 |
| 4 | 速度 | 2.0.5 | 59617 | 31.25 |
| 5 | HTML5（WAAPI） | - | - | 26.5 |
| 6 | anim.js | - | - | 23 |
| 7 | CSS3（過渡） | - | - | 20.6 |
| 8 | yui | 3.18.1 | 84287 | 14.7 |
| 9 | Mootools | 1.6.0 | 8123 | 13.3 |
| 10 | Dojo | 1.14.2 | 33004 | 11.1 |
| 11 | 動植物 | 2.2.0 | 12483 | 6.3 |
| 12 | jQuery | 3.3.1 | 7002 | 4 |
| 13 | morpheus | 0.7.2 | 3902 | 3.2 |
| 14 | Zepto | 1.2.0 | - | 2 |
| 15 | Justanimate | 2.5.1 | 4283 | 1 |
| 16 | bajs | 1.0 | - | 0.7 |
瀏覽器：Chrome（桌面），測試持續時間：30秒（中值）
*內存堆：動畫需要執行的內存大小
**內存分配：在動畫運行時分配的內存量
圖書館比較：基準“彈跳球”
< html >
< head >
< script src =" fat.min.js " > </ script >
</ head >
...注意：使用fat.min.js進行生產，而脂肪JS進行開發。
使用CDN的最新穩定版本：
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js " > </ script >使用CDN的特定版本：
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/[email protected]/fat.min.js " > </ script >常見的JS
在您的代碼中包括如下：
var Fat = require ( "Fat" ) ;AMD
var Fat = require ( "./fat.min.js" ) ; 名稱空間“ fat”也是默認場景（全局場景）。
全局方法 /場景方法：
控制方法：
| 選項 | 類型 | 預設 | 描述 |
| 開始 | 布爾 | 真的 | 執行動畫調用時啟用/禁用自動播放 |
| FPS | 數字 | 60 | 每秒影格數 |
| 選項 | 類型 | 預設 | 描述 |
| 期間 | 數字 | 400 | 動畫的持續時間（MS）。 |
| 舒適 | 字符串|功能 | “線性” | 選擇預定義的寬鬆方法或傳遞自定義寬鬆功能。 |
| 延遲 | 數字 | 0 | 動畫的延遲（MS）。 |
| 打回來 | 功能 | 無效的 | 動畫完成後要調用功能。 |
| 步 | 功能（進度，價值） | 無效的 | 每個刻度都需要調用函數（進度：0到1之間的進度狀態，值：當前值，包括單位，使用自定義屬性時有用）。 |
| 環形 | 數字 | 0 | 序列或密鑰幀的循環計數。設置為-1用於無限循環。 |
| init | 布爾 | 錯誤的 | 啟動下一個動畫循環時的力量計算樣式。在動畫回調中更改樣式在同一樣式屬性（動畫循環）上啟動新動畫之前，樣式在動畫回調中更改。 |
| 力量 | 布爾 | 錯誤的 | 強迫樣式變化（等於CSS關鍵字“！重要”）。 |
| 嚴格的 | 布爾 | 錯誤的 | 不要覆蓋並保留不同的動畫在同一對象的樣式屬性上。 |
| 引擎 | 細繩 | “ JS” | 選擇3個渲染引擎之一：“ JS ”，“ CSS ”，“本地”。 |
胖的。 Animate （Selector [] | Elements []，styles [] {}，options {}，回調）
Fat . animate ( "#mydiv" , { left : "100px" } , { /* options */ } ) ;傳遞元素，元素數組或DOM查詢選擇器。
Fat . animate ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// "this" refers to #mydiv
console . log ( this . style . left ) ;
}
} ) ;請參閱上面的所有可用選項。
通過每種樣式屬性的自定義選項傳遞：
Fat . animate ( "#mydiv" , {
left : {
from : 0 ,
to : 100 ,
unit : "%" ,
duration : 2000 ,
ease : "linear"
} ,
top : {
from : 0 ,
to : "100%" ,
duration : 2000 ,
ease : "quadIn" ,
delay : 2000
}
} ) ;傳遞單位參數略快。
“從單位”快捷property: [from, to, unit] ：
Fat . animate ( "#mydiv" , {
left : [ 0 , 100 , "%" ] , // from 0% to 100%
top : [ 0 , "100%" ] ,
} ) ;或者將回調函數作為最後一個參數傳遞：
Fat . animate ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 2000 ,
duration : 2000 ,
ease : "easeInOut"
} , function ( ) {
// done
} ) ; Fat . animate ( "#mydiv" , { top : "100px" } , function ( ) {
// done
} ) ; Fat . animate ( "#mydiv" , "slideInTop" , function ( ) {
// done
} ) ;延遲動畫直到目標元素進入視圖（例如，滾動）：
Fat . animate ( "#mydiv" , { top : "100px" } , { delay : "view" } ) ; 根據當前狀態計算值：
// current left + 100px
Fat . animate ( "#mydiv" , { left : "+=100px" } ) ; // double of current top
Fat . animate ( "#mydiv" , { top : "*=2" } ) ; // current left - 100px
Fat . animate ( "#mydiv" , { left : "-=100px" , } ) ; // half of current top
Fat . animate ( "#mydiv" , { top : "/=2" } ) ;根據當前狀態切換值：
// toggle current left (100% or 0%)
Fat . animate ( "#mydiv" , { left : "!=100%" } ) ; 單獨的符號提供了最佳性能：
Fat . animate ( "#mydiv" , {
translateX : "100px" ,
translateY : "100px"
} ) ;相同：
Fat . transform ( "#mydiv" , { ... } ) ;或者：
Fat . animate ( "#mydiv" , {
"transform" : "translate(100px, 100px)"
} ) ;相同：
Fat . transform ( "#mydiv" , "translate(100px, 100px)" ) ; Fat . animate ( "#mydiv" , {
color : "#f00" ,
backgroundColor : "rgba(0, 255, 0, 1)" ,
borderColor : "hsla(0, 100%, 100%, 1)"
} ) ;單獨的符號提供了最佳性能：
Fat . animate ( "#mydiv" , {
colorR : 0 ,
colorG : 0 ,
colorB : 0 ,
colorA : 0 ,
backgroundColorA : "100%" ,
borderColorB : 255
} ) ; 單獨的符號提供了最佳性能：
Fat . animate ( "#mydiv" , {
brightness : 0.5 ,
contrast : 0.5 ,
hue : "180deg"
} ) ;您可以將速記
hue用作hue-rotate
相同：
Fat . filter ( "#mydiv" , { ... } ) ;或者：
Fat . animate ( "#mydiv" , {
"filter" : "brightness(0.5) contrast(0.5) hue(180deg)"
} ) ;相同：
Fat . filter ( "#mydiv" , "brightness(0.5) contrast(0.5) hue(180deg)" ) ; 內置寬鬆：
靜態（預處理）與動態寬鬆
有兩種定義寬鬆功能的方法。當您的寬鬆是靜態曲線（例如sasicin，backinout，彈性等）時，您應該通過Fat.ease["myEasing"] = fn()定義放鬆，然後只需將名稱作為字符串作為Fat.animate選項中的字符串傳遞。這將預取所有計算，因此您可以自由使用真正的寬鬆定義而無需任何性能弊端。
當您要使用動態寬鬆（取決於運行時計算）時，您應該將放鬆功能直接傳遞給Fat.animate 。在這種情況下，放鬆計算將不會預取。這使您可以通過編程方式控制寬鬆並在運行時添加邏輯。
定義自定義靜態寬鬆功能（1參數樣式）：
Fat . ease [ "linear" ] = function ( x ) {
return x ;
} ;X ：當前進度（0.0-1.0）
定義自定義靜態寬鬆功能（4參數樣式）：
Fat . ease [ "linear" ] = function ( t , b , c , d ) {
return b + ( c - b ) * ( t / d ) ;
} ;t ：當前時間， b ：從價值， c ：to value， d ：持續時間
應用自定義靜態寬鬆：
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "linear" } ) ;使用Cutic Bezier：
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "cubic(0, 1, 0, 1)" } ) ;建議使用Bezier的速記陣列符號：
... , { ease : [ 0 , 1 , 0 , 1 ] } ) ;定義自定義動態寬鬆功能（1參數樣式）：
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( x ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ;定義自定義動態寬鬆功能（4參數樣式）：
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( t , b , c , d ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ; 胖的。 Animate （custom_object [] {}，custom_property [] {}，options {}）
注意：您不能在HTML元素上使用每個動畫的一個自定義屬性。相反，當動畫自定義對象屬性時，沒有限制。
只需添加一個名稱為“自定義”的屬性：
Fat . animate ( "#mydiv" , {
custom : "50%"
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current ;
}
} ) ;單獨處理單元：
Fat . animate ( "#mydiv" , {
custom : 50
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current + "%" ;
}
} ) ;將自定義對象/函數作為第一個參數傳遞，而不是元素：
Fat . animate ( {
obj : document . getElementById ( "mydiv" )
} , {
custom : 50
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
// "this" refers to the custom object
this . obj . style . left = current + "%" ;
}
} ) ;您也可以使用序列：
... [ custom : 50 , custom : 0 , custom : 100 , custom : 0 ]這樣，可以通過每個動畫作業傳遞自定義數據，邏輯和渲染器，例如：
var handler = {
unit : "%" ,
obj : document . getElementById ( "mydiv" ) ,
set : function ( property , value ) {
this . obj . style [ property ] = value + this . unit ;
}
} ;
Fat . animate ( handler , { custom : 50 } , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
// "this" refers to handler
this . set ( "left" , current ) ;
}
} ) ;您還可以使用對象/處理程序數組：
Fat . animate ( [ handler1 , handler2 , handler3 ] , ...如果您根本不需要從/到過渡值，則可能是：
function cubicInOut ( x ) {
return ( ( x *= 2 ) <= 1 ? x * x * x : ( x -= 2 ) * x * x + 2 ) / 2 ;
}
Fat . animate ( { ease : cubicInOut } , { custom : true } , {
step : function ( progress ) {
var current = this . ease ( progress ) ;
// console.log(current);
}
} ) ;或者：
Fat . animate ( { } , { custom : true } , { step : function ( progress ) {
var current = cubicInOut ( progress ) ;
// console.log(current);
} } ) ;或者：
Fat . animate ( { } , { custom : 1 } , {
ease : cubicInOut ,
step : function ( progress , current ) {
// console.log(current);
}
} ) ;補間自定義對象屬性：
function draw ( ) {
this . obj . style [ this . property ] = this . value ;
}
var custom = {
value : 0 ,
property : "left" ,
obj : document . getElementById ( "#mydiv" )
} ;
Fat . animate ( custom , { value : "50%" } , {
duration : 2000 ,
ease : "cubicInOut" ,
step : draw
} ) ; Fat . animate ( "#mydiv" , [
{ left : "100%" } , // 1st animation, 2000ms
{ top : "100%" } , // 2nd animation, 2000ms
{ left : 0 } , // 3rd animation, 2000ms
{ top : 0 } // 4th animation, 2000ms
] , {
callback : function ( ) { alert ( "Next Loop" ) } ,
delay : 2000 ,
loop : - 1 // infinite
} ) ;使用每個樣式屬性的自定義選項：
Fat . animate ( "#mydiv" , [ {
left : { // 1st animation
from : 0 ,
to : 100 ,
unit : "%" ,
duration : 2000
}
} , {
top : { // 2nd animation
to : "100%" ,
duration : 2000 ,
ease : "easeInOut" ,
delay : 0
}
} ,
... Fat . animate ( "#mydiv" , {
"25%" : { left : "100%" } , // 0 -> 25%, 500ms
"50%" : { top : "100%" } , // 25 -> 50%, 500ms
"75%" : { left : 0 } , // 50 -> 75%, 500ms
"100%" : { top : 0 } // 75 -> 100%, 500ms
} , {
callback : function ( ) { alert ( "Next Loop" ) } ,
delay : 2000 ,
loop : - 1 // infinite
} ) ;使用每個樣式屬性的自定義選項：
Fat . animate ( "#mydiv" , {
"0%" : {
left : {
to : "100%" ,
ease : "easeIn"
}
} ,
"100%" : {
top : {
to : "0%" ,
ease : "easeOut"
}
}
} ,
... Fat . animate ( "#mydiv" , "fadeOut" ) ;結合多個預設（訂購）：
Fat . animate ( "#mydiv" , "fadeOut zoomOut rollOutRight" ) ;也可與序列一起使用：
Fat . animate ( "#mydiv" , [ "slideInTop" , "zoomIn" ] ) ;定義自定義預設：
Fat . preset [ "fade-out-down" ] = {
opacity : 0 ,
translateY : "100%"
} ;使用自定義預設：
Fat . animate ( "#mydiv" , "fade-out-down" ) ;內置預設：
獲取全局場景（默認）：
var scene = Fat . animate ( element , { left : "100%" } ) ;創建一個新場景：
var scene = Fat . create ( ) ;將動畫添加到場景中：
scene . animate ( element , { left : "100%" } ) ;銷毀場景：
scene . destroy ( ) ;有用的例子
考慮以下示例：
var scene_1 = Fat . animate ( element_1 , { left : "100%" } ) ;
var scene_2 = Fat . animate ( element_2 , { left : "100%" } ) ;
var scene_3 = Fat . animate ( element_3 , { left : "100%" } ) ;
// this will also destroy scene_2 and scene_3:
scene_1 . destroy ( ) ;所有變量都指向相同的全局場景，基本上是基於“脂肪”的場景。
這是正確的解決方法：
var scene_1 = Fat . create ( ) . animate ( element_1 , { left : "100%" } ) ;
var scene_2 = Fat . create ( ) . animate ( element_2 , { left : "100%" } ) ;
var scene_3 = Fat . create ( ) . animate ( element_3 , { left : "100%" } ) ;
// this will just destroy scene_1:
scene_1 . destroy ( ) ;不要大規模創建新場景，也不要默認創建它們。大量平行場景導致性能弊端。
胖在內部指向默認的全局場景，因此您可以相應地使用胖子上的所有場景方法。
更新單樣式：
scene . set ( "#mydiv" , "left" , "0%" ) ;更新多種樣式：
scene . set ( "#mydiv" , { top : 0 , left : 0 } ) ;從對像中刪除所有動畫：
scene . remove ( "#mydiv" ) ;從對像中刪除特定動畫：
scene . remove ( "#mydiv" , "left" ) ;從對像中刪除特定動畫的列表：
scene . remove ( "#mydiv" , [ "top" , "left" ] ) ;暫停場景：
scene . pause ( ) ;或者：
scene . start ( false ) ;玩一個場景：
scene . start ( ) ;或者：
scene . pause ( false ) ;還原播放（切換）：
scene . reverse ( ) ;或者設置方向：
scene . reverse ( false ) ;重置播放狀態並跳回開始：
scene . reset ( ) ;完成並執行回調：
scene . finish ( ) ;設置播放速度：
scene . speed ( 0.5 ) ; // half
scene . speed ( 1 ) ; // normal
scene . speed ( 2 ) ; // double
scene . speed ( - 2 ) ; // double (reversed direction)尋求一個特定位置的場景：
scene . seek ( 0 ) ; // start
scene . seek ( 0.5 ) ; // middle
scene . seek ( 1 ) ; // end相對於當前位置（通過毫秒）移動場景：
scene . shift ( 2000 ) ; // current + 2000 ms
scene . shift ( - 500 ) ; // current - 500 ms循環序列和反向方向
當循環序列並逆轉動畫方向時（例如設置速度<0），您必須通過每種樣式的從對聲明對傳遞一個，否則，當從反向方向循環回到反向方向時，從價值會丟失。
var scene = Fat . animate ( element , [ {
left : { from : "0%" , to : "50%" }
} , {
left : { from : "50%" , to : "0%" }
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;或者使用從單位速記的使用：
var scene = Fat . animate ( element , [ {
left : [ 0 , 50 , "%" ]
} , {
left : [ 50 , 0 , "%" ]
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;或者使用相對切換：
var scene = Fat . animate ( element , [ {
left : "!=50%"
} , {
left : "!=0%"
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ; 滾動文檔/元素到特定位置（垂直）：
Fat . animate ( element , { scrollTop : 500 } ) ;水平滾動：
Fat . animate ( element , { scrollLeft : 500 } ) ;在兩個方向上scroll: [x, y] ：
Fat . animate ( element , { scroll : [ 500 , 500 ] } ) ;使用相對值：
Fat . animate ( element , { scroll : "+=50" } ) ; 安排在下一個動畫框架期間執行的任務：
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} ) ;安排延遲任務並保留油漆ID：
var id = Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} , 2000 ) ;從隊列中刪除上述計劃的任務：
Fat . cancel ( id ) ;每個動畫框架的任務循環：
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
return true ;
} ) ;只需返回True即可保持循環的活力。返回false或什麼都沒有打破循環。
考慮以下示例：
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // this style change will be shadowed
Fat . animate ( this , { top : "100%" } ) ;
} ) ;這稱為動畫循環，回調在同一對像樣式屬性上創建了一個新動畫。從技術上講，回調在第一個動畫的最後幀中執行。因此，該屬性仍然有一個動畫，並將由下一個動畫循環繼承。
在回調過程中，將要通過動畫循環的繼承來遮蔽相同樣式屬性的外部更改。
當樣式更改沒有外部發生（例如，通過其他工具）使用集方法來獲得最佳性能：
Fat . animate ( element , { top : "100%" } , function ( ) {
Fat . set ( this , "top" , 0 ) . animate ( this , { top : "100%" } ) ;
} ) ;否則，要解決這種情況，您必須添加INIT選項：
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // external change somewhere happens
Fat . animate ( this , { top : "100%" } , { init : true } ) ;
} ) ;同樣，此問題僅在使用新動畫循環之前在回調期間使用動畫循環混合在同一樣式屬性上的動畫循環時發生。
考慮以下示例：
Fat . animate ( "#mydiv" , { top : "100%" } , { duration : 2000 } , function ( ) {
console . log ( "long" ) ;
} ) ;
// next animation will override the above one:
Fat . animate ( "#mydiv" , { top : "100%" } , { duration : 400 } , function ( ) {
console . log ( "short" ) ;
} ) ;當您在同一對像樣式屬性上執行不同的動畫以並行運行時，就會出現並發問題。默認情況下，dupe動畫繼承了舊動畫，因此舊動畫不再存在。因此，從控制台上方的示例僅記錄“短”。
要強制欺騙動畫，您必須添加嚴格的選項：
// this animation cannot be overridden:
Fat . animate ( "#mydiv" , { top : "100%" } , { duration : 2000 , strict : true } , function ( ) {
console . log ( "long" ) ;
} ) ;
Fat . animate ( "#mydiv" , { top : "100%" } , { duration : 400 } , function ( ) {
console . log ( "short" ) ;
} ) ;現在，控制台在400ms之後將“短”和2000毫秒後的“長”登錄。儘管相同的屬性不能具有兩個不同的值，因此始終最早的動畫實際上會優先考慮。
考慮以下示例：
# mydiv { top : 0 px !important } Fat . animate ( "#mydiv" , { top : "100%" } ) ;CSS樣式聲明從上方具有關鍵字！很重要，並且可以防止正常樣式的變化。
要解決這個問題，您必須添加強制選項：
Fat . animate ( "#mydiv" , { top : "100%" } , { force : true } ) ; 這是一個實驗特徵。所有發動機都是獨立的，您只需使用自己喜歡的選擇就可以自定義。
| 引擎 | JS | CSS | 本國的 |
| 渲染器 | JavaScript（默認） | CSS過渡 | Web動畫API |
使用CSS過渡：
Fat . transition ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ;使用Web動畫API：
Fat . native ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ; 在生產構建中不要使用調試。
如果您遇到問題，則可以臨時將調試標誌設置為true在fat.js之上：
DEBUG = true ;這可以實現多個過程的控制台記錄。只需打開瀏覽器控制台即可使此信息可見。
不要在生產版中使用剖面。
要收集您場景的一些性能統計信息，您需要臨時將Profiler標誌設置為true 。
PROFILER = true ;這可以分析多個過程。
所有配置文件的數組可用：
window . stats ;您還可以打開瀏覽器控制台並輸入此行以獲取統計信息。
數組的索引對應於scene.id 。
從特定場景中獲取統計信息：
scene . stats ;返回的統計有效載荷分為幾個類別。這些類別中的每一個都提供了自己的統計值。
Profiler Stats屬性
| 財產 | 描述 |
| 時間 | 該過程所需的時間總數（MS）（較低） |
| 數數 | 該過程被調用多久 |
| 行動 | 平均操作每秒（較高越好） |
| 奈 | 每個操作/呼叫的平均成本（NS）（較低） |
您需要Node.js，包括Node軟件包管理器（NPM）
安裝依賴項：
npm install完整構建：
npm run build輕型建造：
npm run build-light緊湊的構建：
npm run build-compact自定義構建：
npm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=true在自定義構建上，每個構建標誌默認情況下將設置為false 。
或者（自定義構建）：
node compile support_control=true自定義構建將保存到fat.custom.xxxxx.js（“ xxxxx”是基於使用的構建標誌的哈希）。
支持的構建標誌
| 旗幟 | 值 |
| support_color | 是的，錯誤 |
| support_control | 是的，錯誤 |
| 支持_序列 | 是的，錯誤 |
| support_transform | 是的，錯誤 |
| support_filter | 是的，錯誤 |
| support_scroll | 是的，錯誤 |
| support_paint | 是的，錯誤 |
| support_relative | 是的，錯誤 |
| support_concurrency | 是的，錯誤 |
| support_easing | 是的，錯誤 |
| support_preset | 是的，錯誤 |
| support_engine | 字符串： “ ALL”，“ JS”，“ CSS”，“本機” /“ Waapi” |
| support_animate | 是的，false（覆蓋support_engine） |
| support_transition | 是的，false（覆蓋support_engine） |
| support_native | 是的，false（覆蓋support_engine） |
語言旗幟 | |
| Laging_out | ecmascript3 ecmascript5 ecmascript5_strict Ecmascript6 ecmascript6_strict Ecmascript_2015 Ecmascript_2017 穩定的 |
版權2019 NextApps GmbH
在Apache 2.0許可下發布
