fat
v0.6.8
RAWアニメーションに関しては、Speed FatはすべてのWebアニメーションライブラリをアウトパフォーマンスし、シーン、シーケンス、変換、着色、制御、緩和などの柔軟なアニメーション機能を提供します。
インストールガイド•APIリファレンス•例•カスタムビルド•ベンチマークランキング
最新の（安定したリリース）：
| 建てる | ファイル | CDN |
| fat.min.js | ダウンロード | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js |
| fat.light.js | ダウンロード | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.light.js |
| fat.compact.js | ダウンロード | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.compact.js |
| fat.custom.js | カスタムビルド |
すべての機能：
| 特徴 | fat.min.js | fat.compact.js | fat.light.js |
| アニメーション | x | x | x |
| シーン（グループ） | x | x | x |
| コレクションを緩和する（カスタムベジエ） | 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 |
Flags DebugとProfilerは、非生産用にfat.jsでも利用できます。
また、カスタムビルドを作成するのも非常に簡単です
ライブラリの比較：ベンチマーク「バウンスボール」
「アニメート」（2000バウンスボール）
| ランク | ライブラリ名 | ライブラリバージョン | ライブラリサイズ | メモリヒープ * | メモリ割り当て** | 1秒あたりの更新 | 1秒あたりのフレーム |
| 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 | 道場 | 1.14.2 | 53.0 kb | 9.1 MB | 6.5 MB | 10607 | 2.3 |
| 12 | モルフェウス | 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 | ジャスタンライテン | 2.5.1 | 7.3 kb | 109.5 MB | 61.18 MB | 5087 | 0.6 |
| 16 | ユイ | 3.18.1 | 24.4 kb | 159.59 MB | 88.35 MB | 2182 | 0.5 |
| 17 | ゼプト | 1.2.0 | 11.0 kb | 40.14 MB | 18.49 MB | - | 0.3 |
「変換」（2000バウンスボール）
| ランク | ライブラリ名 | ライブラリバージョン | 1秒あたりの更新 | 1秒あたりのフレーム |
| 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 | ゼプト | 1.2.0 | - | 12.4 |
| 8 | モルフェウス | 0.7.2 | 6665 | 3.3 |
| 9 | Bajs | 1.0 | - | 1 |
| 10 | ジャスタンライテン | 2.5.1 | 1218 | 0.3 |
| 11 | jquery | 3.3.1 | 309 | 0.01 |
「Colors」（2000フラッシュボール）
| ランク | ライブラリ名 | ライブラリバージョン | 1秒あたりの更新 | 1秒あたりのフレーム |
| 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 | ユイ | 3.18.1 | 84287 | 14.7 |
| 9 | Mootools | 1.6.0 | 8123 | 13.3 |
| 10 | 道場 | 1.14.2 | 33004 | 11.1 |
| 11 | アニメジ | 2.2.0 | 12483 | 6.3 |
| 12 | jquery | 3.3.1 | 7002 | 4 |
| 13 | モルフェウス | 0.7.2 | 3902 | 3.2 |
| 14 | ゼプト | 1.2.0 | - | 2 |
| 15 | ジャスタンライテン | 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を使用し、開発にはfat.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 | 1秒あたりのフレーム |
| オプション | タイプ | デフォルト | 説明 |
| 間隔 | 番号 | 400 | アニメーションの期間（MS）。 |
| 容易に | 文字列|関数 | "リニア" | 事前に定義された緩和方法を選択するか、カスタム緩和機能に合格します。 |
| 遅れ | 番号 | 0 | アニメーションの遅延（MS）。 |
| 折り返し電話 | 関数 | ヌル | アニメーションが終了したときに呼び出される機能。 |
| ステップ | 関数（進捗、価値） | ヌル | 各ダニ（進行状況：0から1の間の現在の進行状態、値：ユニットを含む現在の値、カスタムプロパティを使用する場合に役立つ現在の値）で呼び出される機能）。 |
| ループ | 番号 | 0 | シーケンスまたはキーフレームのループカウント。無限ループの場合は-1に設定します。 |
| init | ブール | 間違い | 次のアニメーションループを開始するときに、計算されたスタイルを取得します。同じスタイルプロパティ（アニメーションループ）で新しいアニメーションを開始する直前に、スタイルがアニメーションコールバック内で変更される場合に重要です。 |
| 力 | ブール | 間違い | フォーススタイルの変更（CSSキーワード "！fality"に等しい）。 |
| 厳しい | ブール | 間違い | 同じオブジェクトのスタイルプロパティで異なるアニメーションをオーバーライドして保持しないでください。 |
| エンジン | 弦 | 「JS」 | 3つのレンダリングエンジンのいずれかを選択します：「 JS 」、「 CSS 」、「ネイティブ」。 |
脂肪。 Animate （selector [] | elemention []、styles [] {}、options {}、callback）
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"
} ) ;速い
huehue-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)" ) ; 組み込み緩和：
静的（事前にキャッシュ）と動的緩和
緩和機能を定義するには、2つの方法があります。緩和が静的曲線（Easein、Backinout、Elasticなど）である場合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 ：値、 D ：期間
カスタム静的緩和を適用します：
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "linear" } ) ;Cubic 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 ;
} ) ;ループを生かしておくために真に返すだけです。虚偽を返すか、ループを破るために何も返しません。
次の例を考慮してください。
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" ) ;
} ) ;同じオブジェクトスタイルのプロパティで異なるアニメーションを実行して並行して実行すると、並行性の問題があります。デフォルトでは、デュペアニメーションが古いアニメーションを継承するため、古いアニメーションはもう存在しません。したがって、上の例には、コンソールが「ショート」を記録するだけです。
dupedアニメーションを強制するには、厳格なオプションを追加する必要があります。
// 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後に「ショート」と2000msの後に「長い」ログを記録します。同じプロパティは2つの異なる値を持つことはできませんが、常に最も早い段階で開始されたアニメーションが実際に優先順位を付けられます。
次の例を考慮してください。
# 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 ) ;
}
} ) ; 生産ビルドでデバッグを使用しないでください。
問題が発生した場合、 Debugフラグをfat.jsの上にTrueに一時的に設定できます。
DEBUG = true ;これにより、複数のプロセスのコンソールログを可能にします。この情報を表示するために、ブラウザコンソールを開くだけです。
プロダクションビルドでプロファイラーを使用しないでください。
シーンのパフォーマンス統計を収集するには、 fat.jsの上にプロファイラーフラグをTrueに設定する必要があります。
PROFILER = true ;これにより、いくつかのプロセスのプロファイリングが可能になります。
すべてのプロファイルの配列は次のとおりです。
window . stats ;また、ブラウザコンソールを開いてこの行を入力して統計を取得することもできます。
配列のインデックスは、 scene.idに対応しています。
特定のシーンから統計を取得します。
scene . stats ;返される統計ペイロードは、いくつかのカテゴリに分割されます。これらの各カテゴリは、独自の統計値を提供します。
プロファイラー統計プロパティ
| 財産 | 説明 |
| 時間 | 時間の合計（MS）プロセスが必要です（低い方が良い） |
| カウント | プロセスがどのくらいの頻度で呼び出されましたか |
| ops | 1秒あたりの平均操作（高い方が良い） |
| ナノ | 操作/通話あたりの平均コスト（NS）（低い方が良い） |
ノードパッケージマネージャー（npm）を含むnode.jsが必要です
依存関係をインストールします：
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_sequence | 本当、偽 |
| support_transform | 本当、偽 |
| support_filter | 本当、偽 |
| support_scroll | 本当、偽 |
| support_paint | 本当、偽 |
| support_relative | 本当、偽 |
| support_concurrency | 本当、偽 |
| support_easing | 本当、偽 |
| support_preset | 本当、偽 |
| support_engine | 文字列： "all"、 "js"、 "css"、 "native" / "waapi" |
| support_animate | True、false（support_engineをオーバーライド） |
| support_transition | True、false（support_engineをオーバーライド） |
| support_native | True、false（support_engineをオーバーライド） |
言語アウトフラグ | |
| Language_out | ecmascript3 ecmascript5 ecmascript5_strict ecmascript6 ecmascript6_strict ECMAScript_2015 ECMAScript_2017 安定した |
Copyright 2019 NextApps Gmbh
Apache 2.0ライセンスの下でリリースされました
