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许可下发布
