fat
v0.6.8
Cuando se trata de la velocidad de animación en bruto, la grasa supera a cada biblioteca de animación web y también proporciona capacidades de animación flexibles como escenas, secuencias, transformaciones, colorantes, controles y facilidad.
Guía de instalación • Referencia de API • Ejemplos • Construcciones personalizadas • Ranking de referencia
Obtener el último (lanzamiento estable):
| Construir | Archivo | CDN |
| grasa.min.js | Descargar | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js |
| Fat.light.js | Descargar | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.light.js |
| fat.compact.js | Descargar | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.compact.js |
| fat.custom.js | Construcción personalizada |
Todas las características:
| Característica | grasa.min.js | fat.compact.js | Fat.light.js |
| Animación | incógnita | incógnita | incógnita |
| Escenas (grupos) | incógnita | incógnita | incógnita |
| Colección de facilitación (Custom Bezier) | incógnita | incógnita | - |
| Control (línea de tiempo) | incógnita | - | - |
| Secuencias | incógnita | - | - |
| Plazos | incógnita | - | - |
| Presets (efectos) | incógnita | - | - |
| Transformaciones (2d/3d) | incógnita | incógnita | - |
| Filtrar | incógnita | - | - |
| Bandera | incógnita | incógnita | - |
| Propiedades/renderizador personalizados | incógnita | incógnita | incógnita |
| Valores relativos | incógnita | - | - |
| Voluta | incógnita | - | - |
| Pintar | incógnita | - | - |
| Concurrencia (modo estricto) | incógnita | - | - |
| Renderizadores de motores | JS, CSS3, Waapi | Js | Js |
| Tamaño del archivo (GZIP) | 7.0 kb | 4.5 kb | 1.9 kb |
La depuración y el perfilador de las banderas también están disponibles en fat.js para uso de no producción.
También es muy simple hacer una compilación personalizada
Comparación de la biblioteca: Benchmark "Bouncing Balls"
"Animate" (2000 Bouncing Balls)
| Rango | Nombre de la biblioteca | Versión de biblioteca | Tamaño de la biblioteca | Montón de memoria * | Asignación de memoria ** | Actualizaciones por segundo | Marcos por segundo |
| 1 | GORDO | 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 | Pequeño | 0.4.0 | 1.5 kb | 1.93 MB | 1.98 MB | 28801 | 29 |
| 6 | Mootols | 1.6.0 | 31.2 KB | 3.14 MB | 3.42 MB | 26919 | 25.2 |
| 7 | CSS3 (transición) | - | - | 0 MB | 0 MB | - | 22.3 |
| 8 | Velocidad | 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 | Morfeo | 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 | Justanimado | 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 bolas de rebote)
| Rango | Nombre de la biblioteca | Versión de biblioteca | Actualizaciones por segundo | Marcos por segundo |
| 1 | GORDO | 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 (transición) | - | - | 15.5 |
| 7 | Zepto | 1.2.0 | - | 12.4 |
| 8 | Morfeo | 0.7.2 | 6665 | 3.3 |
| 9 | Bajs | 1.0 | - | 1 |
| 10 | Justanimado | 2.5.1 | 1218 | 0.3 |
| 11 | jQuery | 3.3.1 | 309 | 0.01 |
"Colors" (2000 bolas intermitentes)
| Rango | Nombre de la biblioteca | Versión de biblioteca | Actualizaciones por segundo | Marcos por segundo |
| 1 | GORDO | 0.6.6 | 113950 | 57 |
| 2 | Gsap | 2.0.2 | 89665 | 42.65 |
| 3 | Tweenjs | 1.0.2 | 89499 | 42 |
| 4 | Velocidad | 2.0.5 | 59617 | 31.25 |
| 5 | HTML5 (Waapi) | - | - | 26.5 |
| 6 | Anim.js | - | - | 23 |
| 7 | CSS3 (transición) | - | - | 20.6 |
| 8 | Yui | 3.18.1 | 84287 | 14.7 |
| 9 | Mootols | 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 | Morfeo | 0.7.2 | 3902 | 3.2 |
| 14 | Zepto | 1.2.0 | - | 2 |
| 15 | Justanimado | 2.5.1 | 4283 | 1 |
| 16 | Bajs | 1.0 | - | 0.7 |
Navegador: Chrome (escritorio), duración de la prueba: 30 segundos (valor medio)
* Memoria del montón: el tamaño de la memoria que las animaciones requieren para ejecutar
** Asignación de memoria: la cantidad de memoria que se asignó durante el tiempo de ejecución de la animación
Comparación de la biblioteca: Benchmark "Bouncing Balls"
< html >
< head >
< script src =" fat.min.js " > </ script >
</ head >
...NOTA: Use grases gat.min.js para la producción y fat.js para el desarrollo.
Use el último lanzamiento estable de CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js " > </ script >Use una versión específica de CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/[email protected]/fat.min.js " > </ script >JS común
En su código incluye de la siguiente manera:
var Fat = require ( "Fat" ) ;Amd
var Fat = require ( "./fat.min.js" ) ; El espacio de nombres "Fat" es también la escena predeterminada (escena global).
Métodos globales / Métodos de escena:
Métodos de control:
| Opción | Tipo | Por defecto | Descripción |
| comenzar | Booleano | verdadero | Habilitar/deshabilitar la autoplala cuando se realizó una llamada de animación |
| FPS | Número | 60 | Marcos por segundo |
| Opción | Tipo | Por defecto | Descripción |
| duración | Número | 400 | Duración de la animación (MS). |
| facilidad | Cadena | Función | "lineal" | Elija un método de facilitación predefinido o pase una función de flexibilización personalizada. |
| demora | Número | 0 | Retraso de la animación (MS). |
| llamar de vuelta | Función | nulo | Función que se llamará cuando la animación está terminada. |
| paso | Función (progreso, valor) | nulo | Función a llamar a cada tic (progreso: el estado actual del progreso entre 0 y 1, valor: el valor actual, incluida la unidad, útil cuando se usa propiedades personalizadas). |
| bucle | Número | 0 | Recuento de bucle de secuencias o fotogramas clave. Establecido en -1 para bucles infinitos. |
| inicio | Booleano | FALSO | Fuerzas que se calculan los estilos al comenzar el siguiente bucle de animación. Solo es importante cuando los estilos cambian dentro de la devolución de llamada de animación justo antes de comenzar una nueva animación en la misma propiedad de estilo (bucle de animación). |
| fuerza | Booleano | FALSO | Cambios de estilo de fuerzas (igual a la palabra clave CSS "! IMPORTANTE"). |
| estricto | Booleano | FALSO | No anule y mantenga diferentes animaciones actúa en las propiedades de estilo del mismo objeto. |
| motor | Cadena | "JS" | Elija uno de los 3 motores de renderizado: " JS ", " CSS ", " Nativo ". |
Gordo. Animate (selector [] | Elements [], Styles [] {}, Opciones {}, devolución de llamada)
Fat . animate ( "#mydiv" , { left : "100px" } , { /* options */ } ) ;Pase en un elemento, una variedad de elementos o un selector de consultas 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 ) ;
}
} ) ;Vea todas las opciones disponibles de arriba.
Pase las opciones personalizadas para cada propiedad de estilo:
Fat . animate ( "#mydiv" , {
left : {
from : 0 ,
to : 100 ,
unit : "%" ,
duration : 2000 ,
ease : "linear"
} ,
top : {
from : 0 ,
to : "100%" ,
duration : 2000 ,
ease : "quadIn" ,
delay : 2000
}
} ) ;Pasar un parámetro de unidad es ligeramente más rápido.
property: [from, to, unit] :
Fat . animate ( "#mydiv" , {
left : [ 0 , 100 , "%" ] , // from 0% to 100%
top : [ 0 , "100%" ] ,
} ) ;Alternativamente, pase la función de devolución de llamada como el último parámetro:
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
} ) ;Retrasar una animación hasta que aparezca el elemento objetivo (por ejemplo, desplazando):
Fat . animate ( "#mydiv" , { top : "100px" } , { delay : "view" } ) ; Calcule los valores dependiendo del estado actual:
// 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" } ) ;Valores de al revés dependiendo del estado actual:
// toggle current left (100% or 0%)
Fat . animate ( "#mydiv" , { left : "!=100%" } ) ; La notación separada proporciona el mejor rendimiento:
Fat . animate ( "#mydiv" , {
translateX : "100px" ,
translateY : "100px"
} ) ;Igual que:
Fat . transform ( "#mydiv" , { ... } ) ;alternativamente:
Fat . animate ( "#mydiv" , {
"transform" : "translate(100px, 100px)"
} ) ;Igual 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 notación separada proporciona el mejor rendimiento:
Fat . animate ( "#mydiv" , {
colorR : 0 ,
colorG : 0 ,
colorB : 0 ,
colorA : 0 ,
backgroundColorA : "100%" ,
borderColorB : 255
} ) ; La notación separada proporciona el mejor rendimiento:
Fat . animate ( "#mydiv" , {
brightness : 0.5 ,
contrast : 0.5 ,
hue : "180deg"
} ) ;Puedes usar el
huede taquigrafía comohue-rotate
Igual que:
Fat . filter ( "#mydiv" , { ... } ) ;alternativamente:
Fat . animate ( "#mydiv" , {
"filter" : "brightness(0.5) contrast(0.5) hue(180deg)"
} ) ;Igual que:
Fat . filter ( "#mydiv" , "brightness(0.5) contrast(0.5) hue(180deg)" ) ; Falcos incorporados:
Estático (precacitado) versus flexibilización dinámica
Hay dos formas de definir las funciones de flexión. Cuando su flexibilización es una curva estática (como la facilidad, el retroceso, el elástico, etc.), debe definir la flexibilización a través de Fat.animate Fat.ease["myEasing"] = fn() . Esto prevenirá todos los cálculos, por lo que puede usar definiciones de flexibilización realmente pesadas sin ningún inconveniente de rendimiento.
Cuando desee usar la flexibilización dinámica, que depende de los cálculos de tiempo de ejecución, debe pasar la función de flexión directamente a las opciones Fat.animate . En este caso, el cálculo de flexibilización no prevenirá. Esto le permite controlar la facilidad programáticamente y agregar lógica durante el tiempo de ejecución.
Definir la función de flexibilización estática personalizada (estilo de 1 parámetro):
Fat . ease [ "linear" ] = function ( x ) {
return x ;
} ;x : progreso actual (0.0 - 1.0)
Definir la función de flexibilización estática personalizada (estilo de 4 parámetros):
Fat . ease [ "linear" ] = function ( t , b , c , d ) {
return b + ( c - b ) * ( t / d ) ;
} ;T : Tiempo actual, B : Desde el valor, C : al valor, D : Duración
Aplicar la flexibilización estática personalizada:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "linear" } ) ;Use Bezier cúbico:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "cubic(0, 1, 0, 1)" } ) ;Se recomienda la notación de matriz de taquigrafía para un Bezier:
... , { ease : [ 0 , 1 , 0 , 1 ] } ) ;Definir la función de flexibilización dinámica personalizada (estilo de 1 parámetro):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( x ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ;Definir la función de flexibilización dinámica personalizada (estilo de 4 parámetros):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( t , b , c , d ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ; Gordo. animate (custom_object [] {}, custom_property [] {}, opciones {})
Nota: No puede usar más de una propiedad personalizada por animación en un elemento HTML. En su lugar, al animar las propiedades de los objetos personalizados no hay límites.
Simplemente agregue una propiedad con el nombre "personalizado":
Fat . animate ( "#mydiv" , {
custom : "50%"
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current ;
}
} ) ;Manejar la unidad por separado:
Fat . animate ( "#mydiv" , {
custom : 50
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current + "%" ;
}
} ) ;Pase en objeto/función personalizada como primer parámetro en lugar de un elemento:
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 + "%" ;
}
} ) ;También puedes usar secuencias:
... [ custom : 50 , custom : 0 , custom : 100 , custom : 0 ]De esta manera, es posible pasar datos personalizados, lógica y renderizador a través de cada trabajo de animación, por ejemplo:
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 ) ;
}
} ) ;También puede usar la matriz de objetos/manejadores:
Fat . animate ( [ handler1 , handler2 , handler3 ] , ...Si no necesita los valores de transición de/to en absoluto, otro escenario podría ser:
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);
}
} ) ;alternativamente:
Fat . animate ( { } , { custom : true } , { step : function ( progress ) {
var current = cubicInOut ( progress ) ;
// console.log(current);
} } ) ;o:
Fat . animate ( { } , { custom : 1 } , {
ease : cubicInOut ,
step : function ( progress , current ) {
// console.log(current);
}
} ) ;Tween Propiedades de objetos personalizados:
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
} ) ;Utilice opciones personalizadas por propiedad de estilo:
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
} ) ;Utilice opciones personalizadas por propiedad de estilo:
Fat . animate ( "#mydiv" , {
"0%" : {
left : {
to : "100%" ,
ease : "easeIn"
}
} ,
"100%" : {
top : {
to : "0%" ,
ease : "easeOut"
}
}
} ,
... Fat . animate ( "#mydiv" , "fadeOut" ) ;Combinar múltiples preajustes (ordenados):
Fat . animate ( "#mydiv" , "fadeOut zoomOut rollOutRight" ) ;También se puede usar con secuencias:
Fat . animate ( "#mydiv" , [ "slideInTop" , "zoomIn" ] ) ;Definir preajuste personalizado:
Fat . preset [ "fade-out-down" ] = {
opacity : 0 ,
translateY : "100%"
} ;Utilice el preajuste personalizado:
Fat . animate ( "#mydiv" , "fade-out-down" ) ;Presets Builtin:
Obtenga la escena global (predeterminada):
var scene = Fat . animate ( element , { left : "100%" } ) ;Crea una nueva escena:
var scene = Fat . create ( ) ;Agregar animaciones a una escena:
scene . animate ( element , { left : "100%" } ) ;Destruir la escena:
scene . destroy ( ) ;Ejemplo útil
Considerando el siguiente ejemplo:
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 ( ) ;Todas las variables apuntan a la misma escena global en la que se basa básicamente en "gorda" .
Esta es la solución correcta:
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 ( ) ;No cree enormemente nuevas escenas y tampoco las cree de forma predeterminada. Una gran cantidad de escenas paralelas resulta en un inconveniente de rendimiento.
La grasa apunta internamente a la escena global predeterminada, por lo que puede usar todos los métodos de escena en grasa en consecuencia.
Actualización de estilo único:
scene . set ( "#mydiv" , "left" , "0%" ) ;Actualizar múltiples estilos:
scene . set ( "#mydiv" , { top : 0 , left : 0 } ) ;Eliminar todas las animaciones de un objeto:
scene . remove ( "#mydiv" ) ;Eliminar una animación específica de un objeto:
scene . remove ( "#mydiv" , "left" ) ;Elimine una lista de animaciones específicas de un objeto:
scene . remove ( "#mydiv" , [ "top" , "left" ] ) ;Pausa una escena:
scene . pause ( ) ;alternativamente:
scene . start ( false ) ;Tocar una escena:
scene . start ( ) ;alternativamente:
scene . pause ( false ) ;Revertir la reproducción (alternar):
scene . reverse ( ) ;Alternativamente establecer dirección:
scene . reverse ( false ) ;Restablecer el estado de reproducción y volver al inicio:
scene . reset ( ) ;Terminar y también ejecutar devolución de llamada:
scene . finish ( ) ;Establecer velocidad de reproducción:
scene . speed ( 0.5 ) ; // half
scene . speed ( 1 ) ; // normal
scene . speed ( 2 ) ; // double
scene . speed ( - 2 ) ; // double (reversed direction)Busque una escena a una posición específica:
scene . seek ( 0 ) ; // start
scene . seek ( 0.5 ) ; // middle
scene . seek ( 1 ) ; // endCambiar una escena en relación con la posición actual (por milisegundos):
scene . shift ( 2000 ) ; // current + 2000 ms
scene . shift ( - 500 ) ; // current - 500 msSecuencias de bucle y dirección invertida
Cuando las secuencias de bucle y también tienen una dirección de animación invertida (por ejemplo, al establecer la velocidad <0), debe pasar un par de declaraciones desde cada estilo, de lo contrario el valor del valor se pierde al recurrir desde la dirección inversa.
var scene = Fat . animate ( element , [ {
left : { from : "0%" , to : "50%" }
} , {
left : { from : "50%" , to : "0%" }
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;Alternativamente, use la taquigrafía desde la unidad:
var scene = Fat . animate ( element , [ {
left : [ 0 , 50 , "%" ]
} , {
left : [ 50 , 0 , "%" ]
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;Alternativamente, use relativo alternar:
var scene = Fat . animate ( element , [ {
left : "!=50%"
} , {
left : "!=0%"
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ; Documento/elemento de desplazamiento a una posición específica (verticalmente):
Fat . animate ( element , { scrollTop : 500 } ) ;Desplazarse horizontalmente:
Fat . animate ( element , { scrollLeft : 500 } ) ; Desplácese en ambas direcciones scroll: [x, y] :
Fat . animate ( element , { scroll : [ 500 , 500 ] } ) ;Utilice valores relativos:
Fat . animate ( element , { scroll : "+=50" } ) ; Programe una tarea para realizar durante el próximo marco de animación:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} ) ;Programe una tarea con un retraso y mantenga la identificación de pintura:
var id = Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} , 2000 ) ;Elimine la tarea programada anterior de la cola:
Fat . cancel ( id ) ;Loce una tarea con cada marco de animación:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
return true ;
} ) ;Simplemente regrese verdadero para mantener vivo el circuito. Devuelve falso o no devuelve nada para romper el bucle.
Considerando el siguiente ejemplo:
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // this style change will be shadowed
Fat . animate ( this , { top : "100%" } ) ;
} ) ;Esto se llama bucle de animación, la devolución de llamada crea una nueva animación en la misma propiedad de estilo de objetos. Técnicamente, la devolución de llamada se ejecuta durante el último cuadro de la primera animación. Por lo tanto, todavía se ejecuta una animación en esta propiedad y será heredado por el próximo bucle de animación.
Durante la devolución de llamada, los cambios externos en la misma propiedad de estilo que se animará se sombrearán por la herencia del bucle de animación.
Cuando el cambio de estilo no ocurrió externamente (por ejemplo, por una herramienta diferente), use el método establecido para obtener el mejor rendimiento:
Fat . animate ( element , { top : "100%" } , function ( ) {
Fat . set ( this , "top" , 0 ) . animate ( this , { top : "100%" } ) ;
} ) ;De lo contrario, para resolver esta situación, debe agregar la opción Init :
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // external change somewhere happens
Fat . animate ( this , { top : "100%" } , { init : true } ) ;
} ) ;Una vez más, este problema solo ocurre cuando se usa bucles de animación mezclados con cambios de estilo manual en la misma propiedad de estilo durante la devolución de llamada justo antes del nuevo bucle de animación.
Considerando el siguiente ejemplo:
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" ) ;
} ) ;Cuando realiza diferentes animaciones sobre las mismas propiedades de estilo de objeto para ejecutarse en paralelo, hay un problema de concurrencia. Por defecto, una animación Dupe hereda la anterior, por lo que la animación antigua ya no existe. En consecuencia, al ejemplo desde arriba, la consola solo registra "corto".
Para forzar animaciones engañadas, debes agregar la opción estricta :
// 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" ) ;
} ) ;Ahora la consola registra "cortas" después de 400 ms y "largas" después de 2000 ms. Aunque las mismas propiedades no pueden tener dos valores diferentes, siempre se prioriza la animación más temprana de inicio.
Considerando el siguiente ejemplo:
# mydiv { top : 0 px !important } Fat . animate ( "#mydiv" , { top : "100%" } ) ;La declaración de estilo CSS de arriba tiene la palabra clave ! Importante y está evitando cambios de estilo normales.
Para resolver esto, debe agregar la opción de fuerza :
Fat . animate ( "#mydiv" , { top : "100%" } , { force : true } ) ; Esta es una característica experimental. Todos los motores son independientes, puede hacer una construcción personalizada solo con su elección favorita.
| Motor | js | CSS | nativo |
| Renderizador | JavaScript (predeterminado) | Transición CSS | API de animación web |
Use transiciones CSS:
Fat . transition ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ;Use la API de animación web:
Fat . native ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ; No use la depuración en las compilaciones de producción.
Si obtiene problemas, puede establecer temporalmente la bandera de depuración en verdadera además de fat.js :
DEBUG = true ;Esto permite el registro de la consola de varios procesos. Simplemente abra la consola de los navegadores para que esta información sea visible.
No use Profiler en compilaciones de producción.
Para recopilar algunas estadísticas de rendimiento de sus escenas, debe establecer temporalmente la bandera de Profiler en la parte superior de Fat.js :
PROFILER = true ;Esto permite el perfil de varios procesos.
Una variedad de todos los perfiles está disponible en:
window . stats ;También puede abrir la consola de los navegadores e ingresar esta línea para obtener estadísticas.
El índice de la matriz corresponde a la escena.id .
Obtenga estadísticas de una escena específica:
scene . stats ;La carga útil de las estadísticas que regresan se divide en varias categorías. Cada una de estas categorías proporciona sus propios valores estadísticos.
Propiedades de estadísticas de perfilador
| Propiedad | Descripción |
| tiempo | La suma del tiempo (MS) que toma el proceso (más bajo es mejor) |
| contar | Con qué frecuencia se llamaba el proceso |
| operaciones | Operaciones promedio por segundo (más alto es mejor) |
| nano | Costo promedio (NS) por operación/llamada (más bajo es mejor) |
Necesita Node.js, incluido Node Package Manager (NPM)
Instalar dependencias:
npm installConstrucción completa:
npm run buildConstrucción de luz:
npm run build-lightConstrucción compacta:
npm run build-compactConstrucción personalizada:
npm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=trueEn las compilaciones personalizadas, cada indicador de compilación se establecerá en falso de forma predeterminada.
Alternativamente (compilación personalizada):
node compile support_control=trueLa compilación personalizada se guardará en fat.custom.xxxxx.js (el "xxxxx" es un hash basado en las banderas de compilación usadas).
Banderas de construcción compatibles
| Bandera | Valores |
| Support_Color | verdadero, falso |
| Support_control | verdadero, falso |
| Support_Sequence | verdadero, falso |
| Support_transform | verdadero, falso |
| Support_Filter | verdadero, falso |
| Support_Scroll | verdadero, falso |
| Support_Paint | verdadero, falso |
| Soporte_relativo | verdadero, falso |
| Support_concurrency | verdadero, falso |
| Apoyo_esing | verdadero, falso |
| Support_preset | verdadero, falso |
| Support_Engine | cadena: "all", "js", "css", "nativo" / "waapi" |
| Apoyo_animado | Verdadero, False (anula Support_Engine) |
| Support_transition | Verdadero, False (anula Support_Engine) |
| Soporte_nativo | Verdadero, False (anula Support_Engine) |
Banderas de idioma | |
| Lenguaje_out | ECMAScript3 ECMAScript5 ECMAScript5_strict ECMAScript6 ECMAScript6_strict ECMAScript_2015 ECMAScript_2017 ESTABLE |
Copyright 2019 NextApps GmbH
Liberado bajo la licencia Apache 2.0
