Timing, स्प्रिंग और संयोजन

timing, spring और decay

timing तय duration में एक वक्र पर चलता है। spring भौतिकी का पालन करता है और उसकी कोई तय अवधि नहीं होती। decay एक वेग से शुरू होकर धीमा होता है।

वही driver संख्या, ValueXY या रिकॉर्ड लेते हैं, इसलिए { x, y, opacity } साथ हिल सकते हैं।

स्प्रिंग के पैरामीटर

एक ही पैरामीटर-समूह इस्तेमाल करें। उसके बिना आपको React Native का डिफ़ॉल्ट स्प्रिंग मिलता है (tension 40, friction 7)। स्प्रिंग का velocity डिफ़ॉल्ट रूप से उस गति का वेग है जिसे वह रोकता है।

spring(value, { toValue: 1 }); // React Native default
spring(value, { toValue: 1, stiffness: 260, damping: 20 }); // physical
spring(value, { toValue: 1, bounciness: 8, speed: 12 }); // React Native style
spring(value, { toValue: 1, tension: 40, friction: 7 }); // origami style

संयोजन

sequence एक के बाद एक चलाता है, parallel साथ में, stagger हर एक को देरी के बाद शुरू करता है, delay इंतज़ार करता है और loop दोहराता है। परिणाम फिर से एक कंट्रोलर है, इसलिए संयोजन एक-दूसरे में रखे जा सकते हैं।

start, stop और reset

हर कंट्रोलर में start(callback?), stop() और reset() होते हैं। callback को { finished } मिलता है: गति रुकने या बदले जाने पर false।

उसी मान पर नया driver शुरू करने से चलता हुआ driver मौजूदा स्थिति से बदल जाता है। किसी भी सिरे पर कोई छलाँग नहीं।

const move = timing(value, { toValue: 1, duration: 600 });

move.start(({ finished }) => {
  // finished is false when stopped or replaced by a new animation
});
move.stop(); // keeps the value where it is on screen
move.reset(); // returns to where this animation started

दूसरे मान के पीछे चलना

जीवित toValue हर बार उस मान के बदलने पर driver फिर शुरू करता है, React Native के tracking की तरह। follow(target, source) वही स्प्रिंग वाला जुड़ाव नामित फ़ंक्शन के रूप में है।

// A live toValue tracks another value, like React Native tracking.
spring(badge, { toValue: pointer, stiffness: 300, damping: 26 }).start();

// follow() is the same connection as a named function.
follow(badge, pointer, { stiffness: 300, damping: 26 });

Easing और कीफ़्रेम

Easing React Native से मेल खाता है: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier और सहायक in, out, inOut। keyframes(value, frames, options) एक मान को कई संख्याओं से गुज़ारता है, वैकल्पिक times और repeat के साथ।