fat
v0.6.8
Wenn es um Rohanimationsspeed geht, übertrifft Fat jede einzelne Webanimationsbibliothek da draußen und bietet auch flexible Animationsfunktionen wie Szenen, Sequenzen, Transformationen, Färben, Steuerung und Lockern.
Installationshandbuch • API -Referenz • Beispiele • Benutzerdefinierte Builds • Benchmark -Ranking
Holen Sie sich die neueste (stabile Veröffentlichung):
| Bauen | Datei | CDN |
| fat.min.js | Herunterladen | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js |
| fat.light.js | Herunterladen | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.light.js |
| fat.compact.js | Herunterladen | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.compact.js |
| fat.custom.js | Benutzerdefinierte Build |
Alle Funktionen:
| Besonderheit | fat.min.js | fat.compact.js | fat.light.js |
| Animation | X | X | X |
| Szenen (Gruppen) | X | X | X |
| Lockering Collection (benutzerdefinierte Bezier) | X | X | - - |
| Steuerung (Zeitleiste) | X | - - | - - |
| Sequenzen | X | - - | - - |
| Keyframes | X | - - | - - |
| Voreinstellungen (Effekte) | X | - - | - - |
| Transformationen (2D/3D) | X | X | - - |
| Filter | X | - - | - - |
| Farben | X | X | - - |
| Benutzerdefinierte Eigenschaften/Renderer | X | X | X |
| Relative Werte | X | - - | - - |
| Scrollen | X | - - | - - |
| Malen | X | - - | - - |
| Parallelität (strenger Modus) | X | - - | - - |
| Motoren rendern | JS, CSS3, WAAPI | JS | JS |
| Dateigröße (Gzip) | 7,0 kb | 4,5 kb | 1,9 kb |
Das Flags -Debug und der Profiler sind auch in Fat.js für die Nichtproduktion erhältlich.
Es ist auch sehr einfach, einen benutzerdefinierten Build zu erstellen
Bibliotheksvergleich: Benchmark "Bouncing Bugs"
"Animate" (2000 hüpfende Bälle)
| Rang | Bibliotheksname | Bibliotheksversion | Bibliotheksgröße | Speicherhaufen * | Speicherzuweisung ** | Aktualisierungen pro Sekunde | Rahmen pro Sekunde |
| 1 | FETT | 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 | Winzig | 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 (Übergang) | - - | - - | 0 MB | 0 MB | - - | 22.3 |
| 8 | Geschwindigkeit | 2.0.5 | 16,6 kb | 8,33 MB | 7,98 MB | 16820 | 6.3 |
| 9 | Animejs | 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 |
"Transforms" (2000 hüpfende Bälle)
| Rang | Bibliotheksname | Bibliotheksversion | Aktualisierungen pro Sekunde | Rahmen pro Sekunde |
| 1 | FETT | 0,6,6 | 91960 | 46.1 |
| 2 | Tweenjs | 1.0.2 | 67931 | 33 |
| 3 | GSAP | 2.0.2 | 50337 | 26 |
| 4 | Animejs | 2.2.0 | 41040 | 21.6 |
| 5 | HTML5 (WAAPI) | - - | - - | 16 |
| 6 | CSS3 (Übergang) | - - | - - | 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 |
"Farben" (2000 Blitzbälle)
| Rang | Bibliotheksname | Bibliotheksversion | Aktualisierungen pro Sekunde | Rahmen pro Sekunde |
| 1 | FETT | 0,6,6 | 113950 | 57 |
| 2 | GSAP | 2.0.2 | 89665 | 42,65 |
| 3 | Tweenjs | 1.0.2 | 89499 | 42 |
| 4 | Geschwindigkeit | 2.0.5 | 59617 | 31.25 |
| 5 | HTML5 (WAAPI) | - - | - - | 26,5 |
| 6 | Anim.js | - - | - - | 23 |
| 7 | CSS3 (Übergang) | - - | - - | 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 | Animejs | 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 |
Browser: Chrom (Desktop), Testdauer: 30 Sekunden (Medianwert)
* Speicherhaufen: Die Speichergröße, die die Animationen zum Ausführen benötigen
** Speicherzuweisung: Die Menge an Speicher, die während der Animationslaufzeit zugewiesen wurde
Bibliotheksvergleich: Benchmark "Bouncing Bugs"
< html >
< head >
< script src =" fat.min.js " > </ script >
</ head >
...Hinweis: Verwenden Sie Fat.min.js für Produktion und FAT.js für die Entwicklung.
Verwenden Sie die neueste stabile Version von CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js " > </ script >Verwenden Sie eine bestimmte Version von CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/[email protected]/fat.min.js " > </ script >Common JS
In Ihrem Code enthalten wie folgt:
var Fat = require ( "Fat" ) ;AMD
var Fat = require ( "./fat.min.js" ) ; Der Namespace "Fat" ist auch die Standardszene (globale Szene).
Globale Methoden / Szenenmethoden:
Kontrollmethoden:
| Option | Typ | Standard | Beschreibung |
| Start | Boolean | WAHR | Automatisch aktivieren/deaktivieren, wenn ein Animationsaufruf ausgeführt wurde |
| fps | Nummer | 60 | Rahmen pro Sekunde |
| Option | Typ | Standard | Beschreibung |
| Dauer | Nummer | 400 | Dauer der Animation (MS). |
| Leichtigkeit | String | Funktion | "linear" | Wählen Sie eine vordefinierte Locker-Methode oder übergeben Sie eine benutzerdefinierte Lockerungsfunktion. |
| Verzögerung | Nummer | 0 | Verzögerung der Animation (MS). |
| Rückruf | Funktion | NULL | Funktionen aufgerufen werden, wenn die Animation fertig ist. |
| Schritt | Funktion (Fortschritt, Wert) | NULL | Funktionen auf jeder Tick (Fortschritt: Der aktuelle Fortschrittszustand zwischen 0 und 1, Wert: Der aktuelle Wert einschließlich des Geräts, hilfreich bei Verwendung benutzerdefinierter Eigenschaften). |
| Schleife | Nummer | 0 | Schleifenzahl von Sequenzen oder Keyframes. Für unendliche Schleifen auf -1 einstellen. |
| init | Boolean | FALSCH | Kräfte, die berechnete Stile erhalten, wenn Sie die nächste Animationsschleife beginnen. Nur wichtig, wenn sich Styles im Animations -Rückruf ändert, kurz bevor eine neue Animation in derselben Style -Eigenschaft (Animationsschleife) beginnt. |
| Gewalt | Boolean | FALSCH | Kürztliche Veränderungen im Stil (gleich CSS -Keyword "! Wichtig"). |
| strikt | Boolean | FALSCH | Überschreiben Sie nicht und halten Sie verschiedene Animationen auf den Stileigenschaften desselben Objekts. |
| Motor | Saite | "JS" | Wählen Sie einen von 3 Render -Motoren: " JS ", " CSS ", " Native ". |
Fett. Animate (selector [] | Elements [], Styles [] {}, Optionen {}, Callback)
Fat . animate ( "#mydiv" , { left : "100px" } , { /* options */ } ) ;In einem Element, einer Reihe von Elementen oder einem DOM -Abfrage -Selektor übergeben.
Fat . animate ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// "this" refers to #mydiv
console . log ( this . style . left ) ;
}
} ) ;Sehen Sie sich alle verfügbaren Optionen an.
Geben Sie benutzerdefinierte Optionen für jede Style -Immobilie ein:
Fat . animate ( "#mydiv" , {
left : {
from : 0 ,
to : 100 ,
unit : "%" ,
duration : 2000 ,
ease : "linear"
} ,
top : {
from : 0 ,
to : "100%" ,
duration : 2000 ,
ease : "quadIn" ,
delay : 2000
}
} ) ;Das Übergeben eines Einheitsparameters ist etwas schneller.
"From-to-Unit" property: [from, to, unit] :
Fat . animate ( "#mydiv" , {
left : [ 0 , 100 , "%" ] , // from 0% to 100%
top : [ 0 , "100%" ] ,
} ) ;Alternativ die Rückruffunktion als letzter Parameter übergeben:
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
} ) ;Verzögern Sie eine Animation, bis das Zielelement in Sicht kommt (zB durch Scrollen):
Fat . animate ( "#mydiv" , { top : "100px" } , { delay : "view" } ) ; Berechnen Sie die Werte abhängig vom aktuellen Zustand:
// 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" } ) ;Schalten Sie die Werte ab, abhängig vom aktuellen Status:
// toggle current left (100% or 0%)
Fat . animate ( "#mydiv" , { left : "!=100%" } ) ; Separate Notation bietet die beste Leistung:
Fat . animate ( "#mydiv" , {
translateX : "100px" ,
translateY : "100px"
} ) ;Gleich wie:
Fat . transform ( "#mydiv" , { ... } ) ;Alternativ:
Fat . animate ( "#mydiv" , {
"transform" : "translate(100px, 100px)"
} ) ;Gleich wie:
Fat . transform ( "#mydiv" , "translate(100px, 100px)" ) ; Fat . animate ( "#mydiv" , {
color : "#f00" ,
backgroundColor : "rgba(0, 255, 0, 1)" ,
borderColor : "hsla(0, 100%, 100%, 1)"
} ) ;Separate Notation bietet die beste Leistung:
Fat . animate ( "#mydiv" , {
colorR : 0 ,
colorG : 0 ,
colorB : 0 ,
colorA : 0 ,
backgroundColorA : "100%" ,
borderColorB : 255
} ) ; Separate Notation bietet die beste Leistung:
Fat . animate ( "#mydiv" , {
brightness : 0.5 ,
contrast : 0.5 ,
hue : "180deg"
} ) ;Sie können den
huealshue-rotateverwenden
Gleich wie:
Fat . filter ( "#mydiv" , { ... } ) ;Alternativ:
Fat . animate ( "#mydiv" , {
"filter" : "brightness(0.5) contrast(0.5) hue(180deg)"
} ) ;Gleich wie:
Fat . filter ( "#mydiv" , "brightness(0.5) contrast(0.5) hue(180deg)" ) ; Eingebaute Lockerung:
Statische (vorgezogene) gegen dynamische Lockerung
Es gibt zwei Möglichkeiten, Lockerungsfunktionen zu definieren. Wenn Ihre Lockerung eine statische Kurve ist (wie Easy, Backinout, Elastic usw.) Fat.animate sollten Sie die Lockerung über Fat.ease["myEasing"] = fn() definieren. Dadurch werden alle Berechnungen vorgegeben, sodass Sie freie Definitionen mit wirklich hohen Lockerungen ohne Leistungsnachteile verwenden können.
Wenn Sie dynamische Lockerung verwenden möchten, die von Laufzeitberechnungen abhängt, sollten Sie die Lockerungsfunktion direkt an das Fat.animate übergeben. In diesem Fall wird die Lockerungsberechnung nicht vorab. Auf diese Weise können Sie die Lockerung programmgesteuert und die Logik während der Laufzeit hinzufügen.
Definieren Sie die benutzerdefinierte statische Lockerungsfunktion (1-Parameter-Stil):
Fat . ease [ "linear" ] = function ( x ) {
return x ;
} ;X : Strom Fortschritt (0,0 - 1,0)
Definieren Sie die benutzerdefinierte statische Lockerungsfunktion (4-Parameter-Stil):
Fat . ease [ "linear" ] = function ( t , b , c , d ) {
return b + ( c - b ) * ( t / d ) ;
} ;T : aktuelle Zeit, b : vom Wert, c : zu Wert, D : Dauer
Wenden Sie die benutzerdefinierte statische Lockerung an:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "linear" } ) ;Verwenden Sie kubische Bezier:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "cubic(0, 1, 0, 1)" } ) ;Die Kurz -Array -Notation für eine Bezier wird empfohlen:
... , { ease : [ 0 , 1 , 0 , 1 ] } ) ;Definieren Sie die benutzerdefinierte dynamische Lockerungsfunktion (1-Parameter-Stil):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( x ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ;Definieren Sie die benutzerdefinierte dynamische Lockerungsfunktion (4-Parameter-Stil):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( t , b , c , d ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ; Fett. Animate (Custom_Object [] {}, Custom_property [] {}, Optionen {})
Hinweis: Sie können nicht mehr als eine benutzerdefinierte Eigenschaft pro Animation in einem HTML -Element verwenden. Stattdessen gibt es keine Grenzen, wenn Sie benutzerdefinierte Objekteigenschaften animieren.
Fügen Sie einfach eine Eigenschaft mit dem Namen "Custom" hinzu:
Fat . animate ( "#mydiv" , {
custom : "50%"
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current ;
}
} ) ;Einheit separat verhalten:
Fat . animate ( "#mydiv" , {
custom : 50
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current + "%" ;
}
} ) ;Geben Sie benutzerdefinierte Objekt/Funktion als erster Parameter anstelle eines Elements ein:
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 + "%" ;
}
} ) ;Sie können auch Sequenzen verwenden:
... [ custom : 50 , custom : 0 , custom : 100 , custom : 0 ]Auf diese Weise ist es möglich, benutzerdefinierte Daten, Logik und Renderer durch jeden Animationsauftrag zu übergeben, z. B.:
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 ) ;
}
} ) ;Sie können auch eine Reihe von Objekten/Handlern verwenden:
Fat . animate ( [ handler1 , handler2 , handler3 ] , ...Wenn Sie die von/zu Übergangswerten überhaupt nicht benötigen, könnte ein weiteres Szenario sein:
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);
}
} ) ;Alternativ:
Fat . animate ( { } , { custom : true } , { step : function ( progress ) {
var current = cubicInOut ( progress ) ;
// console.log(current);
} } ) ;oder:
Fat . animate ( { } , { custom : 1 } , {
ease : cubicInOut ,
step : function ( progress , current ) {
// console.log(current);
}
} ) ;Tween benutzerdefinierte Objekteigenschaften:
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
} ) ;Verwenden Sie benutzerdefinierte Optionen pro Style -Eigenschaft:
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
} ) ;Verwenden Sie benutzerdefinierte Optionen pro Style -Eigenschaft:
Fat . animate ( "#mydiv" , {
"0%" : {
left : {
to : "100%" ,
ease : "easeIn"
}
} ,
"100%" : {
top : {
to : "0%" ,
ease : "easeOut"
}
}
} ,
... Fat . animate ( "#mydiv" , "fadeOut" ) ;Kombinieren Sie mehrere Voreinstellungen (bestellt):
Fat . animate ( "#mydiv" , "fadeOut zoomOut rollOutRight" ) ;Auch mit Sequenzen verwendbar:
Fat . animate ( "#mydiv" , [ "slideInTop" , "zoomIn" ] ) ;Definieren Sie die benutzerdefinierte Voreinstellung:
Fat . preset [ "fade-out-down" ] = {
opacity : 0 ,
translateY : "100%"
} ;Verwenden Sie die benutzerdefinierte Voreinstellung:
Fat . animate ( "#mydiv" , "fade-out-down" ) ;Gebaute Voreinstellungen:
Holen Sie sich die globale Szene (Standard):
var scene = Fat . animate ( element , { left : "100%" } ) ;Erstellen Sie eine neue Szene:
var scene = Fat . create ( ) ;Fügen Sie Animationen zu einer Szene hinzu:
scene . animate ( element , { left : "100%" } ) ;Szene zerstören:
scene . destroy ( ) ;Nützliches Beispiel
Berücksichtigung des folgenden Beispiels:
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 ( ) ;Alle Variablen weist auf dieselbe globale Szene hin, auf der "fett" im Grunde genommen basiert.
Dies ist die richtige Problemumgehung:
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 ( ) ;Erstellen Sie keine neuen Szenen massiv und erstellen Sie sie standardmäßig nicht. Eine große Menge paralleler Szenen führt zu einem Leistungsnachteil.
Fett verweist intern auf die globale Standardszene, sodass Sie alle Szenenmethoden entsprechend Fett verwenden können.
Einzelstil aktualisieren:
scene . set ( "#mydiv" , "left" , "0%" ) ;Aktualisieren Sie mehrere Stile:
scene . set ( "#mydiv" , { top : 0 , left : 0 } ) ;Entfernen Sie alle Animationen aus einem Objekt:
scene . remove ( "#mydiv" ) ;Entfernen Sie eine bestimmte Animation aus einem Objekt:
scene . remove ( "#mydiv" , "left" ) ;Entfernen Sie eine Liste spezifischer Animationen aus einem Objekt:
scene . remove ( "#mydiv" , [ "top" , "left" ] ) ;Pause eine Szene:
scene . pause ( ) ;Alternativ:
scene . start ( false ) ;Spielen Sie eine Szene:
scene . start ( ) ;Alternativ:
scene . pause ( false ) ;Wiedergabe zurückkehren (Wechsel):
scene . reverse ( ) ;Alternativ einstellen Richtung:
scene . reverse ( false ) ;Wiedergabe des Wiedergabestatus und zurück zum Start:
scene . reset ( ) ;Beenden und auch einen Rückruf ausführen:
scene . finish ( ) ;Wiedergabegeschwindigkeit festlegen:
scene . speed ( 0.5 ) ; // half
scene . speed ( 1 ) ; // normal
scene . speed ( 2 ) ; // double
scene . speed ( - 2 ) ; // double (reversed direction)Suchen Sie eine Szene zu einer bestimmten Position:
scene . seek ( 0 ) ; // start
scene . seek ( 0.5 ) ; // middle
scene . seek ( 1 ) ; // endVerschieben Sie eine Szene relativ zur aktuellen Position (nach Millisekunden):
scene . shift ( 2000 ) ; // current + 2000 ms
scene . shift ( - 500 ) ; // current - 500 msSchleifensequenzen und umgekehrte Richtung
Wenn Sie die Animationsrichtung (z. B. durch Einstellen von Geschwindigkeit <0) umgekehrt sind, müssen Sie für jeden Stil ein umgekehrtes Animationsrichtungsrichtung bestehen. Andernfalls geht der From-Value-Wert beim Rückschleifen aus der umgekehrten Richtung verloren.
var scene = Fat . animate ( element , [ {
left : { from : "0%" , to : "50%" }
} , {
left : { from : "50%" , to : "0%" }
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;Alternativ von der Kurzform verwenden:
var scene = Fat . animate ( element , [ {
left : [ 0 , 50 , "%" ]
} , {
left : [ 50 , 0 , "%" ]
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;Alternativ verwenden Sie den relativen Umschalten:
var scene = Fat . animate ( element , [ {
left : "!=50%"
} , {
left : "!=0%"
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ; Bildlaufdokument/Element in eine bestimmte Position (vertikal):
Fat . animate ( element , { scrollTop : 500 } ) ;Scrollen Sie horizontal:
Fat . animate ( element , { scrollLeft : 500 } ) ; Scrollen Sie in beide Richtungen scroll: [x, y] :
Fat . animate ( element , { scroll : [ 500 , 500 ] } ) ;Verwenden Sie relative Werte:
Fat . animate ( element , { scroll : "+=50" } ) ; Planen Sie eine Aufgabe, die Sie während des nächsten Animationsrahmens ausführen sollen:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} ) ;Planen Sie eine Aufgabe mit einer Verzögerung und behalten Sie die Lack -ID:
var id = Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} , 2000 ) ;Entfernen Sie die oben geplante Aufgabe aus der Warteschlange:
Fat . cancel ( id ) ;Schleifen Sie eine Aufgabe mit jedem Animationsrahmen:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
return true ;
} ) ;Kehren Sie einfach treu zurück, um die Schleife am Leben zu erhalten. Rückgabe falsch oder kehren Sie nichts zurück, um die Schleife zu brechen.
Berücksichtigung des folgenden Beispiels:
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // this style change will be shadowed
Fat . animate ( this , { top : "100%" } ) ;
} ) ;Dies wird als Animationsschleife bezeichnet, der Callback erstellt eine neue Animation in derselben Objektstil -Eigenschaft. Technisch gesehen wird der Rückruf während des letzten Frame der ersten Animation ausgeführt. Daher werden noch eine Animation in dieser Eigenschaft ausgeführt und wird durch die nächste Animationsschleife vererbt.
Während des Rückrufs werden externe Änderungen in derselben Style -Eigenschaft, die animiert werden, durch die Animationsschleife erbelt.
Wenn die Stiländerung nicht extern (z. B. nach einem anderen Tool) stattfand), verwenden Sie die SET -Methode, um die beste Leistung zu erzielen:
Fat . animate ( element , { top : "100%" } , function ( ) {
Fat . set ( this , "top" , 0 ) . animate ( this , { top : "100%" } ) ;
} ) ;Andernfalls müssen Sie die Init -Option hinzufügen, um diese Situation zu lösen:
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // external change somewhere happens
Fat . animate ( this , { top : "100%" } , { init : true } ) ;
} ) ;Auch dieses Problem tritt nur bei der Verwendung von Animationsschleifen auf, gemischt mit den Änderungen des manuellen Stils auf derselben Style -Eigenschaft während des Rückrufs kurz vor dem Aufrufen der neuen Animationsschleife.
Berücksichtigung des folgenden Beispiels:
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" ) ;
} ) ;Wenn Sie unterschiedliche Animationen in denselben Objektstileigenschaften ausführen, die parallel ausgeführt werden sollen, gibt es ein Problem mit der Parallelität. Standardmäßig erbt eine Dupe -Animation die alte, sodass die alte Animation nicht mehr existiert. Dementsprechend protokolliert das Beispiel von oben der Konsole nur "kurz".
Um betrogene Animationen zu erzwingen, müssen Sie die strenge Option hinzufügen:
// 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" ) ;
} ) ;Jetzt loget sich die Konsole nach 400 ms und "lang" nach 2000 ms "kurz". Obwohl die gleichen Eigenschaften nicht zwei unterschiedliche Werte haben können, wird die Animation immer die am meisten begonnene Animation tatsächlich priorisiert.
Berücksichtigung des folgenden Beispiels:
# mydiv { top : 0 px !important } Fat . animate ( "#mydiv" , { top : "100%" } ) ;Die CSS -Stilerklärung von oben hat das Schlüsselwort ! Wichtig und verhindern normale Änderungen im Stil.
Um dies zu lösen, müssen Sie die Kraftoption hinzufügen:
Fat . animate ( "#mydiv" , { top : "100%" } , { force : true } ) ; Dies ist ein experimentelles Merkmal. Alle Motoren sind eigenständig, Sie können einen benutzerdefinierten Build nur mit Ihrer Lieblingsauswahl erstellen.
| Motor | JS | CSS | einheimisch |
| Renderer | JavaScript (Standard) | CSS -Übergang | Webanimations -API |
Verwenden Sie CSS -Übergänge:
Fat . transition ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ;Verwenden Sie die Webanimations -API:
Fat . native ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ; Verwenden Sie kein Debugg in Produktionsbauten.
Wenn Sie Probleme erhalten, können Sie die Debug -Flagge vorübergehend auf TRUE auf FAT.JS einstellen:
DEBUG = true ;Dies ermöglicht die Konsolenprotokollierung mehrerer Prozesse. Öffnen Sie einfach die Browser -Konsole, um diese Informationen sichtbar zu machen.
Verwenden Sie den Profiler nicht in Produktionsbauten.
Um einige Leistungsstatistiken Ihrer Szenen zu sammeln, müssen Sie die Profiler -Flagge auf TRUE auf Fat.js festlegen:
PROFILER = true ;Dies ermöglicht die Profilierung mehrerer Prozesse.
Eine Reihe aller Profile ist verfügbar unter:
window . stats ;Sie können auch die Browser -Konsole öffnen und diese Zeile eingeben, um Statistiken zu erhalten.
Der Index des Arrays entspricht der Szene .
Holen Sie sich Statistiken aus einer bestimmten Szene:
scene . stats ;Die Rückzahlungsnutzlast ist in mehrere Kategorien unterteilt. Jede dieser Kategorien liefert ihre eigenen statistischen Werte.
Profiler -Statistikeigenschaften
| Eigentum | Beschreibung |
| Zeit | Die Zeitsumme (MS) Der Prozess dauert (niedriger ist besser) |
| zählen | Wie oft wurde der Prozess genannt |
| Ops | Durchschnittliche Operationen pro Sekunden (höher ist besser) |
| Nano | Durchschnittliche Kosten (NS) pro Betrieb/Anruf (niedriger ist besser) |
Sie benötigen node.js, einschließlich Node Package Manager (NPM)
Abhängigkeiten installieren:
npm installVoller Build:
npm run buildLichtbau:
npm run build-lightKompakte Build:
npm run build-compactBenutzerdefinierte Build:
npm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=trueBei benutzerdefinierten Builds wird jedes Build -Flag standardmäßig auf false gesetzt.
Alternativ (benutzerdefinierte Build):
node compile support_control=trueDer benutzerdefinierte Build wird auf fat.custom.xxxxx.js gespeichert (das "xxxxx" ist ein Hash, der auf den gebrauchten Build -Flags basiert).
Unterstützte Build Flags
| Flagge | Werte |
| Support_Color | Richtig, falsch |
| Support_Control | Richtig, falsch |
| Support_sequence | Richtig, falsch |
| Support_transform | Richtig, falsch |
| Support_filter | Richtig, falsch |
| Support_Scroll | Richtig, falsch |
| Support_paint | Richtig, falsch |
| Support_relative | Richtig, falsch |
| Support_Concurrency | Richtig, falsch |
| Support_eassing | Richtig, falsch |
| Support_preset | Richtig, falsch |
| Support_Engine | String: "All", "JS", "CSS", "Native" / "Waapi" |
| Support_animate | Richtig, false (überschreibt Support_Engine) |
| Support_Transition | Richtig, false (überschreibt Support_Engine) |
| Support_native | Richtig, false (überschreibt Support_Engine) |
Sprachflaggen | |
| Language_out | Ecmascript3 Ecmascript5 Ecmascript5_strict Ecmascript6 Ecmascript6_strict Ecmascript_2015 Ecmascript_2017 STABIL |
Copyright 2019 NextApps GmbH
Veröffentlicht unter der Apache 2.0 -Lizenz
