दूरी

Question

के फ़ंक्शन के रूप में आसान अवधि की गणना करें मुझे एनीमेशन के लिए अवधि की गणना करने के लिए कुछ फ़ंक्शन चाहिए जैसे कि दूरी बदलती है, गति स्थिर बनी रहती है।

==================================== 
|         | 
|<============ width =============>| 
|         | 
|   <====== distance1 ======>| 
|         | 
|    <=== distance2 ===>| 
|         | 
=================================== 

यह पूरा करने के लिए जब रैखिक सहजता के साथ काम कर तुच्छ है,

function getDuration (width, distance, duration) { 
    return duration * (1 - distance/width); 
} 

बहरहाल, यह और अधिक जटिल जब, गैर रेखीय कार्यों में ढील का उपयोग कर हो जाता है इस तरह के easeInOutQuad (इस समस्या का एक उदाहरण के रूप में: http://jsfiddle.net/Wexcode/rdrbm8et/3/)।

easeInOutQuad जैसे एक आसान कार्य को देखते हुए, मैं इस अवधि की गणना कैसे करूं कि किसी भी दूरी की गति स्थिर रहती है?

easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }, 

स्रोत: https://gist.github.com/gre/1650294

स्रोत: http://api.jqueryui.com/easings/

Answer 1

आप सूत्र द्वारा उत्पन्न चाप के calculate लंबाई करने के आधुनिक गणित का उपयोग करना चाहिए।

अच्छी व्याख्या here है। आप केवल सूत्र

Answer 2

एक समारोह y = f(t), जहां y दूरी पर है और टी समय बस टी के लिए हल है, और निर्धारित करने के लिए कितनी देर तक यह एक करने के लिए पाने के लिए लेता t = g(y) फ़ंक्शन का उपयोग है को देखते हुए नीचे का उपयोग करना चाहिए दी गई दूरी

उदाहरण के लिए, easeInOutQuad सहजता में, -1+(4-2*t)*t हल किया जा सकता:

स्रोत: http://www.wolframalpha.com/input/?i=Solve%28y+%3D+-1%2B%284-2*t%29*t%2C+t%29

अभ्यास में, आप गुणा होगा t बार अपने duration अपने नए अवधि पाने के लिए।

var ratio = distance/width; 
if (ratio <= .5) { 
    return duration * Math.sqrt(ratio * 1/2); 
} else if (ratio <= 1) { 
    return duration * (1 - Math.sqrt(1-ratio)/Math.sqrt(2)); 
} 

http://jsfiddle.net/Wexcode/rdrbm8et/6/