fat
v0.6.8
Quando se trata de velocidade de animação bruta, a gordura de animação supera todas as bibliotecas de animação da Web por aí e também fornece recursos de animação flexíveis, como cenas, sequências, transformações, colorir, controle e flexibilização.
Guia de instalação • Referência da API • Exemplos • Construções personalizadas • Classificação de benchmark
Obtenha mais recente (lançamento estável):
| Construir | Arquivo | CDN |
| gordo.min.js | Download | https://cdn.jsdelivr.net/gh/nextsapps-de/fat@master/fat.min.js |
| Fat.light.js | Download | https://cdn.jsdelivr.net/gh/nextsapps-de/fat@master/fat.light.js |
| fat.compact.js | Download | https://cdn.jsdelivr.net/gh/nextsapps-de/fat@master/fat.compact.js |
| Fat.custom.js | Construção personalizada |
Todos os recursos:
| Recurso | gordo.min.js | fat.compact.js | Fat.light.js |
| Animação | x | x | x |
| Cenas (grupos) | x | x | x |
| Coleção de facilidade (Bezier personalizado) | x | x | - |
| Controle (Linha do tempo) | x | - | - |
| Sequências | x | - | - |
| KeyFrames | x | - | - |
| Predefinições (efeitos) | x | - | - |
| Transformações (2D/3D) | x | x | - |
| Filtro | x | - | - |
| Cores | x | x | - |
| Propriedades/renderizadores personalizados | x | x | x |
| Valores relativos | x | - | - |
| Role | x | - | - |
| Pintar | x | - | - |
| Concorrência (modo rigoroso) | x | - | - |
| Motores de renderização | JS, CSS3, WAAPI | JS | JS |
| Tamanho do arquivo (gzip) | 7,0 kb | 4,5 kb | 1,9 kb |
O depuração e o Profiler da bandeira também estão disponíveis no FAT.js para uso da não produção.
Também é muito simples fazer uma construção personalizada
Comparação da biblioteca: Benchmark "Bouncing Balls"
"Animate" (2000 Bouncing Balls)
| Classificação | Nome da biblioteca | Versão da biblioteca | Tamanho da biblioteca | Heap de memória * | Alocação de memória ** | Atualizações por segundo | Quadros 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 | Tinyanimate | 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 (transição) | - | - | 0 mb | 0 mb | - | 22.3 |
| 8 | Velocidade | 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 | Morfeu | 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 Bouncing Balls)
| Classificação | Nome da biblioteca | Versão da biblioteca | Atualizações por segundo | Quadros 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 (transição) | - | - | 15.5 |
| 7 | Zepto | 1.2.0 | - | 12.4 |
| 8 | Morfeu | 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 |
"Colors" (2000 bolas piscando)
| Classificação | Nome da biblioteca | Versão da biblioteca | Atualizações por segundo | Quadros 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 | Velocidade | 2.0.5 | 59617 | 31.25 |
| 5 | Html5 (waapi) | - | - | 26.5 |
| 6 | Anim.js | - | - | 23 |
| 7 | CSS3 (transição) | - | - | 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 | Morfeu | 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 |
Navegador: Chrome (Desktop), Duração do teste: 30 segundos (valor mediano)
* MEMÓRIA PATE: O tamanho da memória que as animações exigem para executar
** Alocação de memória: a quantidade de memória que foi alocada durante o tempo de execução da animação
Comparação da biblioteca: Benchmark "Bouncing Balls"
< html >
< head >
< script src =" fat.min.js " > </ script >
</ head >
...Nota: use gord.min.js para produção e gordas para desenvolvimento.
Use a versão estável mais recente da CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js " > </ script >Use uma versão específica do CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/[email protected]/fat.min.js " > </ script >JS comum
No seu código, inclui o seguinte:
var Fat = require ( "Fat" ) ;AMD
var Fat = require ( "./fat.min.js" ) ; O espaço para nome "Fat" também é a cena padrão (cena global).
Métodos Globais / Métodos de Cena:
Métodos de controle:
| Opção | Tipo | Padrão | Descrição |
| começar | Booleano | verdadeiro | Ativar/desativar a AutoPlay quando uma chamada de animação foi realizada |
| FPS | Número | 60 | Quadros por segundo |
| Opção | Tipo | Padrão | Descrição |
| duração | Número | 400 | Duração da animação (MS). |
| facilidade | String | Função | "linear" | Escolha um método de flexibilização predefinido ou passe uma função de flexibilização personalizada. |
| atraso | Número | 0 | Atraso da animação (MS). |
| ligar de volta | Função | nulo | Função a ser chamada quando a animação é concluída. |
| etapa | Função (progresso, valor) | nulo | Função a ser chamada em cada tick (progresso: o estado atual de progresso entre 0 e 1, valor: o valor atual, incluindo a unidade, útil ao usar propriedades personalizadas). |
| laço | Número | 0 | Contagem de loop de sequências ou quadros -chave. Defina como -1 para loops infinitos. |
| init | Booleano | falso | Forças que recebem estilos computados ao iniciar o próximo loop de animação. Apenas importante quando os estilos mudam dentro do retorno de chamada de animação logo antes de iniciar uma nova animação na mesma propriedade de estilo (LOOP da animação). |
| vigor | Booleano | falso | Força mudanças no estilo (igual à palavra -chave CSS "! IMPORTANTE"). |
| estrito | Booleano | falso | Não substitua e mantenha diferentes animações atuais nas propriedades de estilo do mesmo objeto. |
| motor | Corda | "JS" | Escolha um dos 3 motores de renderização: " JS ", " CSS ", " nativo ". |
Gordo. Animate (seletor [] | Elements [], Styles [] {}, opções {}, retorno de chamada)
Fat . animate ( "#mydiv" , { left : "100px" } , { /* options */ } ) ;Passe em um elemento, uma matriz de elementos ou um seletor de consulta 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 ) ;
}
} ) ;Veja todas as opções disponíveis acima.
Passe as opções personalizadas para cada propriedade 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
}
} ) ;A passagem de um parâmetro de unidade é um pouco mais rápido.
property: [from, to, unit] :
Fat . animate ( "#mydiv" , {
left : [ 0 , 100 , "%" ] , // from 0% to 100%
top : [ 0 , "100%" ] ,
} ) ;Alternativamente, passe a função de retorno de chamada como o ú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
} ) ;Atrasar uma animação até que o elemento de destino apareça (por exemplo, rolando):
Fat . animate ( "#mydiv" , { top : "100px" } , { delay : "view" } ) ; Calcule valores dependendo do estado atual:
// 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" } ) ;Alternar valores dependendo do estado atual:
// toggle current left (100% or 0%)
Fat . animate ( "#mydiv" , { left : "!=100%" } ) ; A notação separada fornece o melhor desempenho:
Fat . animate ( "#mydiv" , {
translateX : "100px" ,
translateY : "100px"
} ) ;O mesmo que:
Fat . transform ( "#mydiv" , { ... } ) ;alternativamente:
Fat . animate ( "#mydiv" , {
"transform" : "translate(100px, 100px)"
} ) ;O mesmo que:
Fat . transform ( "#mydiv" , "translate(100px, 100px)" ) ; Fat . animate ( "#mydiv" , {
color : "#f00" ,
backgroundColor : "rgba(0, 255, 0, 1)" ,
borderColor : "hsla(0, 100%, 100%, 1)"
} ) ;A notação separada fornece o melhor desempenho:
Fat . animate ( "#mydiv" , {
colorR : 0 ,
colorG : 0 ,
colorB : 0 ,
colorA : 0 ,
backgroundColorA : "100%" ,
borderColorB : 255
} ) ; A notação separada fornece o melhor desempenho:
Fat . animate ( "#mydiv" , {
brightness : 0.5 ,
contrast : 0.5 ,
hue : "180deg"
} ) ;Você pode usar o
hueabreviado comohue-rotate
O mesmo que:
Fat . filter ( "#mydiv" , { ... } ) ;alternativamente:
Fat . animate ( "#mydiv" , {
"filter" : "brightness(0.5) contrast(0.5) hue(180deg)"
} ) ;O mesmo que:
Fat . filter ( "#mydiv" , "brightness(0.5) contrast(0.5) hue(180deg)" ) ; Efaching interno:
Estático (pré-cache) vs. flexibilização dinâmica
Existem duas maneiras de definir funções de flexibilização. Quando sua flexibilização é uma curva estática (como facilidadein, backinout, elástico etc.), você deve definir a flexibilização via Fat.ease["myEasing"] = fn() Fat.animate Isso preencherá todos os cálculos, portanto, você é livre para usar definições de flexibilização realmente pesadas sem nenhuma desvantagem de desempenho.
Quando você deseja usar a flexibilização dinâmica, o que depende dos cálculos de tempo de execução, você deve passar a função de flexibilização diretamente para as opções Fat.animate . Nesse caso, o cálculo de flexibilização não preencherá. Isso permite que você controla a diminuição programaticamente e a adição de lógica durante o tempo de execução.
Defina a função de flexibilização estática personalizada (estilo de 1 parâmetro):
Fat . ease [ "linear" ] = function ( x ) {
return x ;
} ;X : Progresso atual (0,0 - 1,0)
Defina a função de flexibilização estática personalizada (estilo de 4 parâmetros):
Fat . ease [ "linear" ] = function ( t , b , c , d ) {
return b + ( c - b ) * ( t / d ) ;
} ;t : hora atual, b : de valor, c : a valor, d : duração
Aplique a flexibilização estática personalizada:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "linear" } ) ;Use o cúbico Bezier:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "cubic(0, 1, 0, 1)" } ) ;Recomenda -se a notação de matriz abreviada para um bezier:
... , { ease : [ 0 , 1 , 0 , 1 ] } ) ;Defina a função de flexibilização 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 ;
} } ) ;Defina a função de flexibilização 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 [] {}, opções {})
Nota: Você não pode usar mais de uma propriedade personalizada por animação em um elemento HTML. Em vez disso, ao animar propriedades de objeto personalizado, não há limites.
Basta adicionar uma propriedade com o nome "Custom":
Fat . animate ( "#mydiv" , {
custom : "50%"
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current ;
}
} ) ;Lidar com a unidade separadamente:
Fat . animate ( "#mydiv" , {
custom : 50
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current + "%" ;
}
} ) ;Passe o objeto/função personalizado como primeiro parâmetro em vez de um 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 + "%" ;
}
} ) ;Você também pode usar sequências:
... [ custom : 50 , custom : 0 , custom : 100 , custom : 0 ]Dessa forma, é possível passar dados personalizados, lógica e renderizador em cada trabalho de animação, por exemplo:
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 ) ;
}
} ) ;Você também pode usar a matriz de objetos/manipuladores:
Fat . animate ( [ handler1 , handler2 , handler3 ] , ...Se você não precisar dos valores de transição/para transição, outro cenário pode 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);
} } ) ;ou:
Fat . animate ( { } , { custom : 1 } , {
ease : cubicInOut ,
step : function ( progress , current ) {
// console.log(current);
}
} ) ;Tween Propriedades de objeto personalizado:
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
} ) ;Use opções personalizadas por propriedade 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
} ) ;Use opções personalizadas por propriedade de estilo:
Fat . animate ( "#mydiv" , {
"0%" : {
left : {
to : "100%" ,
ease : "easeIn"
}
} ,
"100%" : {
top : {
to : "0%" ,
ease : "easeOut"
}
}
} ,
... Fat . animate ( "#mydiv" , "fadeOut" ) ;Combine várias predefinições (ordenadas):
Fat . animate ( "#mydiv" , "fadeOut zoomOut rollOutRight" ) ;Também utilizável com sequências:
Fat . animate ( "#mydiv" , [ "slideInTop" , "zoomIn" ] ) ;Defina predefinição personalizada:
Fat . preset [ "fade-out-down" ] = {
opacity : 0 ,
translateY : "100%"
} ;Use predefinição personalizada:
Fat . animate ( "#mydiv" , "fade-out-down" ) ;Predefinições construídas:
Obtenha a cena global (padrão):
var scene = Fat . animate ( element , { left : "100%" } ) ;Crie uma nova cena:
var scene = Fat . create ( ) ;Adicione animações a uma cena:
scene . animate ( element , { left : "100%" } ) ;Destrua a cena:
scene . destroy ( ) ;Exemplo útil
Considerando o seguinte exemplo:
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 as variáveis apontam para a mesma cena global na qual é "gordo" basicamente baseado.
Esta é a solução alternativa correta:
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 ( ) ;Não crie massivamente novas cenas e também não as crie por padrão. Uma grande quantidade de cenas paralelas resulta em uma desvantagem de desempenho.
A gordura aponta internamente para o cenário global padrão, para que você possa usar todos os métodos de cena com gordura de acordo.
Atualize o estilo único:
scene . set ( "#mydiv" , "left" , "0%" ) ;Atualize vários estilos:
scene . set ( "#mydiv" , { top : 0 , left : 0 } ) ;Remova todas as animações de um objeto:
scene . remove ( "#mydiv" ) ;Remova uma animação específica de um objeto:
scene . remove ( "#mydiv" , "left" ) ;Remova uma lista de animações específicas de um objeto:
scene . remove ( "#mydiv" , [ "top" , "left" ] ) ;Pausa uma cena:
scene . pause ( ) ;alternativamente:
scene . start ( false ) ;Jogue uma cena:
scene . start ( ) ;alternativamente:
scene . pause ( false ) ;Reverta a reprodução (alternar):
scene . reverse ( ) ;Alternativamente, defina a direção:
scene . reverse ( false ) ;Redefinir o estado de reprodução e voltar ao início:
scene . reset ( ) ;Acabar e também executar o retorno de chamada:
scene . finish ( ) ;Defina a velocidade de reprodução:
scene . speed ( 0.5 ) ; // half
scene . speed ( 1 ) ; // normal
scene . speed ( 2 ) ; // double
scene . speed ( - 2 ) ; // double (reversed direction)Procure uma cena para uma posição específica:
scene . seek ( 0 ) ; // start
scene . seek ( 0.5 ) ; // middle
scene . seek ( 1 ) ; // endMude uma cena em relação à posição atual (por milissegundos):
scene . shift ( 2000 ) ; // current + 2000 ms
scene . shift ( - 500 ) ; // current - 500 msSequências de loop e direção invertida
Ao fazer sequências de loop e também reverteu a direção da animação (por exemplo, configurando a velocidade <0), você deve passar a do par de declaração para cada estilo, caso contrário, o valor do valor é perdido ao se perder da direção reversa.
var scene = Fat . animate ( element , [ {
left : { from : "0%" , to : "50%" }
} , {
left : { from : "50%" , to : "0%" }
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;Alternativamente, use de abreviação de unidade:
var scene = Fat . animate ( element , [ {
left : [ 0 , 50 , "%" ]
} , {
left : [ 50 , 0 , "%" ]
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;Alternativamente, use alternância relativa:
var scene = Fat . animate ( element , [ {
left : "!=50%"
} , {
left : "!=0%"
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ; Documento/elemento de rolagem para uma posição específica (verticalmente):
Fat . animate ( element , { scrollTop : 500 } ) ;Role horizontalmente:
Fat . animate ( element , { scrollLeft : 500 } ) ; Role em ambas as direções scroll: [x, y] :
Fat . animate ( element , { scroll : [ 500 , 500 ] } ) ;Use valores relativos:
Fat . animate ( element , { scroll : "+=50" } ) ; Programe uma tarefa a ser executada durante o próximo quadro de animação:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} ) ;Programe uma tarefa com um atraso e mantenha o ID da pintura:
var id = Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} , 2000 ) ;Remova a tarefa agendada acima da fila:
Fat . cancel ( id ) ;Loop uma tarefa em cada quadro de animação:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
return true ;
} ) ;Basta retornar fiel para manter o loop vivo. Retorne falso ou não retorne nada para quebrar o loop.
Considerando o seguinte exemplo:
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // this style change will be shadowed
Fat . animate ( this , { top : "100%" } ) ;
} ) ;Isso é chamado de loop de animação, o retorno de chamada cria uma nova animação na mesma propriedade de estilo de objetos. Tecnicamente, o retorno de chamada é executado durante o último quadro da primeira animação. Portanto, ainda há uma animação nesta propriedade e será herdada pelo próximo loop de animação.
Durante o retorno de chamada, as alterações externas na mesma propriedade de estilo que serão animadas serão sombreadas pela herança do loop de animação.
Quando a mudança de estilo não aconteceu externamente (por exemplo, por uma ferramenta diferente), use o método do conjunto para obter o melhor desempenho:
Fat . animate ( element , { top : "100%" } , function ( ) {
Fat . set ( this , "top" , 0 ) . animate ( this , { top : "100%" } ) ;
} ) ;Caso contrário, para resolver esta situação, você deve adicionar a opção init :
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // external change somewhere happens
Fat . animate ( this , { top : "100%" } , { init : true } ) ;
} ) ;Novamente, esse problema ocorre apenas ao usar os loops de animação misturados com mudanças de estilo manual na mesma propriedade de estilo durante o retorno de chamada logo antes que o novo loop de animação seja chamado.
Considerando o seguinte exemplo:
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" ) ;
} ) ;Quando você realiza animações diferentes nas mesmas propriedades de estilo de objeto para executar em paralelo, há um problema de simultaneidade. Por padrão, uma animação idiota herda a antiga, então a animação antiga não existe mais. Consequentemente, para o exemplo acima do console, apenas registra "curto".
Para forçar as animações enganadas, você deve adicionar a opção estrita :
// 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" ) ;
} ) ;Agora, o console registra "curto" após 400ms e "longo" após 2000ms. Embora as mesmas propriedades não possam ter dois valores diferentes, sempre a animação mais cedo iniciada é priorizada.
Considerando o seguinte exemplo:
# mydiv { top : 0 px !important } Fat . animate ( "#mydiv" , { top : "100%" } ) ;A declaração do estilo CSS de cima tem a palavra -chave ! IMPORTANTE e está impedindo as alterações normais do estilo.
Para resolver isso, você deve adicionar a opção de força :
Fat . animate ( "#mydiv" , { top : "100%" } , { force : true } ) ; Esse é um recurso experimental. Todos os motores são independentes, você pode fazer uma construção personalizada apenas com sua escolha favorita.
| Motor | JS | CSS | nativo |
| Renderizador | JavaScript (padrão) | Transição CSS | API de animação na web |
Use transições CSS:
Fat . transition ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ;Use API de animação da web:
Fat . native ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ; Não use a depuração nas compilações de produção.
Se você tiver problemas, poderá definir temporário o sinalizador de depuração como true no topo do gordo.js :
DEBUG = true ;Isso permite o registro do console de vários processos. Basta abrir o console dos navegadores para tornar essas informações visíveis.
Não use o Profiler nas construções de produção.
Para coletar algumas estatísticas de desempenho de suas cenas, você precisa para definir temporário a bandeira do Profiler como True em cima de Fat.js :
PROFILER = true ;Isso permite o perfil de vários processos.
Uma variedade de todos os perfis está disponível em:
window . stats ;Você também pode simplesmente abrir o console dos navegadores e inserir esta linha para obter estatísticas.
O índice da matriz corresponde à cena .
Obtenha estatísticas de uma cena específica:
scene . stats ;A carga útil das estatísticas que retorna é dividida em várias categorias. Cada uma dessas categoria fornece seus próprios valores estatísticos.
Profiler Stats Properties
| Propriedade | Descrição |
| tempo | A soma do tempo (ms) o processo leva (mais baixo é melhor) |
| contar | Com que frequência o processo foi chamado |
| Ops | Operações médias por segundos (mais alto é melhor) |
| Nano | Custo médio (ns) por operação/chamada (mais baixo é melhor) |
Você precisa de Node.js, incluindo o Node Package Manager (NPM)
Instale dependências:
npm installConstrução completa:
npm run buildConstrução de luz:
npm run build-lightConstrução compacta:
npm run build-compactConstrução personalizada:
npm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=trueEm construções personalizadas, cada sinalizador de construção será definido como falso por padrão.
Alternativamente (construção personalizada):
node compile support_control=trueA compilação personalizada será salva para fat.custom.xxxxx.js (o "xxxxx" é um hash baseado nos sinalizadores de construção usados).
Sinalizadores de construção suportados
| Bandeira | Valores |
| Suporte_color | Verdadeiro, falso |
| Support_control | Verdadeiro, falso |
| Support_sequence | Verdadeiro, falso |
| Support_transform | Verdadeiro, falso |
| Suporte_filter | Verdadeiro, falso |
| Support_scroll | Verdadeiro, falso |
| Support_paint | Verdadeiro, falso |
| Suporte_relativo | Verdadeiro, falso |
| Support_concurrency | Verdadeiro, falso |
| Support_eaviling | Verdadeiro, falso |
| Support_preset | Verdadeiro, falso |
| Suporte_engine | String: "All", "JS", "CSS", "Native" / "Waapi" |
| Suporte_animate | Verdadeiro, False (substitui support_engine) |
| Support_transition | Verdadeiro, False (substitui support_engine) |
| Support_native | Verdadeiro, False (substitui support_engine) |
Sinalizadores de saída de idiomas | |
| Idioma_out | ECMAScript3 ECMAScript5 Ecmascript5_strict ECMAScript6 Ecmascript6_strict Ecmascript_2015 Ecmascript_2017 ESTÁVEL |
Copyright 2019 NextApps GmbH
Liberado sob a licença Apache 2.0
