fat
v0.6.8
เมื่อพูดถึงความเร็วแอนิเมชั่นดิบ FAT มีประสิทธิภาพสูงกว่าไลบรารีแอนิเมชั่นเว็บทุกตัวที่นั่นและยังให้ความสามารถในการเคลื่อนไหวที่ยืดหยุ่นเช่นฉากลำดับการแปลงสีการควบคุมและการผ่อนคลาย
คู่มือการติดตั้ง•การอ้างอิง API •ตัวอย่าง•การสร้างที่กำหนดเอง•การจัดอันดับมาตรฐาน
รับล่าสุด (รีลีสเสถียร):
| สร้าง | ไฟล์ | CDN |
| fat.min.js | การดาวน์โหลด | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js |
| fat.light.js | การดาวน์โหลด | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.light.js |
| fat.compact.js | การดาวน์โหลด | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.compact.js |
| fat.custom.js | บิลด์แบบกำหนดเอง |
คุณสมบัติทั้งหมด:
| คุณสมบัติ | fat.min.js | fat.compact.js | fat.light.js |
| ความเคลื่อนไหว | x | x | x |
| ฉาก (กลุ่ม) | x | x | x |
| คอลเลกชันที่ผ่อนคลาย (Custom Bezier) | x | x | - |
| การควบคุม (ไทม์ไลน์) | x | - | - |
| ลำดับ | x | - | - |
| keyframes | x | - | - |
| ค่าที่ตั้งไว้ล่วงหน้า (เอฟเฟกต์) | x | - | - |
| แปลง (2D/3D) | x | x | - |
| กรอง | x | - | - |
| สี | x | x | - |
| คุณสมบัติที่กำหนดเอง/renderer | x | x | x |
| ค่าสัมพัทธ์ | x | - | - |
| การเลื่อน | x | - | - |
| สี | x | - | - |
| พร้อมกัน (โหมดเข้มงวด) | x | - | - |
| เครื่องยนต์แสดงผล | JS, CSS3, Waapi | JS | JS |
| ขนาดไฟล์ (GZIP) | 7.0 kb | 4.5 kb | 1.9 kb |
การดีบัก ธงและ โปรไฟล์ ยังมีอยู่ใน fat.js สำหรับการใช้งานที่ไม่ใช่การผลิต
นอกจากนี้ยังง่ายมากที่จะสร้างงานสร้างที่กำหนดเอง
การเปรียบเทียบห้องสมุด: เกณฑ์มาตรฐาน "Bouncing Balls"
"Animate" (2,000 Bouncing Balls)
| จัดอันดับ | ชื่อห้องสมุด | เวอร์ชันไลบรารี | ขนาดห้องสมุด | กองหน่วยความจำ * | การจัดสรรหน่วยความจำ ** | อัปเดตต่อวินาที | เฟรมต่อวินาที |
| 1 | อ้วน | 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 | ตัวเล็ก | 0.4.0 | 1.5 kb | 1.93 MB | 1.98 MB | 28801 | 29 |
| 6 | Moolools | 1.6.0 | 31.2 kb | 3.14 MB | 3.42 MB | 26919 | 25.2 |
| 7 | CSS3 (การเปลี่ยนแปลง) | - | - | 0 MB | 0 MB | - | 22.3 |
| 8 | ความเร็ว | 2.0.5 | 16.6 kb | 8.33 MB | 7.98 MB | 16820 | 6.3 |
| 9 | อะนิเมะ | 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 | โดโจ | 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 | เป็นสิ่งที่น่าสนใจ | 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 | เซปโต | 1.2.0 | 11.0 kb | 40.14 MB | 18.49 MB | - | 0.3 |
"Transforms" (2000 Bouncing Balls)
| จัดอันดับ | ชื่อห้องสมุด | เวอร์ชันไลบรารี | อัปเดตต่อวินาที | เฟรมต่อวินาที |
| 1 | อ้วน | 0.6.6 | 91960 | 46.1 |
| 2 | tweenjs | 1.0.2 | 67931 | 33 |
| 3 | GSAP | 2.0.2 | 50337 | 26 |
| 4 | อะนิเมะ | 2.2.0 | 41040 | 21.6 |
| 5 | HTML5 (waapi) | - | - | 16 |
| 6 | CSS3 (การเปลี่ยนแปลง) | - | - | 15.5 |
| 7 | เซปโต | 1.2.0 | - | 12.4 |
| 8 | Morpheus | 0.7.2 | 6665 | 3.3 |
| 9 | Bajs | 1.0 | - | 1 |
| 10 | เป็นสิ่งที่น่าสนใจ | 2.5.1 | 1218 | 0.3 |
| 11 | jQuery | 3.3.1 | 309 | 0.01 |
"Colors" (2000 Flashing Balls)
| จัดอันดับ | ชื่อห้องสมุด | เวอร์ชันไลบรารี | อัปเดตต่อวินาที | เฟรมต่อวินาที |
| 1 | อ้วน | 0.6.6 | 113950 | 57 |
| 2 | GSAP | 2.0.2 | 89665 | 42.65 |
| 3 | tweenjs | 1.0.2 | 89499 | 42 |
| 4 | ความเร็ว | 2.0.5 | 59617 | 31.25 |
| 5 | HTML5 (waapi) | - | - | 26.5 |
| 6 | Anim.js | - | - | 23 |
| 7 | CSS3 (การเปลี่ยนแปลง) | - | - | 20.6 |
| 8 | Yui | 3.18.1 | 84287 | 14.7 |
| 9 | Moolools | 1.6.0 | 8123 | 13.3 |
| 10 | โดโจ | 1.14.2 | 33004 | 11.1 |
| 11 | อะนิเมะ | 2.2.0 | 12483 | 6.3 |
| 12 | jQuery | 3.3.1 | 7002 | 4 |
| 13 | Morpheus | 0.7.2 | 3902 | 3.2 |
| 14 | เซปโต | 1.2.0 | - | 2 |
| 15 | เป็นสิ่งที่น่าสนใจ | 2.5.1 | 4283 | 1 |
| 16 | Bajs | 1.0 | - | 0.7 |
เบราว์เซอร์: Chrome (เดสก์ท็อป), ระยะเวลาการทดสอบ: 30 วินาที (ค่ามัธยฐาน)
* หน่วยความจำกอง: ขนาดของหน่วยความจำภาพเคลื่อนไหวต้องดำเนินการ
** การจัดสรรหน่วยความจำ: จำนวนหน่วยความจำที่จัดสรรในระหว่างรันไทม์แอนิเมชั่น
การเปรียบเทียบห้องสมุด: เกณฑ์มาตรฐาน "Bouncing Balls"
< html >
< head >
< script src =" fat.min.js " > </ script >
</ head >
...หมายเหตุ: ใช้ fat.min.js สำหรับการผลิตและ fat.js เพื่อการพัฒนา
ใช้การเปิดตัวที่เสถียรล่าสุดจาก CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js " > </ script >ใช้เวอร์ชันเฉพาะจาก CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/[email protected]/fat.min.js " > </ script >JS ทั่วไป
ในรหัสของคุณมีดังนี้:
var Fat = require ( "Fat" ) ;เอเอ็มดี
var Fat = require ( "./fat.min.js" ) ; เนมสเปซ "ไขมัน" ยังเป็นฉากเริ่มต้น (ฉากทั่วโลก)
วิธีการทั่วโลก / วิธีการฉาก:
วิธีการควบคุม:
| ตัวเลือก | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
| เริ่ม | บูลีน | จริง | เปิด/ปิดการเล่นอัตโนมัติเมื่อมีการโทรแบบแอนิเมชั่น |
| FPS | ตัวเลข | 60 | เฟรมต่อวินาที |
| ตัวเลือก | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
| ระยะเวลา | ตัวเลข | 400 | ระยะเวลาของภาพเคลื่อนไหว (MS) |
| ผ่อนปรน | สตริง | การทำงาน | "เชิงเส้น" | เลือกวิธีการผ่อนคลายที่กำหนดไว้ล่วงหน้าหรือผ่านฟังก์ชั่นการผ่อนคลายแบบกำหนดเอง |
| ล่าช้า | ตัวเลข | 0 | ความล่าช้าของแอนิเมชั่น (MS) |
| การโทรกลับ | การทำงาน | โมฆะ | ฟังก์ชั่นที่จะเรียกเมื่อภาพเคลื่อนไหวเสร็จสิ้น |
| ขั้นตอน | ฟังก์ชั่น (ความคืบหน้าค่า) | โมฆะ | ฟังก์ชั่นที่จะเรียกในแต่ละเห็บ (ความคืบหน้า: สถานะปัจจุบันของความคืบหน้าระหว่าง 0 ถึง 1 ค่า: ค่าปัจจุบันรวมถึงหน่วยที่เป็นประโยชน์เมื่อใช้คุณสมบัติที่กำหนดเอง) |
| วง | ตัวเลข | 0 | จำนวนลูปลำดับหรือคีย์เฟรม ตั้งค่าเป็น -1 สำหรับลูปที่ไม่มีที่สิ้นสุด |
| การเริ่มต้น | บูลีน | เท็จ | กองกำลังรับรูปแบบที่คำนวณได้เมื่อเริ่มวนรอบแอนิเมชั่นถัดไป สำคัญเมื่อรูปแบบเปลี่ยนไปภายในการโทรกลับแบบแอนิเมชั่นก่อนที่จะเริ่มภาพเคลื่อนไหวใหม่ในคุณสมบัติสไตล์เดียวกัน (ลูปแอนิเมชั่น) |
| บังคับ | บูลีน | เท็จ | การเปลี่ยนแปลงรูปแบบแรง (เท่ากับคำหลัก CSS "! สำคัญ") |
| เข้มงวด | บูลีน | เท็จ | อย่าแทนที่และรักษาภาพเคลื่อนไหวที่แตกต่างกันในคุณสมบัติสไตล์ของวัตถุเดียวกัน |
| เครื่องยนต์ | สาย | "JS" | เลือกหนึ่งใน 3 เครื่องยนต์ที่เรนเดอร์: " JS ", " CSS ", " Native " |
อ้วน. animate (selector [] | องค์ประกอบ [], styles [] {}, ตัวเลือก {}, callback)
Fat . animate ( "#mydiv" , { left : "100px" } , { /* options */ } ) ;ผ่านองค์ประกอบอาร์เรย์ขององค์ประกอบหรือตัวเลือกการสืบค้น 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 ) ;
}
} ) ;ดูตัวเลือกที่มีอยู่ทั้งหมดด้านบน
ผ่านตัวเลือกที่กำหนดเองสำหรับแต่ละสไตล์:
Fat . animate ( "#mydiv" , {
left : {
from : 0 ,
to : 100 ,
unit : "%" ,
duration : 2000 ,
ease : "linear"
} ,
top : {
from : 0 ,
to : "100%" ,
duration : 2000 ,
ease : "quadIn" ,
delay : 2000
}
} ) ;การผ่านพารามิเตอร์หน่วยเร็วขึ้นเล็กน้อย
property: [from, to, unit] :
Fat . animate ( "#mydiv" , {
left : [ 0 , 100 , "%" ] , // from 0% to 100%
top : [ 0 , "100%" ] ,
} ) ;หรือผ่านฟังก์ชันการโทรกลับเป็นพารามิเตอร์สุดท้าย:
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
} ) ;ชะลอภาพเคลื่อนไหวจนกว่าองค์ประกอบเป้าหมายจะเข้ามาในมุมมอง (เช่นการเลื่อน):
Fat . animate ( "#mydiv" , { top : "100px" } , { delay : "view" } ) ; คำนวณค่าขึ้นอยู่กับสถานะปัจจุบัน:
// 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" } ) ;สลับค่าขึ้นอยู่กับสถานะปัจจุบัน:
// toggle current left (100% or 0%)
Fat . animate ( "#mydiv" , { left : "!=100%" } ) ; สัญกรณ์แยกให้มีประสิทธิภาพที่ดีที่สุด:
Fat . animate ( "#mydiv" , {
translateX : "100px" ,
translateY : "100px"
} ) ;เหมือนกับ:
Fat . transform ( "#mydiv" , { ... } ) ;หรือ
Fat . animate ( "#mydiv" , {
"transform" : "translate(100px, 100px)"
} ) ;เหมือนกับ:
Fat . transform ( "#mydiv" , "translate(100px, 100px)" ) ; Fat . animate ( "#mydiv" , {
color : "#f00" ,
backgroundColor : "rgba(0, 255, 0, 1)" ,
borderColor : "hsla(0, 100%, 100%, 1)"
} ) ;สัญกรณ์แยกให้มีประสิทธิภาพที่ดีที่สุด:
Fat . animate ( "#mydiv" , {
colorR : 0 ,
colorG : 0 ,
colorB : 0 ,
colorA : 0 ,
backgroundColorA : "100%" ,
borderColorB : 255
} ) ; สัญกรณ์แยกให้มีประสิทธิภาพที่ดีที่สุด:
Fat . animate ( "#mydiv" , {
brightness : 0.5 ,
contrast : 0.5 ,
hue : "180deg"
} ) ;คุณสามารถใช้ Shorthand
hueเป็นhue-rotate
เหมือนกับ:
Fat . filter ( "#mydiv" , { ... } ) ;หรือ
Fat . animate ( "#mydiv" , {
"filter" : "brightness(0.5) contrast(0.5) hue(180deg)"
} ) ;เหมือนกับ:
Fat . filter ( "#mydiv" , "brightness(0.5) contrast(0.5) hue(180deg)" ) ; การผ่อนคลายในตัว:
แบบคงที่
มีสองวิธีในการกำหนดฟังก์ชั่นการผ่อนคลาย เมื่อการผ่อนคลายของคุณเป็นเส้นโค้งคงที่ (เช่น EaseIn, backinout, ยืดหยุ่น ฯลฯ ) คุณควรกำหนดการผ่อนคลายผ่าน Fat.ease["myEasing"] = fn() และเพียงแค่ส่งชื่อเป็นสตริงภายในตัวเลือก Fat.animate สิ่งนี้จะนำการคำนวณทั้งหมดล่วงหน้าดังนั้นคุณมีอิสระที่จะใช้คำจำกัดความที่ผ่อนคลายอย่างหนักโดยไม่มีข้อเสียประสิทธิภาพใด ๆ
เมื่อคุณต้องการใช้การผ่อนคลายแบบไดนามิกซึ่งขึ้นอยู่กับการคำนวณรันไทม์คุณควรผ่านฟังก์ชั่นการผ่อนคลายโดยตรงไปยังตัวเลือก Fat.animate ในกรณีนี้การคำนวณการผ่อนคลายจะไม่ถูกดึงล่วงหน้า สิ่งนี้ช่วยให้คุณสามารถควบคุมการผ่อนคลายทางโปรแกรมและเพิ่มตรรกะในระหว่างการรันไทม์
กำหนดฟังก์ชั่นการผ่อนคลายแบบคงที่แบบกำหนดเอง (รูปแบบ 1 พารามิเตอร์):
Fat . ease [ "linear" ] = function ( x ) {
return x ;
} ;X : ความคืบหน้าปัจจุบัน (0.0 - 1.0)
กำหนดฟังก์ชั่นการผ่อนคลายแบบคงที่แบบกำหนดเอง (สไตล์ 4 พารามิเตอร์):
Fat . ease [ "linear" ] = function ( t , b , c , d ) {
return b + ( c - b ) * ( t / d ) ;
} ;t : เวลาปัจจุบัน, b : จากค่า, c : ถึงค่า, d : ระยะเวลา
ใช้การผ่อนคลายแบบคงที่แบบกำหนดเอง:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "linear" } ) ;ใช้ลูกบาศก์ bezier:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "cubic(0, 1, 0, 1)" } ) ;ขอแนะนำให้ใช้สัญลักษณ์อาเรย์สำหรับ Bezier:
... , { ease : [ 0 , 1 , 0 , 1 ] } ) ;กำหนดฟังก์ชั่น การผ่อนคลายแบบไดนามิก แบบกำหนดเอง (รูปแบบ 1 พารามิเตอร์):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( x ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ;กำหนดฟังก์ชั่น การผ่อนคลายแบบไดนามิก แบบกำหนดเอง (รูปแบบ 4 พารามิเตอร์):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( t , b , c , d ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ; อ้วน. animate (custom_object [] {}, custom_property [] {}, ตัวเลือก {})
หมายเหตุ: คุณไม่สามารถใช้คุณสมบัติที่กำหนดเองได้มากกว่าหนึ่งรายการต่อแอนิเมชั่นในองค์ประกอบ HTML แทนที่จะเป็นคุณสมบัติของวัตถุที่กำหนดเองที่กำหนดเองจะไม่มีข้อ จำกัด
เพียงเพิ่มคุณสมบัติด้วยชื่อ "custom":
Fat . animate ( "#mydiv" , {
custom : "50%"
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current ;
}
} ) ;ด้ามจับหน่วยแยกกัน:
Fat . animate ( "#mydiv" , {
custom : 50
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current + "%" ;
}
} ) ;ผ่านวัตถุ/ฟังก์ชันที่กำหนดเองเป็นพารามิเตอร์แรกแทนองค์ประกอบ:
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 + "%" ;
}
} ) ;คุณยังสามารถใช้ลำดับ:
... [ custom : 50 , custom : 0 , custom : 100 , custom : 0 ]วิธีนี้เป็นไปได้ที่จะผ่านข้อมูลที่กำหนดเองตรรกะและการแสดงผลผ่านงานแอนิเมชั่นแต่ละงานเช่น:
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 ) ;
}
} ) ;นอกจากนี้คุณยังสามารถใช้อาร์เรย์ของวัตถุ/ตัวจัดการ:
Fat . animate ( [ handler1 , handler2 , handler3 ] , ...หากคุณไม่ต้องการค่าจากการเปลี่ยนจาก/ถึงการเปลี่ยนแปลงเลยสถานการณ์อื่นอาจเป็นได้:
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);
}
} ) ;หรือ
Fat . animate ( { } , { custom : true } , { step : function ( progress ) {
var current = cubicInOut ( progress ) ;
// console.log(current);
} } ) ;หรือ:
Fat . animate ( { } , { custom : 1 } , {
ease : cubicInOut ,
step : function ( progress , current ) {
// console.log(current);
}
} ) ;Tween คุณสมบัติวัตถุที่กำหนดเอง:
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
} ) ;ใช้ตัวเลือกที่กำหนดเองตามคุณสมบัติคุณสมบัติ:
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
} ) ;ใช้ตัวเลือกที่กำหนดเองตามคุณสมบัติคุณสมบัติ:
Fat . animate ( "#mydiv" , {
"0%" : {
left : {
to : "100%" ,
ease : "easeIn"
}
} ,
"100%" : {
top : {
to : "0%" ,
ease : "easeOut"
}
}
} ,
... Fat . animate ( "#mydiv" , "fadeOut" ) ;รวมการตั้งค่าล่วงหน้าหลายรายการ (สั่งซื้อ):
Fat . animate ( "#mydiv" , "fadeOut zoomOut rollOutRight" ) ;ใช้กับลำดับ:
Fat . animate ( "#mydiv" , [ "slideInTop" , "zoomIn" ] ) ;กำหนดค่าล่วงหน้าที่กำหนดเอง:
Fat . preset [ "fade-out-down" ] = {
opacity : 0 ,
translateY : "100%"
} ;ใช้ Custom Preset:
Fat . animate ( "#mydiv" , "fade-out-down" ) ;Builtin Presets:
รับ Global Scene (ค่าเริ่มต้น):
var scene = Fat . animate ( element , { left : "100%" } ) ;สร้างฉากใหม่:
var scene = Fat . create ( ) ;เพิ่มภาพเคลื่อนไหวลงในฉาก:
scene . animate ( element , { left : "100%" } ) ;ทำลายฉาก:
scene . destroy ( ) ;ตัวอย่างที่เป็นประโยชน์
พิจารณาตัวอย่างต่อไปนี้:
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 ( ) ;ตัวแปรทั้งหมดชี้ไปที่ฉากทั่วโลกเดียวกันซึ่งเป็น "ไขมัน" โดยทั่วไป
นี่คือวิธีแก้ปัญหาที่ถูกต้อง:
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 ( ) ;อย่าสร้างฉากใหม่อย่างหนาแน่นและไม่ได้สร้างขึ้นตามค่าเริ่มต้น ฉากขนานจำนวนมากส่งผลให้เกิดข้อเสียเปรียบประสิทธิภาพ
FAT ชี้ไปที่ฉากทั่วโลกเริ่มต้นเพื่อให้คุณสามารถใช้วิธีการทั้งหมดบน FAT ตามลำดับ
อัปเดตสไตล์เดียว:
scene . set ( "#mydiv" , "left" , "0%" ) ;อัปเดตหลายสไตล์:
scene . set ( "#mydiv" , { top : 0 , left : 0 } ) ;ลบภาพเคลื่อนไหวทั้งหมดออกจากวัตถุ:
scene . remove ( "#mydiv" ) ;ลบภาพเคลื่อนไหวเฉพาะออกจากวัตถุ:
scene . remove ( "#mydiv" , "left" ) ;ลบรายการภาพเคลื่อนไหวเฉพาะออกจากวัตถุ:
scene . remove ( "#mydiv" , [ "top" , "left" ] ) ;หยุดฉาก:
scene . pause ( ) ;หรือ
scene . start ( false ) ;เล่นฉาก:
scene . start ( ) ;หรือ
scene . pause ( false ) ;ย้อนกลับการเล่น (สลับ):
scene . reverse ( ) ;หรือกำหนดทิศทาง:
scene . reverse ( false ) ;รีเซ็ตสถานะการเล่นและกระโดดกลับไปที่จุดเริ่มต้น:
scene . reset ( ) ;เสร็จสิ้นและดำเนินการโทรกลับ:
scene . finish ( ) ;ตั้งค่าความเร็วในการเล่น:
scene . speed ( 0.5 ) ; // half
scene . speed ( 1 ) ; // normal
scene . speed ( 2 ) ; // double
scene . speed ( - 2 ) ; // double (reversed direction)ค้นหาฉากไปยังตำแหน่งที่เฉพาะเจาะจง:
scene . seek ( 0 ) ; // start
scene . seek ( 0.5 ) ; // middle
scene . seek ( 1 ) ; // endเปลี่ยนฉากที่สัมพันธ์กับตำแหน่งปัจจุบัน (โดยมิลลิวินาที):
scene . shift ( 2000 ) ; // current + 2000 ms
scene . shift ( - 500 ) ; // current - 500 msวนรอบลำดับและทิศทางกลับ
เมื่อวนรอบลำดับและยังมีทิศทางแอนิเมชั่นย้อนกลับ (เช่นโดยการตั้งค่าความเร็ว <0) คุณจะต้องผ่านคู่ประกาศจากการประกาศสำหรับแต่ละสไตล์มิฉะนั้นจากค่าจากค่าจะหายไปเมื่อวนกลับจากทิศทางที่กลับด้าน
var scene = Fat . animate ( element , [ {
left : { from : "0%" , to : "50%" }
} , {
left : { from : "50%" , to : "0%" }
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;หรือใช้ชวเลขจากไปยังหน่วย:
var scene = Fat . animate ( element , [ {
left : [ 0 , 50 , "%" ]
} , {
left : [ 50 , 0 , "%" ]
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;ใช้หรือใช้สลับสัมพันธ์:
var scene = Fat . animate ( element , [ {
left : "!=50%"
} , {
left : "!=0%"
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ; Scroll Document/Element ไปยังตำแหน่งเฉพาะ (ในแนวตั้ง):
Fat . animate ( element , { scrollTop : 500 } ) ;เลื่อนในแนวนอน:
Fat . animate ( element , { scrollLeft : 500 } ) ; เลื่อนทั้งสองทิศทาง scroll: [x, y] :
Fat . animate ( element , { scroll : [ 500 , 500 ] } ) ;ใช้ค่าสัมพัทธ์:
Fat . animate ( element , { scroll : "+=50" } ) ; กำหนดเวลางานเพื่อดำเนินการระหว่างเฟรมภาพเคลื่อนไหวถัดไป:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} ) ;กำหนดเวลางานที่ล่าช้าและเก็บ ID สี:
var id = Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} , 2000 ) ;ลบงานที่กำหนดไว้ข้างต้นออกจากคิว:
Fat . cancel ( id ) ;วนลูปงานกับทุกเฟรมภาพเคลื่อนไหว:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
return true ;
} ) ;เพียงแค่กลับมา จริง เพื่อให้ลูปยังมีชีวิตอยู่ ส่งคืน เท็จ หรือไม่กลับอะไรเลยเพื่อทำลายลูป
พิจารณาตัวอย่างต่อไปนี้:
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // this style change will be shadowed
Fat . animate ( this , { top : "100%" } ) ;
} ) ;สิ่งนี้เรียกว่าแอนิเมชั่นลูปการโทรกลับสร้างภาพเคลื่อนไหวใหม่ในคุณสมบัติสไตล์วัตถุ เดียวกัน ในทางเทคนิคการเรียกกลับมาทำงานระหว่างเฟรมสุดท้ายของภาพเคลื่อนไหวแรก ดังนั้นยังคงมีการใช้งานแอนิเมชั่นในคุณสมบัตินี้และจะได้รับการสืบทอดโดยลูปแอนิเมชั่นถัดไป
ในระหว่างการโทรกลับการเปลี่ยนแปลงภายนอกในคุณสมบัติสไตล์ เดียวกัน ซึ่งกำลังจะเป็นภาพเคลื่อนไหวจะถูกเงาโดยมรดกแบบลูปแบบแอนิเมชั่น
เมื่อการเปลี่ยนแปลงสไตล์ไม่ได้เกิดขึ้นภายนอก (เช่นโดยเครื่องมืออื่น) ใช้วิธี การตั้งค่า เพื่อให้ได้ประสิทธิภาพที่ดีที่สุด:
Fat . animate ( element , { top : "100%" } , function ( ) {
Fat . set ( this , "top" , 0 ) . animate ( this , { top : "100%" } ) ;
} ) ;มิฉะนั้นในการแก้สถานการณ์นี้คุณต้องเพิ่มตัวเลือก init :
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // external change somewhere happens
Fat . animate ( this , { top : "100%" } , { init : true } ) ;
} ) ;อีกครั้งปัญหานี้จะเกิดขึ้นเฉพาะเมื่อใช้ลูปแอนิเมชั่นผสมกับการเปลี่ยนแปลงสไตล์ด้วยตนเองในคุณสมบัติสไตล์ เดียวกัน ในระหว่างการโทรกลับก่อนที่จะเรียกลูปแอนิเมชั่นใหม่
พิจารณาตัวอย่างต่อไปนี้:
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" ) ;
} ) ;เมื่อคุณแสดงภาพเคลื่อนไหวที่แตกต่างกันในคุณสมบัติสไตล์วัตถุเดียวกันเพื่อทำงานแบบขนานจะมีปัญหาพร้อมกัน โดยค่าเริ่มต้นแอนิเมชั่น Dupe สืบทอดภาพเก่าดังนั้นภาพเคลื่อนไหวเก่าจึงไม่ได้มีอยู่อีกต่อไป ดังนั้นตัวอย่างจากด้านบนคอนโซลเพียงบันทึก "สั้น"
ในการบังคับภาพเคลื่อนไหวที่ติดกับดักคุณต้องเพิ่มตัวเลือก ที่เข้มงวด :
// 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" ) ;
} ) ;ตอนนี้คอนโซลบันทึก "สั้น" หลังจาก 400ms และ "ยาว" หลังจาก 2000ms แม้ว่าคุณสมบัติเดียวกันไม่สามารถมีค่าที่แตกต่างกันได้สองค่าดังนั้นภาพเคลื่อนไหวเริ่มต้นที่เร็วที่สุดจะได้รับการจัดลำดับความสำคัญจริง
พิจารณาตัวอย่างต่อไปนี้:
# mydiv { top : 0 px !important } Fat . animate ( "#mydiv" , { top : "100%" } ) ;การประกาศสไตล์ CSS จากด้านบนมีคำหลัก ! สำคัญ และป้องกันการเปลี่ยนแปลงสไตล์ปกติ
ในการแก้ปัญหานี้คุณต้องเพิ่มตัวเลือก การบังคับ :
Fat . animate ( "#mydiv" , { top : "100%" } , { force : true } ) ; นี่คือคุณสมบัติการทดลอง เครื่องยนต์ทั้งหมดเป็นแบบสแตนด์อโลนคุณสามารถสร้างงานสร้างที่กำหนดเองได้เพียงแค่เลือกที่คุณชื่นชอบ
| เครื่องยนต์ | JS | CSS | พื้นเมือง |
| ผู้แสดงผล | JavaScript (ค่าเริ่มต้น) | การเปลี่ยนแปลง CSS | Web Animation API |
ใช้ CSS Transitions:
Fat . transition ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ;ใช้เว็บแอนิเมชั่น API:
Fat . native ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ; อย่าใช้การดีบักในการสร้างการผลิต
หากคุณได้รับปัญหาคุณสามารถตั้งค่าธง ดีบั๊ก ชั่วคราวให้เป็น จริง บน fat.js :
DEBUG = true ;สิ่งนี้ช่วยให้การบันทึกคอนโซลของหลายกระบวนการ เพียงเปิดคอนโซลเบราว์เซอร์เพื่อให้ข้อมูลนี้มองเห็นได้
อย่าใช้ Profiler ในการสร้างการผลิต
ในการรวบรวมสถิติประสิทธิภาพบางอย่างของฉากของคุณคุณต้องตั้งค่าสถานะ Profiler ให้เป็น จริง บน Fat.js :
PROFILER = true ;สิ่งนี้ช่วยให้การทำโปรไฟล์ของหลายกระบวนการ
อาร์เรย์ของโปรไฟล์ทั้งหมดมีอยู่ใน:
window . stats ;นอกจากนี้คุณยังสามารถเปิดคอนโซลเบราว์เซอร์และป้อนบรรทัดนี้เพื่อรับสถิติ
ดัชนีของอาร์เรย์สอดคล้องกับ ฉาก
รับสถิติจากฉากเฉพาะ:
scene . stats ;น้ำหนักบรรทุกสถิติที่ส่งคืนแบ่งออกเป็นหลายหมวดหมู่ แต่ละหมวดหมู่เหล่านี้ให้ค่าสถิติของตัวเอง
คุณสมบัติสถิติ Profiler
| คุณสมบัติ | คำอธิบาย |
| เวลา | ผลรวมของเวลา (MS) กระบวนการ (ต่ำกว่าดีกว่า) |
| นับ | กระบวนการถูกเรียกบ่อยแค่ไหน |
| ops | การดำเนินงานเฉลี่ยต่อวินาที (สูงกว่า) |
| นาโน | ค่าใช้จ่ายเฉลี่ย (NS) ต่อการดำเนินการ/การโทร (ต่ำกว่าดีกว่า) |
คุณต้องการ node.js รวมถึง Node Package Manager (NPM)
ติดตั้งการพึ่งพา:
npm installงานสร้างเต็ม:
npm run buildBuild Light:
npm run build-lightบิลด์ขนาดกะทัดรัด:
npm run build-compactบิลด์ที่กำหนดเอง:
npm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=trueในการสร้างที่กำหนดเองแต่ละการสร้างธงจะถูกตั้งค่าเป็น เท็จ โดยค่าเริ่มต้น
อีกทางเลือกหนึ่ง (บิลด์แบบกำหนดเอง):
node compile support_control=trueการสร้างที่กำหนดเองจะถูกบันทึกเป็น fat.custom.xxxxx.js ("xxxxx" เป็นแฮชตามธงบิลด์ที่ใช้แล้ว)
รองรับการสร้างธง
| ธง | ค่า |
| support_color | จริงเท็จ |
| support_control | จริงเท็จ |
| support_equence | จริงเท็จ |
| support_transform | จริงเท็จ |
| support_filter | จริงเท็จ |
| support_scroll | จริงเท็จ |
| support_paint | จริงเท็จ |
| support_relative | จริงเท็จ |
| support_concurrency | จริงเท็จ |
| support_esing | จริงเท็จ |
| support_preset | จริงเท็จ |
| support_Engine | String: "All", "JS", "CSS", "Native" / "Waapi" |
| support_animate | จริงเท็จ (แทนที่การสนับสนุน _Engine) |
| support_transition | จริงเท็จ (แทนที่การสนับสนุน _Engine) |
| support_native | จริงเท็จ (แทนที่การสนับสนุน _Engine) |
ธงออกภาษา | |
| language_out | ecmascript3 ecmascript5 ecmascript5_strict ecmascript6 ecmascript6_strict ecmascript_2015 ecmascript_2017 มั่นคง |
ลิขสิทธิ์ 2019 NextApps GmbH
ปล่อยภายใต้ใบอนุญาต Apache 2.0
