मैं कैसे नियंत्रण/तत्व जड़ता के साथ कदम बनाते हैं?

Question

आधुनिक यूआई चलते समय अपने यूआई elments अच्छा जड़ता देने शुरू कर रहे हैं। टैब में स्लाइड, पृष्ठ संक्रमण, यहां तक ​​कि कुछ सूची बॉक्स और स्क्रॉल elments के लिए उनके लिए अच्छा जड़ता है (उदाहरण के लिए आईफोन)। इसके लिए सबसे अच्छा अलगाव क्या है? यह केवल गुरुत्वाकर्षण से अधिक है क्योंकि वे तेज़ी से बढ़ते हैं, और फिर धीमे होने पर धीमे होते हैं। मैंने अधिकतम (टर्मिनल) वेग तक तेजी लाने के लिए विभिन्न सूत्रों की कोशिश की है और फिर धीमा कर दिया है लेकिन कुछ भी मैंने सही "महसूस" करने की कोशिश नहीं की है। यह हमेशा थोड़ा सा महसूस करता है। क्या इसके लिए कोई मानक है, या यह सिर्फ अलग-अलग संख्याओं के साथ खेलने का मामला है जब तक कि यह सही दिखता/महसूस नहीं करता?

Answer 1

आप दो अलग अलग चीजों के बारे में यहाँ बात कर रहे हैं। चीजें देने अवशिष्ट गति जब आप उन्हें एक खींचें से जारी -

एक गति है। यह बस एक बात का वेग याद जब उपयोगकर्ता इसे जारी करता है, तो हर फ्रेम वस्तु है कि वेग को लागू करने के और भी कुछ राशि से हर फ्रेम वेग को कम के बारे में है। आप महसूस करते हैं कि आप जिस फ्रेम को प्रयोग करते हैं, वह हर फ्रेम को कैसे कम करता है।

दूसरी बात यह आसानी में और आसानी बाहर एनीमेशन है। यह केवल लाइनरली इंटरपोलिंग के बजाय, दो पदों के बीच स्थानांतरित करते समय वस्तुओं को आसानी से तेज़/गतिशील करने के बारे में है। इससे पहले कि आप किसी ऑब्जेक्ट को दो पदों के बीच इंटरपोल करने के लिए उपयोग करते हैं, आप इसे सिग्मोइड फ़ंक्शन के माध्यम से अपने 'टाइम' मान को खिलाकर ऐसा करते हैं। ऐसा एक कार्य

smoothstep(t) = 3*t*t - 2*t*t*t [0 <= t <= 1] 

यह आपको आसानी से और आसानी से व्यवहार दोनों देता है। हालांकि, आप आमतौर पर जीयूआई में उपयोग किए जाने वाले आसानी से आसानी से देखेंगे। यही है, वस्तुएं तेजी से आगे बढ़ने लगती हैं, फिर अपनी अंतिम स्थिति पर रोक लगती हैं। यह प्राप्त करने के लिए कि आप केवल वक्र के दाहिने आधे का उपयोग करें, यानी।

smoothstep_eo(t) = 2*smoothstep((t+1)/2) - 1 

Answer 2

यह संख्या के साथ खेल रहा है .. क्या अच्छा लगता है अच्छा है।

मैं वर्षों के लिए जादू फार्मूले अपने आप को विकसित करने के लिए कोशिश की है। अंत में बदसूरत हैक हमेशा अच्छा लगा। बस सुनिश्चित करें कि आप किसी भी तरह से अपने एनिमेशन सही तरीके से करते हैं और किसी प्रकार की रेड्रा/रीफ्रेश दर पर भरोसा नहीं करते हैं। ये ओएस के आधार पर बदल जाते हैं।

Answer 3

मैं इस पर कोई विशेषज्ञ नहीं हूं, लेकिन मुझे लगता है कि वे वर्गबद्ध सूत्रों के साथ किए जाते हैं, कि जब सही पैरामीटर दिए जाते हैं, तो तेजी से या धीमी गति से शुरू होते हैं और अंत तक एक नाटकीय रूप से बढ़ते या कम हो जाते हैं।

Answer 4

माइक एफ के समझ में आ गया: आप समय (वेग के साथ चारों ओर गंदगी नहीं है के संबंध में किसी ऑब्जेक्ट की स्थिति की गणना करने के लिए एक समय-स्थिति समारोह लागू, यह केवल उपयोगी है जब आप पता लगाने की कोशिश कर रहे हैं क्या एल्गोरिथ्म का उपयोग करना चाहते)

Robert Penner's easing equations and demo शानदार रहे हैं।; jQuery demo की तरह, वे नेत्रहीन प्रदर्शित सहजता कैसा दिखता है, लेकिन वे भी आप आप इसके पीछे समीकरण की एक विचार देने के लिए एक पद के समय ग्राफ दे।

Answer 5

आप के लिए क्या देख रहे हैं interpolation है। मोटे तौर पर, वहाँ कार्यों कि 0 से 1 से भिन्न और जब बढ़ाया और अनुवाद अच्छे लग आंदोलन बनाने हैं। यह अक्सर फ्लैश में प्रयोग किया जाता है और उदाहरण के टन कर रहे हैं: (नोट:। फ्लैश प्रक्षेप में नाम "tweening" और प्रक्षेप का सबसे लोकप्रिय प्रकार "आसान" के रूप में जाना जाता है उठाया है)

एक नज़र SparkTable: Visualize Easing Equations: इस पर आंदोलन प्रकार के लिए एक सहज ज्ञान युक्त महसूस करने के लिए।

जब आंदोलन, स्केलिंग, घूर्णन एक अन्य एनिमेशन पर लागू होता है तो ये समीकरण गति, या घर्षण, या उछाल या लोच की भावना दे सकते हैं। उदाहरण के लिए जब एनीमेशन पर लागू होता है तो Robert Penners easing demo पर एक नज़र डालें। वह एनीमेशन कार्यों की सबसे लोकप्रिय श्रृंखला के लेखक हैं (मुझे विश्वास है कि एडोब के निर्मित इन पर आधारित हैं)। इस प्रकार का संक्रमण समान रूप से अल्फा के (समान रूप से) के लिए भी काम करता है।

उपयोग के लिए कुछ विधि है। आसानी से धीमा शुरू करें, गति बढ़ाएं और धीमा हो जाएं। आसानी से शुरू होता है और तेजी से धीमा हो जाता है (घर्षण की तरह) और आसानी से धीमा शुरू होता है और गति (गति की तरह) शुरू होता है। महसूस करने के आधार पर आप चाहते हैं कि आप उचित विकल्प चुनें। फिर आप प्रभाव की ताकत के लिए साइन, एक्सपो, क्वाड और इतने पर चुनते हैं। दूसरों को उनके नामों से काम करना आसान होता है (उदाहरण के लिए बाउंस बाउंस, बैक थोड़ा आगे जाता है और फिर लोचदार की तरह वापस आता है)।

AS3 के लिए link to the equations from the popular Tweener library यहां है। आप इन्हें जावास्क्रिप्ट (या किसी अन्य भाषा) में बिना किसी परेशानी के पुनः लिखने में सक्षम होना चाहिए।