fat
v0.6.8
عندما يتعلق الأمر بسرعة الرسوم المتحركة الخام ، تتفوق كل مكتبة للرسوم المتحركة على شبكة الإنترنت ، كما توفر إمكانيات رسوم متحركة مرنة مثل المشاهد والتسلسلات والتحويلات والتلوين والتحكم والتخفيف.
دليل التثبيت • مرجع واجهة برمجة التطبيقات • أمثلة • بنيات مخصصة • ترتيب قياسي
احصل على أحدث (إصدار مستقر):
| يبني | ملف | 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 |
| مجموعة التخفيف (مخصصة بيزير) | x | x | - |
| السيطرة (الجدول الزمني) | x | - | - |
| تسلسل | x | - | - |
| إطارات المفاتيح | x | - | - |
| الإعدادات المسبقة (الآثار) | x | - | - |
| التحويلات (2D/3D) | x | x | - |
| فلتر | x | - | - |
| الألوان | x | x | - |
| خصائص مخصصة/عارض | x | x | x |
| القيم النسبية | x | - | - |
| التمرير | x | - | - |
| طلاء | x | - | - |
| التزامن (الوضع الصارم) | x | - | - |
| تقديم محركات | JS ، CSS3 ، Waapi | JS | JS |
| حجم الملف (GZIP) | 7.0 كيلو بايت | 4.5 كيلو بايت | 1.9 كيلو بايت |
يتوفر Debug و Profiler أيضًا في FAT.JS لاستخدام عدم الإنتاج.
كما أنه من السهل جدًا إنشاء بناء مخصص
مقارنة المكتبة: المعيار "كرات كذاب"
"تحريك" (2000 كرات كذاب)
| رتبة | اسم المكتبة | نسخة المكتبة | حجم المكتبة | كومة الذاكرة * | تخصيص الذاكرة ** | تحديثات في الثانية | إطارات في الثانية |
| 1 | سمين | 0.6.6 | 1.9 كيلو بايت | 0.85 ميغابايت | 0.15 ميغابايت | 103954 | 51.5 |
| 2 | GSAP | 2.0.2 | 25.8 كيلو بايت | 28.32 ميغابايت | 8.1 ميغابايت | 87249 | 43.1 |
| 3 | tweenjs | 1.0.2 | 8.3 كيلو بايت | 3.16 ميغابايت | 3.1 ميغابايت | 69647 | 34.4 |
| 4 | HTML5 (WAAPI) | - | - | 0.91 ميغابايت | 0.75 ميغابايت | - | 32.2 |
| 5 | tinyanimate | 0.4.0 | 1.5 كيلو بايت | 1.93 ميغابايت | 1.98 ميغابايت | 28801 | 29 |
| 6 | موتوول | 1.6.0 | 31.2 كيلو بايت | 3.14 ميغابايت | 3.42 ميغابايت | 26919 | 25.2 |
| 7 | CSS3 (الانتقال) | - | - | 0 ميغابايت | 0 ميغابايت | - | 22.3 |
| 8 | سرعة | 2.0.5 | 16.6 كيلو بايت | 8.33 ميغابايت | 7.98 ميغابايت | 16820 | 6.3 |
| 9 | animejs | 2.2.0 | 5.9 كيلو بايت | 7.14 ميغابايت | 8.2 ميغابايت | 9877 | 2.8 |
| 10 | Anim.JS | - | 1.9 كيلو بايت | 7.08 ميغابايت | 9.49 ميغابايت | 6994 | 2.8 |
| 11 | دوجو | 1.14.2 | 53.0 كيلو بايت | 9.1 ميغابايت | 6.5 ميغابايت | 10607 | 2.3 |
| 12 | مورفيوس | 0.7.2 | 2.7 كيلو بايت | 4 ميغابايت | 2.97 ميغابايت | 8543 | 2.1 |
| 13 | jQuery | 3.3.1 | 30.0 كيلو بايت | 25.14 ميغابايت | 25.16 ميغابايت | 7206 | 1.3 |
| 14 | باج | 1.0 | 1.2 كيلو بايت | 1.25 ميغابايت | 0.91 ميغابايت | - | 0.8 |
| 15 | جستاني | 2.5.1 | 7.3 كيلو بايت | 109.5 ميغابايت | 61.18 ميغابايت | 5087 | 0.6 |
| 16 | يوي | 3.18.1 | 24.4 كيلو بايت | 159.59 ميغابايت | 88.35 ميغابايت | 2182 | 0.5 |
| 17 | زبتو | 1.2.0 | 11.0 كيلو بايت | 40.14 ميغابايت | 18.49 ميغابايت | - | 0.3 |
"تحويلات" (2000 كرات كذاب)
| رتبة | اسم المكتبة | نسخة المكتبة | تحديثات في الثانية | إطارات في الثانية |
| 1 | سمين | 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 (الانتقال) | - | - | 15.5 |
| 7 | زبتو | 1.2.0 | - | 12.4 |
| 8 | مورفيوس | 0.7.2 | 6665 | 3.3 |
| 9 | باج | 1.0 | - | 1 |
| 10 | جستاني | 2.5.1 | 1218 | 0.3 |
| 11 | jQuery | 3.3.1 | 309 | 0.01 |
"ألوان" (2000 كرة وميض)
| رتبة | اسم المكتبة | نسخة المكتبة | تحديثات في الثانية | إطارات في الثانية |
| 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 | يوي | 3.18.1 | 84287 | 14.7 |
| 9 | موتوول | 1.6.0 | 8123 | 13.3 |
| 10 | دوجو | 1.14.2 | 33004 | 11.1 |
| 11 | animejs | 2.2.0 | 12483 | 6.3 |
| 12 | jQuery | 3.3.1 | 7002 | 4 |
| 13 | مورفيوس | 0.7.2 | 3902 | 3.2 |
| 14 | زبتو | 1.2.0 | - | 2 |
| 15 | جستاني | 2.5.1 | 4283 | 1 |
| 16 | باج | 1.0 | - | 0.7 |
المتصفح: Chrome (سطح المكتب) ، مدة الاختبار: 30 ثانية (القيمة المتوسطة)
* كومة الذاكرة: حجم الذاكرة التي تتطلبها الرسوم المتحركة للتنفيذ
** تخصيص الذاكرة: كمية الذاكرة التي تم تخصيصها خلال وقت تشغيل الرسوم المتحركة
مقارنة المكتبة: المعيار "كرات كذاب"
< 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 >شائعة
في الكود الخاص بك ، تشمل على النحو التالي:
var Fat = require ( "Fat" ) ;AMD
var Fat = require ( "./fat.min.js" ) ; مساحة الاسم "الدهون" هي أيضًا المشهد الافتراضي (المشهد العالمي).
الطرق العالمية / طرق المشهد:
طرق التحكم:
| خيار | يكتب | تقصير | وصف |
| يبدأ | منطقية | حقيقي | تمكين/تعطيل اللعب التلقائي عند إجراء مكالمة متحركة |
| FPS | رقم | 60 | إطارات في الثانية |
| خيار | يكتب | تقصير | وصف |
| مدة | رقم | 400 | مدة الرسوم المتحركة (MS). |
| يُسَهّل | سلسلة | وظيفة | "خطي" | اختر طريقة تخفيف محددة مسبقًا أو تمرير وظيفة تخفيف مخصصة. |
| تأخير | رقم | 0 | تأخير الرسوم المتحركة (MS). |
| أتصل مرة أخرى | وظيفة | باطل | وظيفة ليتم استدعاؤها عند الانتهاء من الرسوم المتحركة. |
| خطوة | الوظيفة (التقدم ، القيمة) | باطل | وظيفة يتم استدعاؤها على كل علامة (التقدم: الحالة الحالية للتقدم بين 0 و 1 ، القيمة: القيمة الحالية بما في ذلك الوحدة ، مفيدة عند استخدام الخصائص المخصصة). |
| حلقة | رقم | 0 | عدد حلقة التسلسل أو إطارات المفاتيح. تعيين إلى -1 للحلقات اللانهائية. |
| init | منطقية | خطأ شنيع | القوات الحصول على أنماط محسوبة عند البدء في حلقة الرسوم المتحركة التالية. مهم فقط عندما تتغير الأنماط ضمن رد الاتصال على الرسوم المتحركة مباشرة قبل بدء رسوم متحركة جديدة على نفس الخاصية النمط (حلقة الرسوم المتحركة). |
| قوة | منطقية | خطأ شنيع | يتغير نمط القوات (يساوي الكلمة الرئيسية CSS "! مهم"). |
| حازم | منطقية | خطأ شنيع | لا تتجاوز وتحافظ على أعمال الرسوم المتحركة المختلفة على خصائص نمط الكائن. |
| محرك | خيط | "JS" | اختر واحدة من 3 محركات عرض: " JS " ، " CSS " ، " Native ". |
سمين. ANIMATION (محدد [] | عناصر [] ، أنماط [] {} ، خيارات {} ، رد الاتصال)
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"
} ) ;يمكنك استخدام
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.animate يجب عليك تحديد التخفيف عبر Fat.ease["myEasing"] = fn() . سيؤدي هذا إلى إحداث جميع الحسابات ، لذلك فأنت حر في استخدام تعريفات تخفيف ثقيلة حقًا دون أي عيوب أداء.
عندما ترغب في استخدام التخفيف الديناميكي ، والذي يعتمد على حسابات وقت التشغيل ، يجب عليك تمرير وظيفة التخفيف مباشرة إلى Fat.animate . في هذه الحالة ، لن يكون حساب التخفيف مسبقًا. يتيح لك ذلك التحكم في التخفيف برمجيًا وإضافة المنطق أثناء وقت التشغيل.
حدد وظيفة التخفيف الثابتة المخصصة (نمط المعلمة 1):
Fat . ease [ "linear" ] = function ( x ) {
return x ;
} ;س : التقدم الحالي (0.0 - 1.0)
حدد وظيفة التخفيف الثابتة المخصصة (نمط المعلمة 4):
Fat . ease [ "linear" ] = function ( t , b , c , d ) {
return b + ( c - b ) * ( t / d ) ;
} ;T : الوقت الحالي ، ب : من القيمة ، ج : إلى القيمة ، د : المدة
قم بتطبيق التخفيف الثابت المخصص:
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. بدلاً من ذلك ، عند تحريك خصائص الكائن المخصصة ، لا توجد حدود.
فقط أضف خاصية باسم "مخصص":
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);
}
} ) ;خصائص كائن مخصصة:
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%"
} ;استخدم مسبقًا مخصصًا:
Fat . animate ( "#mydiv" , "fade-out-down" ) ;مسبقات مبنية:
احصل على المشهد العالمي (افتراضي):
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 ( ) ;لا تنشئ بشكل كبير مشاهد جديدة ولا تقم أيضًا بإنشائها افتراضيًا. كمية كبيرة من المشاهد المتوازية تؤدي إلى عيب في الأداء.
تشير الدهون داخليًا إلى المشهد العالمي الافتراضي ، حتى تتمكن من استخدام جميع أساليب المشهد على الدهون وفقًا لذلك.
تحديث النمط المفرد:
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 ( ) ; تمرير مستند/عنصر إلى موضع معين (رأسيًا):
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 ) ;
} ) ;حدد موعدًا للمهمة بتأخير والحفاظ على معرف الطلاء:
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%" } ) ;
} ) ;وهذا ما يسمى حلقة الرسوم المتحركة ، ويقوم رد الاتصال بإنشاء رسوم متحركة جديدة على نفس خاصية نمط الكائنات. من الناحية الفنية ، يتم تنفيذ رد الاتصال خلال الإطار الأخير من الرسوم المتحركة الأولى. لذلك لا يزال هناك تشغيل رسوم متحركة على هذه الخاصية وسيتم ورثها بواسطة حلقة الرسوم المتحركة التالية.
أثناء رد الاتصال ، سيتم تظليل التغييرات الخارجية على نفس خاصية الأسلوب والتي سيتم تحريكها بواسطة ميراث حلقة الرسوم المتحركة.
عندما لم يحدث تغيير النمط خارجيًا (على سبيل المثال بواسطة أداة مختلفة) استخدم طريقة SET للحصول على أفضل أداء:
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" ) ;
} ) ;عند إجراء رسوم متحركة مختلفة على نفس خصائص نمط الكائن لتشغيلها بالتوازي ، هناك مشكلة تزامن. بشكل افتراضي ، ترث الرسوم المتحركة الخداعية القطعة القديمة ، وبالتالي فإن الرسوم المتحركة القديمة لم تعد موجودة. وفقًا للمثال من فوق وحدة التحكم ، يسجل فقط "قصير".
لإجبار الرسوم المتحركة المخبوطة ، عليك إضافة الخيار الصارم :
// 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" ) ;
} ) ;الآن تسجل وحدة التحكم "قصيرة" بعد 400 مللي ثانية و "لونغ" بعد 2000 مللي ثانية. على الرغم من أن الخصائص نفسها لا يمكن أن يكون لها قيمتان مختلفتان ، لذلك دائمًا ما يتم تحديد أولوية الرسوم المتحركة الأكثر مبكراً في الواقع.
النظر في المثال التالي:
# mydiv { top : 0 px !important } Fat . animate ( "#mydiv" , { top : "100%" } ) ;إن إعلان نمط CSS من الأعلى له الكلمة الرئيسية ! مهم ويمنع تغييرات النمط العادي.
لحل هذا عليك إضافة خيار القوة :
Fat . animate ( "#mydiv" , { top : "100%" } , { force : true } ) ; هذه هي ميزة تجريبية. جميع المحركات قائمة بذاتها ، يمكنك إنشاء بناء مخصص فقط مع اختيارك المفضل.
| محرك | JS | CSS | محلي |
| العارض | JavaScript (افتراضي) | انتقال CSS | واجهة برمجة تطبيقات الرسوم المتحركة على شبكة الإنترنت |
استخدم انتقالات CSS:
Fat . transition ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ;استخدم واجهة برمجة تطبيقات الرسوم المتحركة:
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 ;هذا يتيح تسجيل وحدة التحكم لعدة عمليات. فقط افتح وحدة التحكم في المتصفحات لجعل هذه المعلومات مرئية.
لا تستخدم البروفيلر في بنيات الإنتاج.
لجمع بعض إحصائيات الأداء لمشاهدك ، تحتاج إلى تعيين علامة Pforler مؤقتة إلى صواب على رأس FAT.JS :
PROFILER = true ;هذا يتيح التوصيف من عدة عمليات.
تتوفر مجموعة من جميع الملفات الشخصية:
window . stats ;يمكنك أيضًا فتح وحدة التحكم في المتصفحات وإدخال هذا الخط للحصول على إحصائيات.
فهرس الصفيف يتوافق مع المشهد .
احصل على إحصائيات من مشهد محدد:
scene . stats ;تنقسم حمولة الإحصائيات العائدة إلى عدة فئات. كل من هذه الفئة توفر قيمها الإحصائية الخاصة.
خصائص احصائيات البروفيلر
| ملكية | وصف |
| وقت | مجموع الوقت (MS) التي تستغرقها العملية (أقل أفضل) |
| عدد | كم مرة تم استدعاء العملية |
| OPS | متوسط العمليات في الثواني (أعلى أفضل) |
| نانو | متوسط التكلفة (NS) لكل عملية/مكالمة (أقل أفضل) |
تحتاج إلى Node.js بما في ذلك Manager Node Package (NPM)
تثبيت التبعيات:
npm installالبناء الكامل:
npm run buildبناء الضوء:
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_transform | صحيح ، خطأ |
| Support_filter | صحيح ، خطأ |
| Support_scroll | صحيح ، خطأ |
| Support_paint | صحيح ، خطأ |
| Support_relative | صحيح ، خطأ |
| Support_Concurrency | صحيح ، خطأ |
| Support_ise | صحيح ، خطأ |
| Support_preset | صحيح ، خطأ |
| Support_engine | السلسلة: "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
