fat
v0.6.8
Ketika datang ke kecepatan animasi mentah, lemak mengungguli setiap perpustakaan animasi web di luar sana dan juga memberikan kemampuan animasi yang fleksibel seperti adegan, urutan, transformasi, pewarnaan, pengendalian dan pelonggaran.
Panduan Instalasi • Referensi API • Contoh • Bangunan khusus • Peringkat Benchmark
Dapatkan terbaru (rilis stabil):
| Membangun | Mengajukan | CDN |
| fat.min.js | Unduh | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js |
| fat.light.js | Unduh | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.light.js |
| fat.compact.js | Unduh | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.compact.js |
| fat.custom.js | Build khusus |
Semua fitur:
| Fitur | fat.min.js | fat.compact.js | fat.light.js |
| Animasi | X | X | X |
| Adegan (grup) | X | X | X |
| Koleksi pelonggaran (bezier kustom) | X | X | - |
| Kontrol (Timeline) | X | - | - |
| Urutan | X | - | - |
| Kunci Kunci | X | - | - |
| Preset (efek) | X | - | - |
| Transforms (2D/3D) | X | X | - |
| Menyaring | X | - | - |
| Warna | X | X | - |
| Properti/Renderer Kustom | X | X | X |
| Nilai relatif | X | - | - |
| Menggulir | X | - | - |
| Cat | X | - | - |
| Concurrency (mode ketat) | X | - | - |
| Mesin render | JS, CSS3, WAAPI | JS | JS |
| Ukuran file (GZIP) | 7,0 kb | 4,5 kb | 1,9 kb |
Bendera Debug dan Profiler juga tersedia di Fat.js untuk penggunaan non-produksi.
Ini juga sangat sederhana untuk membuat build khusus
Perbandingan Perpustakaan: Benchmark "Bouncing Balls"
"Animate" (2000 memantul bola)
| Pangkat | Nama Perpustakaan | Versi Perpustakaan | Ukuran perpustakaan | Tumpukan memori * | Alokasi Memori ** | Pembaruan per detik | Bingkai per detik |
| 1 | GEMUK | 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 | Tinyanime | 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 (transisi) | - | - | 0 MB | 0 MB | - | 22.3 |
| 8 | Kecepatan | 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 memantul bola)
| Pangkat | Nama Perpustakaan | Versi Perpustakaan | Pembaruan per detik | Bingkai per detik |
| 1 | GEMUK | 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 (transisi) | - | - | 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 |
"Warna" (2000 Flashing Balls)
| Pangkat | Nama Perpustakaan | Versi Perpustakaan | Pembaruan per detik | Bingkai per detik |
| 1 | GEMUK | 0.6.6 | 113950 | 57 |
| 2 | GSAP | 2.0.2 | 89665 | 42.65 |
| 3 | Tweenjs | 1.0.2 | 89499 | 42 |
| 4 | Kecepatan | 2.0.5 | 59617 | 31.25 |
| 5 | Html5 (waapi) | - | - | 26.5 |
| 6 | Anim.js | - | - | 23 |
| 7 | CSS3 (transisi) | - | - | 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: Chrome (Desktop), Durasi Uji: 30 detik (nilai median)
* Heap memori: ukuran memori yang dibutuhkan animasi untuk dieksekusi
** Alokasi Memori: Jumlah memori yang dialokasikan selama runtime animasi
Perbandingan Perpustakaan: Benchmark "Bouncing Balls"
< html >
< head >
< script src =" fat.min.js " > </ script >
</ head >
...Catatan: Gunakan fat.min.js untuk produksi dan fat.js untuk pengembangan.
Gunakan rilis stabil terbaru dari CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js " > </ script >Gunakan versi spesifik dari CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/[email protected]/fat.min.js " > </ script >JS umum
Dalam kode Anda termasuk sebagai berikut:
var Fat = require ( "Fat" ) ;AMD
var Fat = require ( "./fat.min.js" ) ; Namespace "Fat" juga merupakan adegan default (adegan global).
Metode Global / Metode Adegan:
Metode Kontrol:
| Pilihan | Jenis | Bawaan | Keterangan |
| awal | Boolean | BENAR | Aktifkan/Nonaktifkan Autoplay Saat Panggilan Animasi Dilakukan |
| FPS | Nomor | 60 | Bingkai per detik |
| Pilihan | Jenis | Bawaan | Keterangan |
| lamanya | Nomor | 400 | Durasi animasi (MS). |
| kemudahan | String | Fungsi | "Linear" | Pilih metode pelonggaran yang telah ditentukan atau lulus fungsi pelonggaran khusus. |
| menunda | Nomor | 0 | Penundaan animasi (MS). |
| panggilan balik | Fungsi | batal | Fungsi untuk dipanggil saat animasi selesai. |
| melangkah | Fungsi (kemajuan, nilai) | batal | Fungsi untuk dipanggil pada setiap centang (kemajuan: keadaan kemajuan saat ini antara 0 dan 1, nilai: Nilai saat ini termasuk unit, bermanfaat saat menggunakan properti khusus). |
| lingkaran | Nomor | 0 | Jumlah loop dari urutan atau kerangka kunci. Diatur ke -1 untuk loop tak terbatas. |
| init | Boolean | PALSU | Kekuatan mendapatkan gaya yang dihitung saat memulai loop animasi berikutnya. Hanya penting ketika gaya berubah dalam panggilan balik animasi tepat sebelum memulai animasi baru pada properti gaya yang sama (animasi loop). |
| memaksa | Boolean | PALSU | Perubahan gaya kekuatan (sama dengan kata kunci CSS "! Penting"). |
| ketat | Boolean | PALSU | Jangan mengganti dan menjaga animasi yang berbeda bertindak pada properti gaya objek yang sama. |
| mesin | Rangkaian | "JS" | Pilih salah satu dari 3 mesin render: " js ", " css ", " asli ". |
Gemuk. animate (selector [] | elemen [], styles [] {}, opsi {}, callback)
Fat . animate ( "#mydiv" , { left : "100px" } , { /* options */ } ) ;Lewati elemen, serangkaian elemen atau pemilih permintaan 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 ) ;
}
} ) ;Lihat semua opsi yang tersedia di atas.
Lulus dalam opsi khusus untuk setiap properti gaya:
Fat . animate ( "#mydiv" , {
left : {
from : 0 ,
to : 100 ,
unit : "%" ,
duration : 2000 ,
ease : "linear"
} ,
top : {
from : 0 ,
to : "100%" ,
duration : 2000 ,
ease : "quadIn" ,
delay : 2000
}
} ) ;Melewati parameter unit sedikit lebih cepat.
property: [from, to, unit] :
Fat . animate ( "#mydiv" , {
left : [ 0 , 100 , "%" ] , // from 0% to 100%
top : [ 0 , "100%" ] ,
} ) ;Atau lulus fungsi panggilan balik sebagai parameter terakhir:
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
} ) ;Tunda animasi sampai elemen target muncul (misalnya dengan menggulir):
Fat . animate ( "#mydiv" , { top : "100px" } , { delay : "view" } ) ; Hitung nilai tergantung pada keadaan saat ini:
// 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" } ) ;Nilai beralih tergantung pada keadaan saat ini:
// toggle current left (100% or 0%)
Fat . animate ( "#mydiv" , { left : "!=100%" } ) ; Notasi terpisah memberikan kinerja terbaik:
Fat . animate ( "#mydiv" , {
translateX : "100px" ,
translateY : "100px"
} ) ;Sama seperti:
Fat . transform ( "#mydiv" , { ... } ) ;Atau:
Fat . animate ( "#mydiv" , {
"transform" : "translate(100px, 100px)"
} ) ;Sama seperti:
Fat . transform ( "#mydiv" , "translate(100px, 100px)" ) ; Fat . animate ( "#mydiv" , {
color : "#f00" ,
backgroundColor : "rgba(0, 255, 0, 1)" ,
borderColor : "hsla(0, 100%, 100%, 1)"
} ) ;Notasi terpisah memberikan kinerja terbaik:
Fat . animate ( "#mydiv" , {
colorR : 0 ,
colorG : 0 ,
colorB : 0 ,
colorA : 0 ,
backgroundColorA : "100%" ,
borderColorB : 255
} ) ; Notasi terpisah memberikan kinerja terbaik:
Fat . animate ( "#mydiv" , {
brightness : 0.5 ,
contrast : 0.5 ,
hue : "180deg"
} ) ;Anda dapat menggunakan
hueSHORTHAND sebagaihue-rotate
Sama seperti:
Fat . filter ( "#mydiv" , { ... } ) ;Atau:
Fat . animate ( "#mydiv" , {
"filter" : "brightness(0.5) contrast(0.5) hue(180deg)"
} ) ;Sama seperti:
Fat . filter ( "#mydiv" , "brightness(0.5) contrast(0.5) hue(180deg)" ) ; EASING bawaan:
Statis (pra-bau) vs pelonggaran dinamis
Ada dua cara untuk mendefinisikan fungsi pelonggaran. Ketika pelonggaran Anda adalah kurva statis (seperti kemudahan, backinout, elastis, dll.) Anda harus mendefinisikan pelonggaran melalui Fat.ease["myEasing"] = fn() Fat.animate Ini akan memilih semua perhitungan, jadi Anda bebas menggunakan definisi pelonggaran yang sangat berat tanpa kelemahan kinerja.
Ketika Anda ingin menggunakan pelonggaran dinamis, yang tergantung pada perhitungan runtime, Anda harus meneruskan fungsi pelonggaran langsung ke opsi Fat.animate . Dalam hal ini perhitungan pelonggaran tidak akan dipilih. Ini memungkinkan Anda untuk mengontrol pelonggaran secara terprogram dan menambahkan logika selama runtime.
Tentukan fungsi pelonggaran statis khusus (gaya 1-parameter):
Fat . ease [ "linear" ] = function ( x ) {
return x ;
} ;X : Kemajuan Saat Ini (0,0 - 1.0)
Tentukan fungsi pelonggaran statis khusus (gaya 4-parameter):
Fat . ease [ "linear" ] = function ( t , b , c , d ) {
return b + ( c - b ) * ( t / d ) ;
} ;T : Waktu Saat Ini, B : Dari Nilai, C : ke nilai, D : Durasi
Terapkan pelonggaran statis khusus:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "linear" } ) ;Gunakan bezier kubik:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "cubic(0, 1, 0, 1)" } ) ;Notasi array steno untuk bezier direkomendasikan:
... , { ease : [ 0 , 1 , 0 , 1 ] } ) ;Tentukan fungsi pelonggaran dinamis khusus (gaya 1-parameter):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( x ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ;Tentukan fungsi pelonggaran dinamis khusus (gaya 4-parameter):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( t , b , c , d ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ; Gemuk. animate (custom_object [] {}, custom_property [] {}, opsi {})
Catatan: Anda tidak dapat menggunakan lebih dari satu properti khusus per animasi pada elemen HTML. Sebaliknya saat menjiwai properti objek kustom tidak ada batasan.
Cukup tambahkan properti dengan nama "custom":
Fat . animate ( "#mydiv" , {
custom : "50%"
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current ;
}
} ) ;Tangani unit secara terpisah:
Fat . animate ( "#mydiv" , {
custom : 50
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current + "%" ;
}
} ) ;Lulus dalam objek/fungsi khusus sebagai parameter pertama alih -alih elemen:
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 + "%" ;
}
} ) ;Anda juga dapat menggunakan urutan:
... [ custom : 50 , custom : 0 , custom : 100 , custom : 0 ]Dengan cara ini dimungkinkan untuk meneruskan data khusus, logika, dan renderer melalui setiap pekerjaan animasi, misalnya:
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 ) ;
}
} ) ;Anda juga dapat menggunakan array objek/penangan:
Fat . animate ( [ handler1 , handler2 , handler3 ] , ...Jika Anda tidak memerlukan nilai dari/ke transisi sama sekali, skenario lain bisa:
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);
}
} ) ;Atau:
Fat . animate ( { } , { custom : true } , { step : function ( progress ) {
var current = cubicInOut ( progress ) ;
// console.log(current);
} } ) ;atau:
Fat . animate ( { } , { custom : 1 } , {
ease : cubicInOut ,
step : function ( progress , current ) {
// console.log(current);
}
} ) ;Tween Properti Objek Kustom:
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
} ) ;Gunakan opsi kustom per properti:
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
} ) ;Gunakan opsi kustom per properti:
Fat . animate ( "#mydiv" , {
"0%" : {
left : {
to : "100%" ,
ease : "easeIn"
}
} ,
"100%" : {
top : {
to : "0%" ,
ease : "easeOut"
}
}
} ,
... Fat . animate ( "#mydiv" , "fadeOut" ) ;Gabungkan beberapa preset (dipesan):
Fat . animate ( "#mydiv" , "fadeOut zoomOut rollOutRight" ) ;Juga dapat digunakan dengan urutan:
Fat . animate ( "#mydiv" , [ "slideInTop" , "zoomIn" ] ) ;Tentukan preset khusus:
Fat . preset [ "fade-out-down" ] = {
opacity : 0 ,
translateY : "100%"
} ;Gunakan preset khusus:
Fat . animate ( "#mydiv" , "fade-out-down" ) ;Preset Builtin:
Dapatkan adegan global (default):
var scene = Fat . animate ( element , { left : "100%" } ) ;Buat adegan baru:
var scene = Fat . create ( ) ;Tambahkan animasi ke sebuah adegan:
scene . animate ( element , { left : "100%" } ) ;Hancurkan adegan:
scene . destroy ( ) ;Contoh yang berguna
Mempertimbangkan contoh berikut:
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 ( ) ;Semua variabel menunjuk ke adegan global yang sama di mana "lemak" pada dasarnya berdasarkan.
Ini adalah solusi yang benar:
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 ( ) ;Jangan secara besar -besaran membuat adegan baru dan juga tidak membuatnya secara default. Sejumlah besar adegan paralel menghasilkan kelemahan kinerja.
Lemak secara internal menunjuk ke adegan global default, sehingga Anda dapat menggunakan semua metode adegan pada lemak yang sesuai.
Perbarui Gaya Tunggal:
scene . set ( "#mydiv" , "left" , "0%" ) ;Perbarui banyak gaya:
scene . set ( "#mydiv" , { top : 0 , left : 0 } ) ;Hapus semua animasi dari suatu objek:
scene . remove ( "#mydiv" ) ;Hapus animasi tertentu dari suatu objek:
scene . remove ( "#mydiv" , "left" ) ;Hapus daftar animasi spesifik dari suatu objek:
scene . remove ( "#mydiv" , [ "top" , "left" ] ) ;Jeda adegan:
scene . pause ( ) ;Atau:
scene . start ( false ) ;Mainkan adegan:
scene . start ( ) ;Atau:
scene . pause ( false ) ;Kembalikan Playback (Toggle):
scene . reverse ( ) ;Alternatifnya atur arah:
scene . reverse ( false ) ;Setel ulang status pemutaran dan lompat kembali ke awal:
scene . reset ( ) ;Selesai dan juga menjalankan panggilan balik:
scene . finish ( ) ;Tetapkan kecepatan pemutaran:
scene . speed ( 0.5 ) ; // half
scene . speed ( 1 ) ; // normal
scene . speed ( 2 ) ; // double
scene . speed ( - 2 ) ; // double (reversed direction)Mencari adegan ke posisi tertentu:
scene . seek ( 0 ) ; // start
scene . seek ( 0.5 ) ; // middle
scene . seek ( 1 ) ; // endMenggeser adegan relatif terhadap posisi saat ini (oleh milidetik):
scene . shift ( 2000 ) ; // current + 2000 ms
scene . shift ( - 500 ) ; // current - 500 msUrutan Looping & Arah Terbalik
Ketika urutan looping dan juga memiliki arah animasi terbalik (misalnya dengan mengatur kecepatan <0) Anda harus melewati pasangan deklarasi dari-ke untuk setiap gaya, jika tidak dari nilai-nilai hilang ketika melingkarkan kembali dari arah terbalik.
var scene = Fat . animate ( element , [ {
left : { from : "0%" , to : "50%" }
} , {
left : { from : "50%" , to : "0%" }
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;Alternatifnya gunakan steno dari unit:
var scene = Fat . animate ( element , [ {
left : [ 0 , 50 , "%" ]
} , {
left : [ 50 , 0 , "%" ]
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;Atau gunakan sakelar relatif:
var scene = Fat . animate ( element , [ {
left : "!=50%"
} , {
left : "!=0%"
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ; Gulir dokumen/elemen ke posisi tertentu (secara vertikal):
Fat . animate ( element , { scrollTop : 500 } ) ;Gulir secara horizontal:
Fat . animate ( element , { scrollLeft : 500 } ) ; Gulir di kedua arah scroll: [x, y] :
Fat . animate ( element , { scroll : [ 500 , 500 ] } ) ;Gunakan nilai relatif:
Fat . animate ( element , { scroll : "+=50" } ) ; Jadwalkan tugas untuk dilakukan selama bingkai animasi berikutnya:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} ) ;Jadwalkan tugas dengan penundaan dan simpan ID cat:
var id = Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} , 2000 ) ;Hapus tugas yang dijadwalkan di atas dari antrian:
Fat . cancel ( id ) ;Loop Tugas dengan setiap bingkai animasi:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
return true ;
} ) ;Kembalikan saja untuk menjaga loop tetap hidup. Kembalikan salah atau tidak mengembalikan apa pun untuk memecahkan lingkaran.
Mempertimbangkan contoh berikut:
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // this style change will be shadowed
Fat . animate ( this , { top : "100%" } ) ;
} ) ;Ini disebut animasi loop, callback membuat animasi baru pada properti gaya objek yang sama . Secara teknis callback dijalankan selama bingkai terakhir dari animasi pertama. Jadi masih ada animasi di properti ini dan akan diwarisi oleh loop animasi berikutnya.
Selama panggilan balik, perubahan eksternal pada properti gaya yang sama yang akan dianimasikan akan dibayangi oleh warisan animasi.
Ketika perubahan gaya tidak terjadi secara eksternal (misalnya dengan alat yang berbeda) Gunakan metode set untuk mendapatkan kinerja terbaik:
Fat . animate ( element , { top : "100%" } , function ( ) {
Fat . set ( this , "top" , 0 ) . animate ( this , { top : "100%" } ) ;
} ) ;Kalau tidak, untuk menyelesaikan situasi ini, Anda harus menambahkan opsi init :
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // external change somewhere happens
Fat . animate ( this , { top : "100%" } , { init : true } ) ;
} ) ;Sekali lagi, masalah ini hanya terjadi ketika menggunakan loop animasi dicampur dengan perubahan gaya manual pada properti gaya yang sama selama panggilan balik tepat sebelum loop animasi baru disebut.
Mempertimbangkan contoh berikut:
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" ) ;
} ) ;Saat Anda melakukan animasi yang berbeda pada properti gaya objek yang sama untuk dijalankan secara paralel ada masalah konkurensi. Secara default, animasi dupe mewarisi yang lama, jadi animasi lama tidak ada lagi. Sesuai dengan contoh dari atas konsol hanya mencatat "pendek".
Untuk memaksa animasi yang ditipu, Anda harus menambahkan opsi ketat :
// 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" ) ;
} ) ;Sekarang konsol mencatat "pendek" setelah 400ms dan "panjang" setelah 2000ms. Meskipun properti yang sama tidak dapat memiliki dua nilai yang berbeda, jadi selalu yang paling awal memulai animasi diprioritaskan sebenarnya.
Mempertimbangkan contoh berikut:
# mydiv { top : 0 px !important } Fat . animate ( "#mydiv" , { top : "100%" } ) ;Deklarasi gaya CSS dari atas memiliki kata kunci ! Penting dan mencegah perubahan gaya normal.
Untuk menyelesaikan ini, Anda harus menambahkan opsi Force :
Fat . animate ( "#mydiv" , { top : "100%" } , { force : true } ) ; Ini adalah fitur eksperimental. Semua mesin berdiri sendiri, Anda dapat membuat build khusus hanya dengan pilihan favorit Anda.
| Mesin | JS | CSS | warga asli |
| Renderer | JavaScript (default) | Transisi CSS | API Animasi Web |
Gunakan transisi CSS:
Fat . transition ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ;Gunakan Web Animation API:
Fat . native ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ; Jangan gunakan debug dalam build produksi.
Jika Anda mendapatkan masalah, Anda dapat sementara mengatur bendera debug ke true di atas fat.js :
DEBUG = true ;Ini memungkinkan pencatatan konsol dari beberapa proses. Cukup buka konsol browser untuk membuat informasi ini terlihat.
Jangan gunakan profiler dalam build produksi.
Untuk mengumpulkan beberapa statistik kinerja adegan Anda, Anda perlu mengatur bendera profiler sementara ke atas di atas Fat.js :
PROFILER = true ;Ini memungkinkan profil beberapa proses.
Array semua profil tersedia di:
window . stats ;Anda juga dapat membuka konsol browser dan memasukkan baris ini untuk mendapatkan statistik.
Indeks array sesuai dengan adegan.id .
Dapatkan statistik dari adegan tertentu:
scene . stats ;Payload statistik yang kembali dibagi menjadi beberapa kategori. Masing -masing kategori ini memberikan nilai statistik sendiri.
Properti Statistik Profiler
| Milik | Keterangan |
| waktu | Jumlah waktu (MS) prosesnya (lebih rendah lebih baik) |
| menghitung | Seberapa sering proses itu disebut |
| OPS | Operasi rata -rata per detik (lebih tinggi lebih baik) |
| nano | Biaya rata -rata (NS) per operasi/panggilan (lebih rendah lebih baik) |
Anda memerlukan node.js termasuk Node Package Manager (NPM)
Instal dependensi:
npm installBangunan penuh:
npm run buildBangunan Cahaya:
npm run build-lightBangun kompak:
npm run build-compactBangunan khusus:
npm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=truePada build khusus, setiap bendera build akan diatur ke false secara default.
Atau (build khusus):
node compile support_control=trueBangunan khusus akan disimpan ke fat.custom.xxxxx.js ("xxxxx" adalah hash berdasarkan bendera build yang digunakan).
Bendera build yang didukung
| Bendera | Nilai |
| Support_color | Benar, salah |
| Support_control | Benar, salah |
| Support_Sequence | Benar, salah |
| Support_transform | Benar, salah |
| Support_filter | Benar, salah |
| Support_scroll | Benar, salah |
| Support_paint | Benar, salah |
| Support_relative | Benar, salah |
| Support_concurrency | Benar, salah |
| Support_easing | Benar, salah |
| Support_preset | Benar, salah |
| Support_engine | String: "semua", "js", "css", "asli" / "waapi" |
| Support_animate | Benar, false (overrides support_engine) |
| Support_transition | Benar, false (overrides support_engine) |
| Support_native | Benar, false (overrides support_engine) |
Bendera bahasa | |
| Bahasa_out | Ecmascript3 Ecmascript5 Ecmascript5_strict Ecmascript6 Ecmascript6_strict Ecmascript_2015 Ecmascript_2017 STABIL |
Hak Cipta 2019 NextApps Gmbh
Dirilis di bawah lisensi Apache 2.0
