fat
v0.6.8
En ce qui concerne la vitesse d'animation brute, la graisse surpasse chaque bibliothèque d'animation Web et offre également des capacités d'animation flexibles comme des scènes, des séquences, des transformations, des colorants, du contrôle et de l'assouplissement.
Guide d'installation • Référence de l'API • Exemples • Bâtiments personnalisés • Classement de référence
Obtenez la dernière (version stable):
| Construire | Déposer | Monnaie |
| fat.min.js | Télécharger | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js |
| fat.light.js | Télécharger | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.light.js |
| fat.compact.js | Télécharger | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.compact.js |
| fat.custom.js | Construction personnalisée |
Toutes les fonctionnalités:
| Fonctionnalité | fat.min.js | fat.compact.js | fat.light.js |
| Animation | x | x | x |
| Scènes (groupes) | x | x | x |
| Collection d'assouplissement (Custom Bezier) | x | x | - |
| Contrôle (chronologie) | x | - | - |
| Séquences | x | - | - |
| Images clés | x | - | - |
| Préréglages (effets) | x | - | - |
| Transforme (2D / 3D) | x | x | - |
| Filtre | x | - | - |
| Couleurs | x | x | - |
| Propriétés personnalisées / rendu | x | x | x |
| Valeurs relatives | x | - | - |
| Rouleau | x | - | - |
| Peinture | x | - | - |
| Concurrence (mode strict) | x | - | - |
| Rendre les moteurs | JS, CSS3, WAAPI | Js | Js |
| Taille du fichier (GZIP) | 7,0 Ko | 4,5 Ko | 1,9 Ko |
Le débogage des drapeaux et le profileur sont également disponibles dans FAT.js pour l'utilisation de non-production.
Il est également très simple de faire une construction personnalisée
Comparaison de la bibliothèque: Benchmark "Bouncing Balls"
"Animate" (2000 Boundcing Balls)
| Rang | Nom de bibliothèque | Version de la bibliothèque | Taille de la bibliothèque | Tas de mémoire * | Attribution de la mémoire ** | Mises à jour par seconde | Cadres par seconde |
| 1 | GRAISSE | 0.6.6 | 1,9 Ko | 0,85 Mb | 0,15 Mb | 103954 | 51.5 |
| 2 | Gsap | 2.0.2 | 25,8 Ko | 28,32 Mb | 8,1 MB | 87249 | 43.1 |
| 3 | Tweenjs | 1.0.2 | 8,3 Ko | 3,16 MB | 3,1 Mb | 69647 | 34.4 |
| 4 | Html5 (waapi) | - | - | 0,91 Mb | 0,75 Mb | - | 32.2 |
| 5 | Minuscule | 0.4.0 | 1,5 Ko | 1,93 MB | 1,98 MB | 28801 | 29 |
| 6 | Dérivrations | 1.6.0 | 31.2 Ko | 3,14 MB | 3,42 MB | 26919 | 25.2 |
| 7 | CSS3 (transition) | - | - | 0 Mb | 0 Mb | - | 22.3 |
| 8 | Vitesse | 2.0.5 | 16,6 Ko | 8,33 MB | 7,98 MB | 16820 | 6.3 |
| 9 | Animejs | 2.2.0 | 5,9 Ko | 7,14 MB | 8,2 Mb | 9877 | 2.8 |
| 10 | Anim.js | - | 1,9 Ko | 7,08 MB | 9,49 Mb | 6994 | 2.8 |
| 11 | Dojo | 1.14.2 | 53,0 Ko | 9.1 Mb | 6,5 Mb | 10607 | 2.3 |
| 12 | Morphée | 0.7.2 | 2,7 Ko | 4 Mb | 2,97 MB | 8543 | 2.1 |
| 13 | jquery | 3.3.1 | 30,0 Ko | 25,14 MB | 25,16 Mb | 7206 | 1.3 |
| 14 | bajs | 1.0 | 1,2 ko | 1,25 Mo | 0,91 Mb | - | 0.8 |
| 15 | Justice | 2.5.1 | 7,3 Ko | 109,5 Mb | 61,18 Mb | 5087 | 0.6 |
| 16 | Yui | 3.18.1 | 24,4 Ko | 159,59 MB | 88,35 Mb | 2182 | 0,5 |
| 17 | Zepto | 1.2.0 | 11.0 Ko | 40,14 Mb | 18,49 Mb | - | 0.3 |
"Transforts" (2000 balles rebondissantes)
| Rang | Nom de bibliothèque | Version de la bibliothèque | Mises à jour par seconde | Cadres par seconde |
| 1 | GRAISSE | 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 (transition) | - | - | 15.5 |
| 7 | Zepto | 1.2.0 | - | 12.4 |
| 8 | Morphée | 0.7.2 | 6665 | 3.3 |
| 9 | bajs | 1.0 | - | 1 |
| 10 | Justice | 2.5.1 | 1218 | 0.3 |
| 11 | jquery | 3.3.1 | 309 | 0,01 |
"Couleurs" (2000 balles clignotantes)
| Rang | Nom de bibliothèque | Version de la bibliothèque | Mises à jour par seconde | Cadres par seconde |
| 1 | GRAISSE | 0.6.6 | 113950 | 57 |
| 2 | Gsap | 2.0.2 | 89665 | 42.65 |
| 3 | Tweenjs | 1.0.2 | 89499 | 42 |
| 4 | Vitesse | 2.0.5 | 59617 | 31.25 |
| 5 | Html5 (waapi) | - | - | 26.5 |
| 6 | Anim.js | - | - | 23 |
| 7 | CSS3 (transition) | - | - | 20.6 |
| 8 | Yui | 3.18.1 | 84287 | 14.7 |
| 9 | Dérivrations | 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 | Morphée | 0.7.2 | 3902 | 3.2 |
| 14 | Zepto | 1.2.0 | - | 2 |
| 15 | Justice | 2.5.1 | 4283 | 1 |
| 16 | bajs | 1.0 | - | 0.7 |
Navigateur: Chrome (bureau), durée du test: 30 sec (valeur médiane)
* Tas de mémoire: la taille de la mémoire que les animations nécessitent d'exécuter
** Attribution de la mémoire: la quantité de mémoire qui a été allouée pendant le temps d'exécution de l'animation
Comparaison de la bibliothèque: Benchmark "Bouncing Balls"
< html >
< head >
< script src =" fat.min.js " > </ script >
</ head >
...Remarque: Utilisez fat.min.js pour la production et les fat.js pour le développement.
Utilisez la dernière version stable de CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js " > </ script >Utilisez une version spécifique de CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/[email protected]/fat.min.js " > </ script >Js commun
Dans votre code, incluez comme suit:
var Fat = require ( "Fat" ) ;DMLA
var Fat = require ( "./fat.min.js" ) ; L'espace de noms "Fat" est également la scène par défaut (scène globale).
Méthodes globales / méthodes de scène:
Méthodes de contrôle:
| Option | Taper | Défaut | Description |
| commencer | Booléen | vrai | Activer / désactiver la lecture automatique lorsqu'un appel d'animation a été effectué |
| FPS | Nombre | 60 | Cadres par seconde |
| Option | Taper | Défaut | Description |
| durée | Nombre | 400 | Durée de l'animation (MS). |
| facilité | String | Fonction | "linéaire" | Choisissez une méthode d'assistance prédéfinie ou passez une fonction de soulagement personnalisée. |
| retard | Nombre | 0 | Retard de l'animation (MS). |
| rappel | Fonction | nul | Fonction à appeler lorsque l'animation est terminée. |
| étape | Fonction (progrès, valeur) | nul | Fonction à appeler sur chaque tick (progrès: l'état actuel de progrès entre 0 et 1, valeur: la valeur actuelle comprenant l'unité, utile lorsque vous utilisez des propriétés personnalisées). |
| boucle | Nombre | 0 | Count de boucle de séquences ou de images clés. Réglé sur -1 pour les boucles infinies. |
| init | Booléen | FAUX | Forces Obtenir des styles calculés lors du démarrage de la prochaine boucle d'animation. Juste important lorsque Styles change dans le rappel d'animation juste avant de démarrer une nouvelle animation sur la même propriété de style (boucle d'animation). |
| forcer | Booléen | FAUX | Forces Style Changes (égal au mot clé CSS "! IMPORTANT"). |
| strict | Booléen | FAUX | Ne pas remplacer et garder différentes animations agissent sur les propriétés de style du même objet. |
| moteur | Chaîne | "JS" | Choisissez l'un des 3 moteurs de rendu: " JS ", " CSS ", " Native ". |
Graisse. animer (sélecteur [] | elements [], styles [] {}, options {}, rappel)
Fat . animate ( "#mydiv" , { left : "100px" } , { /* options */ } ) ;Passer dans un élément, un tableau d'éléments ou un sélecteur de requête 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 ) ;
}
} ) ;Voir toutes les options disponibles ci-dessus.
Passez des options personnalisées pour chaque propriété de style:
Fat . animate ( "#mydiv" , {
left : {
from : 0 ,
to : 100 ,
unit : "%" ,
duration : 2000 ,
ease : "linear"
} ,
top : {
from : 0 ,
to : "100%" ,
duration : 2000 ,
ease : "quadIn" ,
delay : 2000
}
} ) ;Le passage d'un paramètre unitaire est légèrement plus rapide.
property: [from, to, unit] :
Fat . animate ( "#mydiv" , {
left : [ 0 , 100 , "%" ] , // from 0% to 100%
top : [ 0 , "100%" ] ,
} ) ;Alternativement passer la fonction de rappel comme le dernier paramètre:
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
} ) ;Retarder une animation jusqu'à ce que l'élément cible soit en vue (par exemple en faisant défiler):
Fat . animate ( "#mydiv" , { top : "100px" } , { delay : "view" } ) ; Calculer les valeurs en fonction de l'état actuel:
// 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" } ) ;Basculer les valeurs en fonction de l'état actuel:
// toggle current left (100% or 0%)
Fat . animate ( "#mydiv" , { left : "!=100%" } ) ; La notation séparée offre les meilleures performances:
Fat . animate ( "#mydiv" , {
translateX : "100px" ,
translateY : "100px"
} ) ;Idem que:
Fat . transform ( "#mydiv" , { ... } ) ;Alternativement:
Fat . animate ( "#mydiv" , {
"transform" : "translate(100px, 100px)"
} ) ;Idem que:
Fat . transform ( "#mydiv" , "translate(100px, 100px)" ) ; Fat . animate ( "#mydiv" , {
color : "#f00" ,
backgroundColor : "rgba(0, 255, 0, 1)" ,
borderColor : "hsla(0, 100%, 100%, 1)"
} ) ;La notation séparée offre les meilleures performances:
Fat . animate ( "#mydiv" , {
colorR : 0 ,
colorG : 0 ,
colorB : 0 ,
colorA : 0 ,
backgroundColorA : "100%" ,
borderColorB : 255
} ) ; La notation séparée offre les meilleures performances:
Fat . animate ( "#mydiv" , {
brightness : 0.5 ,
contrast : 0.5 ,
hue : "180deg"
} ) ;Vous pouvez utiliser la
hueabrégée commehue-rotate
Idem que:
Fat . filter ( "#mydiv" , { ... } ) ;Alternativement:
Fat . animate ( "#mydiv" , {
"filter" : "brightness(0.5) contrast(0.5) hue(180deg)"
} ) ;Idem que:
Fat . filter ( "#mydiv" , "brightness(0.5) contrast(0.5) hue(180deg)" ) ; Soulage intégré:
STATIQUE (pré-cache) vs assouplissement dynamique
Il existe deux façons de définir les fonctions d'assouplissement. Lorsque votre assouplissement est une courbe statique (comme la facilité, le backinout, l'élastique, etc.), vous devez définir l'assouplissement via Fat.ease["myEasing"] = fn() et simplement passer le nom sous forme de chaîne dans les options Fat.animate . Cela préfectera tous les calculs, vous êtes donc libre d'utiliser des définitions d'assistance vraiment lourdes sans aucun inconvénient des performances.
Lorsque vous souhaitez utiliser un assouplissement dynamique, qui dépend des calculs d'exécution, vous devez transmettre la fonction de soulagement directement aux options Fat.animate . Dans ce cas, le calcul d'assouplissement ne se préservera pas. Cela vous permet de contrôler l'assouplissement par programme et d'ajouter une logique pendant l'exécution.
Définissez la fonction d'assistance statique personnalisée (style à 1 paramètre):
Fat . ease [ "linear" ] = function ( x ) {
return x ;
} ;X : progrès actuel (0,0 - 1,0)
Définissez la fonction d'assistance statique personnalisée (style à 4 paramètres):
Fat . ease [ "linear" ] = function ( t , b , c , d ) {
return b + ( c - b ) * ( t / d ) ;
} ;T : Heure actuelle, b : de la valeur, c : à la valeur, D : durée
Appliquer l'assouplissement statique personnalisé:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "linear" } ) ;Utilisez Cubic Bezier:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "cubic(0, 1, 0, 1)" } ) ;La notation du tableau des sténages pour un Bezier est recommandée:
... , { ease : [ 0 , 1 , 0 , 1 ] } ) ;Définir la fonction d'assistance dynamique personnalisée (style à 1 paramètre):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( x ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ;Définir la fonction d'assouplissement dynamique personnalisé (style à 4 paramètres):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( t , b , c , d ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ; Graisse. animate (personnalisé_object [] {}, personnalisé_property [] {}, options {})
Remarque: vous ne pouvez pas utiliser plus d'une propriété personnalisée par animation sur un élément HTML. Au lieu de cela, lors de l'animation des propriétés des objets personnalisés, il n'y a pas de limites.
Ajoutez simplement une propriété avec le nom "Custom":
Fat . animate ( "#mydiv" , {
custom : "50%"
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current ;
}
} ) ;Gire l'unité séparément:
Fat . animate ( "#mydiv" , {
custom : 50
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current + "%" ;
}
} ) ;Passez un objet / fonction personnalisé comme premier paramètre au lieu d'un élément:
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 + "%" ;
}
} ) ;Vous pouvez également utiliser des séquences:
... [ custom : 50 , custom : 0 , custom : 100 , custom : 0 ]De cette façon, il est possible de transmettre des données personnalisées, une logique et un rendu à travers chaque travail d'animation, par exemple:
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 ) ;
}
} ) ;Vous pouvez également utiliser une table d'objets / gestionnaires:
Fat . animate ( [ handler1 , handler2 , handler3 ] , ...Si vous n'avez pas du tout besoin des valeurs de transition de / à / pour un autre scénario:
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);
}
} ) ;Alternativement:
Fat . animate ( { } , { custom : true } , { step : function ( progress ) {
var current = cubicInOut ( progress ) ;
// console.log(current);
} } ) ;ou:
Fat . animate ( { } , { custom : 1 } , {
ease : cubicInOut ,
step : function ( progress , current ) {
// console.log(current);
}
} ) ;Tween Propriétés des objets personnalisés:
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
} ) ;Utilisez des options personnalisées par la propriété de style:
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
} ) ;Utilisez des options personnalisées par la propriété de style:
Fat . animate ( "#mydiv" , {
"0%" : {
left : {
to : "100%" ,
ease : "easeIn"
}
} ,
"100%" : {
top : {
to : "0%" ,
ease : "easeOut"
}
}
} ,
... Fat . animate ( "#mydiv" , "fadeOut" ) ;Combiner plusieurs préréglages (ordonnés):
Fat . animate ( "#mydiv" , "fadeOut zoomOut rollOutRight" ) ;Aussi utilisable avec des séquences:
Fat . animate ( "#mydiv" , [ "slideInTop" , "zoomIn" ] ) ;Définir le préréglage personnalisé:
Fat . preset [ "fade-out-down" ] = {
opacity : 0 ,
translateY : "100%"
} ;Utilisez un préréglage personnalisé:
Fat . animate ( "#mydiv" , "fade-out-down" ) ;Presets intégrés:
Obtenez la scène globale (par défaut):
var scene = Fat . animate ( element , { left : "100%" } ) ;Créez une nouvelle scène:
var scene = Fat . create ( ) ;Ajouter des animations à une scène:
scene . animate ( element , { left : "100%" } ) ;Scène de détruire:
scene . destroy ( ) ;Exemple utile
Considérant l'exemple suivant:
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 ( ) ;Toutes les variables pointent vers la même scène globale sur laquelle est "la graisse" basée sur.
C'est la bonne solution:
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 ( ) ;Ne créez pas massivement de nouvelles scènes et ne les créez pas non plus par défaut. Une grande quantité de scènes parallèles entraîne un inconvénient des performances.
FAT pointe en interne vers la scène globale par défaut, vous pouvez donc utiliser toutes les méthodes de scène sur la graisse en conséquence.
Mettre à jour le style unique:
scene . set ( "#mydiv" , "left" , "0%" ) ;Mettre à jour plusieurs styles:
scene . set ( "#mydiv" , { top : 0 , left : 0 } ) ;Supprimer toutes les animations d'un objet:
scene . remove ( "#mydiv" ) ;Supprimer une animation spécifique d'un objet:
scene . remove ( "#mydiv" , "left" ) ;Supprimez une liste d'animations spécifiques d'un objet:
scene . remove ( "#mydiv" , [ "top" , "left" ] ) ;Pause une scène:
scene . pause ( ) ;Alternativement:
scene . start ( false ) ;Jouez une scène:
scene . start ( ) ;Alternativement:
scene . pause ( false ) ;Retourner la lecture (bascule):
scene . reverse ( ) ;Alternativement régler la direction:
scene . reverse ( false ) ;Réinitialisez l'état de lecture et sautez au début:
scene . reset ( ) ;Terminez et exécutez également le rappel:
scene . finish ( ) ;Définir la vitesse de lecture:
scene . speed ( 0.5 ) ; // half
scene . speed ( 1 ) ; // normal
scene . speed ( 2 ) ; // double
scene . speed ( - 2 ) ; // double (reversed direction)Cherchez une scène à une position spécifique:
scene . seek ( 0 ) ; // start
scene . seek ( 0.5 ) ; // middle
scene . seek ( 1 ) ; // endDéplacer une scène par rapport à la position actuelle (par millisecondes):
scene . shift ( 2000 ) ; // current + 2000 ms
scene . shift ( - 500 ) ; // current - 500 msSéquences en boucle et direction inversée
Lorsque les séquences de bouclage et ont également inversé la direction d'animation (par exemple en définissant la vitesse <0), vous devez passer une paire de déclaration from-to pour chaque style, sinon la valeur de la valeur se perd lors du retour de la direction inversée.
var scene = Fat . animate ( element , [ {
left : { from : "0%" , to : "50%" }
} , {
left : { from : "50%" , to : "0%" }
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;Alternativement, utilisez des sténages à unité:
var scene = Fat . animate ( element , [ {
left : [ 0 , 50 , "%" ]
} , {
left : [ 50 , 0 , "%" ]
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;Alternativement, utilisez une bascule relative:
var scene = Fat . animate ( element , [ {
left : "!=50%"
} , {
left : "!=0%"
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ; Faites défiler le document / l'élément à une position spécifique (verticalement):
Fat . animate ( element , { scrollTop : 500 } ) ;Faites défiler horizontalement:
Fat . animate ( element , { scrollLeft : 500 } ) ; Faites défiler dans les deux directions scroll: [x, y] :
Fat . animate ( element , { scroll : [ 500 , 500 ] } ) ;Utilisez des valeurs relatives:
Fat . animate ( element , { scroll : "+=50" } ) ; Planifiez une tâche à effectuer pendant le prochain cadre d'animation:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} ) ;Planifiez une tâche avec un retard et conservez l'ID de peinture:
var id = Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} , 2000 ) ;Supprimez la tâche planifiée ci-dessus de la file d'attente:
Fat . cancel ( id ) ;Faire boucle une tâche avec chaque trame d'animation:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
return true ;
} ) ;Revenez simplement vrai pour garder la boucle en vie. Retourne False ou ne renvoyez rien pour casser la boucle.
Considérant l'exemple suivant:
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // this style change will be shadowed
Fat . animate ( this , { top : "100%" } ) ;
} ) ;C'est ce qu'on appelle la boucle d'animation, le rappel crée une nouvelle animation sur la même propriété de style objets. Techniquement, le rappel s'exécute lors du dernier cadre de la première animation. Il y a donc toujours une animation sur cette propriété et sera hérité de la prochaine boucle d'animation.
Pendant le rappel, les modifications externes sur la même propriété de style qui seront animées seront ombragées par l'héritage de la boucle d'animation.
Lorsque le changement de style ne s'est pas produit à l'extérieur (par exemple par un autre outil), utilisez la méthode de l'ensemble pour obtenir les meilleures performances:
Fat . animate ( element , { top : "100%" } , function ( ) {
Fat . set ( this , "top" , 0 ) . animate ( this , { top : "100%" } ) ;
} ) ;Sinon, pour résoudre cette situation, vous devez ajouter l'option INIT :
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // external change somewhere happens
Fat . animate ( this , { top : "100%" } , { init : true } ) ;
} ) ;Encore une fois, ce problème ne se produit que lors de l'utilisation de boucles d'animation mélangées avec des changements de style manuel sur la même propriété de style pendant le rappel juste avant l'appel de la nouvelle boucle d'animation.
Considérant l'exemple suivant:
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" ) ;
} ) ;Lorsque vous effectuez différentes animations sur les mêmes propriétés de style d'objet à exécuter en parallèle, il y a un problème de concurrence. Par défaut, une animation DUPE hérite de l'ancienne, donc l'ancienne animation n'existe plus. En conséquence, l'exemple d'en haut, les journaux de la console "courts".
Pour forcer les animations dupées, vous devez ajouter l'option stricte :
// 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" ) ;
} ) ;Désormais, la console se connecte "court" après 400 ms et "long" après 2000 ms. Bien que les mêmes propriétés ne puissent pas avoir deux valeurs différentes, donc l'animation la plus tôt démarrée est en réalité privilégiée.
Considérant l'exemple suivant:
# mydiv { top : 0 px !important } Fat . animate ( "#mydiv" , { top : "100%" } ) ;La déclaration de style CSS d'en haut a le mot-clé ! Important et empêche les changements de style normaux.
Pour résoudre ce problème, vous devez ajouter l'option Force :
Fat . animate ( "#mydiv" , { top : "100%" } , { force : true } ) ; Il s'agit d'une caractéristique expérimentale. Tous les moteurs sont autonomes, vous pouvez faire une construction personnalisée juste avec votre choix préféré.
| Moteur | js | CSS | indigène |
| Rendu | JavaScript (par défaut) | Transition CSS | API d'animation Web |
Utilisez les transitions CSS:
Fat . transition ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ;Utilisez l'API d'animation Web:
Fat . native ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ; N'utilisez pas de débogage dans les versions de production.
Si vous obtenez des problèmes, vous pouvez régler temporaire le drapeau de débogage sur true en plus de FAT.js :
DEBUG = true ;Cela permet la journalisation de la console de plusieurs processus. Ouvrez simplement la console des navigateurs pour rendre ces informations visibles.
N'utilisez pas de profileur dans les builds de production.
Pour collecter quelques statistiques de performance de vos scènes, vous devez régler temporaire le drapeau de profileur sur true en plus de FAT.js :
PROFILER = true ;Cela permet le profilage de plusieurs processus.
Un tableau de tous les profils est disponible sur:
window . stats ;Vous pouvez également ouvrir la console des navigateurs et entrer cette ligne pour obtenir des statistiques.
L'indice du tableau correspond à la scène.id .
Obtenez des statistiques d'une scène spécifique:
scene . stats ;La charge utile des statistiques de retour est divisée en plusieurs catégories. Chacune de ces catégories fournit ses propres valeurs statistiques.
Propriétés des statistiques du profileur
| Propriété | Description |
| temps | La somme de temps (ms) le processus prend (plus bas est meilleur) |
| compter | À quelle fréquence le processus a été appelé |
| opérations | Opérations moyennes par seconde (plus élevée, c'est mieux) |
| nano | Coût moyen (NS) par opération / appel (plus bas est meilleur) |
Vous avez besoin de node.js, y compris le gestionnaire de packages de noeuds (NPM)
Installez les dépendances:
npm installConstruction complète:
npm run buildConstruction légère:
npm run build-lightConstruction compacte:
npm run build-compactConstruction personnalisée:
npm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=trueSur les builds personnalisés, chaque indicateur de build sera défini sur FALSE par défaut.
Alternativement (construction personnalisée):
node compile support_control=trueLa version personnalisée sera enregistrée sur fat.custom.xxxxx.js (le "xxxxx" est un hachage basé sur les drapeaux de construction utilisés).
Flags de construction pris en charge
| Drapeau | Valeurs |
| Support_color | Vrai, faux |
| Support_control | Vrai, faux |
| Support_Sequence | Vrai, faux |
| Support_transform | Vrai, faux |
| Support_filter | Vrai, faux |
| Support_scroll | Vrai, faux |
| Support_paint | Vrai, faux |
| Support_relative | Vrai, faux |
| Support_concurrency | Vrai, faux |
| Support_eason | Vrai, faux |
| Support_preset | Vrai, faux |
| Support_Engine | String: "all", "js", "css", "natif" / "waapi" |
| Support_animate | VRAI, FAUX (Overrides Support_Engine) |
| Support_transition | VRAI, FAUX (Overrides Support_Engine) |
| Support_native | VRAI, FAUX (Overrides Support_Engine) |
Drapeaux linguistiques | |
| Langue_out | Ecmascript3 Ecmascript5 Ecmascript5_strict Ecmascript6 Ecmascript6_strict Ecmascript_2015 Ecmascript_2017 ÉCURIE |
Copyright 2019 Nextapps gmbh
Libéré sous la licence Apache 2.0
