D3.js 5 - ease

d3-ease




d

التيسير هو وسيلة لتشويه الوقت للتحكم في الحركة الظاهرة في الرسوم المتحركة. يستخدم بشكل شائع في التباطؤ والتباطؤ . عن طريق تخفيف الوقت ، تكون التحولات المتحركة أكثر سلاسة وتظهر حركة أكثر منطقية.

تطبق أنواع التخفيف في هذه الوحدة طريقة التخفيف التي تستغرق وقتًا عاديًا t وتُرجع الوقت " الميسر " المقابل tʹ . يكون كل من الوقت الطبيعي والوقت المريح في النطاق [0،1] ، حيث يمثل 0 بداية الحركة بينما يمثل 1 النهاية ؛ بعض أنواع التخفيف ، مثل elastic ، قد ترجع مرات تخفيف قليلا خارج هذا النطاق. يجب أن يُرجع نوع التسهيل الجيد 0 إذا كان t = 0 و 1 إذا كان t = 1. راجع مستكشف التسهيل للحصول على عرض مرئي.

تعتمد أنواع التخفيف هذه إلى حد كبير على عمل روبرت بنر .

تثبيت

إذا كنت تستخدم NPM ، npm install d3-ease . خلاف ذلك ، قم بتنزيل أحدث إصدار . يمكنك أيضًا التحميل مباشرةً من d3js.org ، إما كمكتبة مستقلة أو كجزء من D3 4.0 . يتم دعم بيئات AMD و CommonJS و vanilla. في الفانيليا ، يتم تصدير d3 العالمية:

<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script>

var ease = d3.easeCubic;

</script>

جرب d3- سهولة في متصفحك.

مرجع API

سهولة ( ر )

بالنظر إلى الوقت المعتاد المحدد t ، عادةً في النطاق [0،1] ، تُرجع الوقت "المُخفَف" ، أيضًا في [0،1] أيضًا. يمثل 0 بداية الحركة و 1 تمثل النهاية. يُرجع التنفيذ الجيد 0 إذا كان t = 0 و 1 إذا كان t = 1. راجع مستكشف التسهيل للحصول على عرض مرئي. على سبيل المثال ، لتطبيق التخفيف cubic :

var te = d3.easeCubic(t);

وبالمثل ، لتطبيق تخفيف elastic مخصصة:

// Before the animation starts, create your easing function.
var customElastic = d3.easeElastic.period(0.4);

// During the animation, apply the easing function.
var te = customElastic(t);
D3. easyLearear ( t ) Source

التخفيف الخطي وظيفة الهوية ؛ الخطي ( t ) إرجاع t .

خطي

D3. easPolyIn ( ر ) Source

متعدد الحدود تخفيف. يثير ر إلى exponent المحدد. إذا لم يتم تحديد الأس ، cubicIn الافتراضية على 3 ، أي ما يعادل cubicIn .

polyIn

D3. easPolyOut ( ر ) Source

عكس متعدد الحدود التخفيف. أي ما يعادل 1 - polyIn (1 - ر ). إذا لم يتم تحديد exponent ، cubicOut الافتراضية على 3 ، أي ما يعادل cubicOut .

polyOut

D3. easPoly ( ر ) Source
D3. easPolyInOut ( ر ) Source

متعدد الحدود التخفيف؛ تحجيم polyIn لـ t في [0 ، 0.5] و polyOut لـ t في [0.5 ، 1]. إذا لم يتم تحديد exponent ، فسيتم تعيين القيمة الافتراضية على 3 ، أي ما يعادل cubic .

polyInOut

بولي . الأس ( ه ) Source

إرجاع تخفيف متعدد الحدود جديد مع الأس المحدد e . على سبيل المثال ، لإنشاء مكافئات linear quad cubic :

var linear = d3.easePoly.exponent(1),
    quad = d3.easePoly.exponent(2),
    cubic = d3.easePoly.exponent(3);
D3. easQuadIn ( ر ) Source

تخفيف التربيعية. أي ما يعادل polyIn . exponent (2).

quadIn

D3. easQuadOut ( ر ) Source

عكس التخفيف من الدرجة الثانية. أي ما يعادل 1 - quadIn (1 - ر ). أي ما يعادل أيضا polyOut . exponent (2).

quadOut

D3. easQuad ( ر ) Source
D3. easQuadInOut ( ر ) Source

تخفيف متماثل من الدرجة الثانية. quadIn for t في [0، 0.5] و quadOut لـ t في [0.5، 1]. أي ما يعادل أيضا poly . exponent (2).

quadInOut

D3. easyCubicIn ( ر ) Source

تخفيف مكعب. أي ما يعادل polyIn . exponent (3).

cubicIn

D3. easCubicOut ( ر ) Source

عكس التخفيف مكعب. أي ما يعادل 1 - cubicIn (1 - ر ). أي ما يعادل أيضا polyOut . exponent (3).

cubicOut

D3. easCubic ( ر ) Source
D3. easCubicInOut ( ر ) Source

تخفيف مكعب متماثل. تحجيم cubicIn لـ t في [0، 0.5] و cubicOut لـ t في [0.5، 1]. أي ما يعادل أيضا poly . exponent (3).

cubicInOut

D3. easySinIn ( ر ) Source

تخفيف الجيوب الأنفية. إرجاع الخطيئة ( ر ).

sinIn

D3. easSinOut ( ر ) Source

عكس تخفيف الجيوب الأنفية. أي ما يعادل 1 - sinIn (1 - ر ).

sinOut

D3. easySin ( ر ) Source
D3. easSinInOut ( ر ) Source

تخفيف الجيوب الأنفية متماثل. تحجيم sinIn لـ t في [0، 0.5] و sinOut لـ t في [0.5، 1].

sinInOut

D3. easExpIn ( ر ) Source

تخفيف الأسي. يرفع 2 إلى الأس 10 * ( t - 1).

expIn

D3. easyExpOut ( ر ) Source

عكس التخفيف الأسي. أي ما يعادل 1 - expIn (1 - ر ).

expOut

D3. easExp ( ر ) Source
D3. easExpInOut ( ر ) Source

التخفيف الأسي متماثل. جداول expIn لـ t في [0، 0.5] و expOut لـ t في [0.5، 1].

expInOut

D3. easyCircleIn ( ر ) Source

تخفيف دائري.

circleIn

D3. easyCircleOut ( t ) Source

عكس التعميم التخفيف. أي ما يعادل 1 - circleIn (1 - ر ).

circleOut

D3. easyCircle ( ر ) Source
D3. easyCircleInOut ( t ) Source

تخفيف دائري متماثل. تحجيم circleIn t في [0 ، 0.5] و circleOut لـ t في [0.5 ، 1].

circleInOut

D3. easyElasticIn ( ر ) Source

تخفيف مرونة ، مثل الشريط المطاطي. amplitude period التذبذب قابلة للتكوين ؛ إذا لم يتم تحديد ذلك ، فسيتم افتراضيًا إلى 1 و 0.3 على التوالي.

إيلاستين

D3. easyElastic ( ر ) Source
D3. easyElasticOut ( ر ) Source

عكس مرونة التخفيف. أي ما يعادل 1 - elasticIn (1 - ر ).

elasticOut

D3. easyElasticInOut ( t ) Source

تخفيف مرونة متناظرة. موازين elasticIn t في [0 ، 0.5] و elasticOut لـ t في [0.5 ، 1].

elasticInOut

مرونة . السعة ( أ ) Source

إرجاع تخفيف مرن جديد بالسعة المحددة

مرونة . الفترة ( ع ) Source

إرجاع تخفيف مرن جديد مع الفترة المحددة p .

D3. easBackIn ( ر ) Source

التخفيف Anticipatory ، مثل راقص يثني ركبتيه قبل القفز من الأرض. درجة overshoot هو شكلي. لم يتم تحديده ، يتم افتراضه إلى 1.70158.

عودة في

D3. easBackOut ( ر ) Source

عكس التخفيف الاستباقي ؛ أي ما يعادل 1 - backIn (1 - ر ).

تراجع

D3. easBack ( ر ) Source
D3. easBackInOut ( ر ) Source

التخفيف الاستباقي المتماثل ؛ scales backIn for t in [0، 0.5] and backOut for t in [0.5، 1].

backInOut

العودة . تجاوز ( ق ) Source

إرجاع تخفيف جديد للظهر مع التجاوز المحدد s .

D3. easyBounceIn ( ر ) Source

ترتد تخفيف ، مثل كرة مطاطية.

bounceIn

D3. easyBounce ( ر ) Source
D3. easBounceOut ( ر ) Source

عكس الارتداد تخفيف. ما يعادل 1 - bounceIn (1 - ر ).

bounceOut

D3. easyBounceInOut ( t ) Source

ترتد متناظرة تخفيف. bounceIn لـ t في [0، 0.5] و bounceOut لـ t في [0.5، 1]

bounceInOut