जावास्क्रिप्ट एनीमेशन

Question

मैं div को 200px क्षैतिज रूप से जावास्क्रिप्ट में ले जाने की कोशिश कर रहा हूं।

नीचे दिया गया कोड इसे पिक्सल पर कूदता है, लेकिन क्या यह jQuery का उपयोग किये बिना एनिमेटेड दिखने का कोई तरीका है?

function() { 
    var div = document.getElementById('challengeOneImageJavascript'); 
    div.style.left = "200px"; 
} 

Answer 1

यहाँ एक बुनियादी एनीमेशन सेटअप है:

function animate(elem,style,unit,from,to,time) { 
    if(!elem) return; 
    var start = new Date().getTime(), 
     timer = setInterval(function() { 
      var step = Math.min(1,(new Date().getTime()-start)/time); 
      elem.style[style] = (from+step*(to-from))+unit; 
      if(step == 1) clearInterval(timer); 
     },25); 
    elem.style[style] = from+unit; 
} 

का उपयोग करें:

animate(
    document.getElementById('challengeOneImageJavascript'), 
    "left","px",0,200,1000 
); 

यह उदाहरण दिया तत्व चेतन 1 सेकंड से समय के साथ 200px को 0px से रैखिक स्लाइड करने के लिए होगा (1000 एमएस)।

Answer 2

आप आसानी से CSS3-Transition के माध्यम से ऐसा कर सकते हैं:

#challengeOneImageJavascript { 
    -webkit-transition: left .2s; 
     -moz-transition: left .2s; 
     -o-transition: left .2s; 
      transition: left .2s; 
} 

हालांकि, यह IE9 द्वारा समर्थित नहीं है और पहले ब्राउज़र संस्करणों।

Answer 3

जावास्क्रिप्ट के साथ

, आप setInterval समारोह का उपयोग करना होगा या इस लिए कि यह कैसे jQuery में किया जा सकता है:

$('#challengeOneImageJavascript').animate({left: '=-5'}); 

जला हुआ मूल्य (5) को अपनी आवश्यकताओं के साथ-साथ दिशा के अनुसार =- या =+

के माध्यम से

वेनिला जावास्क्रिप्ट के साथ :

var interval; 
var animate = function(id, direction, value, end, speed){ 
    var div = document.getElementById(id); 
    interval = setInterval(function() { 
     if (+(div.style) === end) { 
      clearInterval(interval); 
      return false; 
     } 
     div.style[direction] += value; // or -= as per your needs 
    }, speed); 
} 

और आप इसे पसंद का उपयोग कर सकते हैं:

animate('challengeOneImageJavascript', 'left', 5, 500, 200); 

एनीमेशन किसी भी समय रोकने के लिए, आप क्या करेंगे:

clearInterval(interval); 

नोट:यह सिर्फ एक बहुत त्वरित तरीका यह है कि आप एक देने के लिए क्या करने के लिए विचार।

Answer 4

आपको एक जावास्क्रिप्ट टाइमआउट फ़ंक्शन का उपयोग करना होगा, और एक समय में सीएसएस मान को थोड़ा बदलना होगा। सबसे आसान तरीका प्रत्येक सीमा तक पहुंचने तक एक सेट राशि द्वारा बढ़ाना होगा, जो आपको एक रैखिक एनीमेशन देगा, जो jQuery के डिफ़ॉल्ट swing एनीमेशन की तुलना में घबराहट और शौकिया दिखता है जो एक एस-वक्र की तरह एक बेजियर वक्र का पालन करता है ।

Untested कोड रैखिक एनीमेशन

var lefty = 0; 
var animate = function(){ 
    lefty += 20; 
    var div = document.getElementById('challengeOneImageJavascript'); 
    div.style.left = lefty +"px"; 
    if(lefty < 200) 
     setTimeout(animate(),100); 
} 

animate() 

N.B. करना चाहिए कोड के उस ब्लॉक को बनाने के लिए बहुत सारे सुधार हैं, लेकिन आपको यह जाना चाहिए ...

Answer 5

मैंने शोध का एक टन किया, और अंततः मैंने यह सीखा कि यह वास्तव में कैसे किया जाए।

मुझे अपने प्रोग्राम को विंडो में रखना पसंद है। ऑनलोड फ़ंक्शन, इस तरह से यह पृष्ठ लोड होने तक कोड चला नहीं जाता है।

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

अनुरोध से पहलेएनीमेशन फ़्रेम फ़ंक्शन का उपयोग किया जा सकता है इसे घोषित किया जाना चाहिए।

नीचे कोड देखें:

window.onload = function() { 
 
    function draw() { // declare animation function 
 
    context.fillStyle = "white"; 
 
    context.fillRect(0, 0, 400, 400); 
 
    requestAnimationFrame(draw); // make another frame 
 
    } 
 
    var requestAnimationFrame = // declare the 
 
    window.requestAnimationFrame || // requestAnimationFrame 
 
    window.mozRequestAnimationFrame || // function 
 
    window.webkitRequestAnimationFrame || 
 
    window.msRequestAnimationFrame; 
 
    draw(); // call draw function 
 
}

नोट: लाइन है कि कॉल ड्रॉ समारोह चलेंगे, तो आप सब कुछ डाल करने के लिए की जरूरत है आप चलाना चाहते हैं इससे पहले के बाद कुछ भी नहीं है रेखा जो ड्रॉ फ़ंक्शन को कॉल करती है।

Answer 6

सीएसएस के माध्यम से सरल तरीका।

https://jsfiddle.net/pablodarde/5hc6x3r4/

translate3d GPU पर चल हार्डवेयर त्वरण का उपयोग करता है। http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

एचटीएमएल

<div class="movingBox"></div> 

सीएसएस

.movingBox { 
    width: 100px; 
    height: 40px; 
    background: #999; 
    transform: translate3d(0,0,0); 
    transition: all 0.5s; 
} 

.moving { 
    transform: translate3d(200px,0,0); 
    background: #f00; 
} 

जावास्क्रिप्ट

const box = document.getElementsByClassName('movingBox')[0]; 

setTimeout(() => { 
    box.className += ' moving'; 
}, 1000); 

Answer 7

CustomAnimation एचटीएमएल तत्वों को एनिमेट करने के लिए एक छोटी सी मुक्ति है जो शुद्ध जेएस में लिखी गई है। आप इस libary का उपयोग कर सकते हैं।