JavaScript animacja

Question

Próbuję animować div przenoszenie 200px poziomo w JavaScript.

Poniższy kod powoduje, że przeskakuje on piksele, ale czy istnieje sposób, aby wyglądał na animowany bez użycia jQuery?

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

Answer 1

Oto podstawowa konfiguracja animacja:

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; 
} 

Sposób użycia:

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

Ten przykład będzie animować dany element przesuwać liniowo od 0px do 200px na czas 1 sekundy (1000 ms).

Answer 2

Można łatwo to zrobić poprzez CSS3-Transition:

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

Mimo, że nie jest obsługiwana przez IE9 i wcześniejsze wersje przeglądarek.

Answer 3

z JavaScript, trzeba będzie użyć setInterval funkcję lub jest to w jaki sposób można to zrobić w jQuery:

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

wartość spalony na słońcu (5) jak na swoje potrzeby, jak i kierunku poprzez =- lub =+

z wanilii JavaScript:

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); 
} 

I można go używać jak:

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

Aby zatrzymać animację dowolny czas, byś zrobił:

clearInterval(interval); 

Uwaga:To po prostu bardzo szybki sposób to zrobić, aby dać pomysł.

Answer 4

Będziesz musiał użyć funkcji limitu czasu javascript i zmieniać wartość css na raz. Najprostszym sposobem byłoby zwiększenie o określoną wartość za każdym razem, aż do osiągnięcia progu, co dałoby liniową animację, która wyglądałaby na chwiejną i amatorską w porównaniu do domyślnej animacji jQuery, która jest zgodna z krzywą Beziera w przybliżeniu jak krzywa-S .

kod Nietestowane powinien zrobić animację liniowy

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() 

nb do tego bloku kodu jest wiele ulepszeń, ale powinno ci to zabrać ...

Answer 5

Zrobiłem mnóstwo badań i w końcu nauczyłem się, jak to zrobić naprawdę dobrze.

Lubię umieszczać mój program w funkcji window.onload, w ten sposób nie uruchamiaj kodu, dopóki strona nie zakończy ładowania.

Aby wykonać animację, wykonaj funkcję (nazwij ją funkcją rysowania) i nazwij ją, co chcesz, oprócz słów zarezerwowanych, a następnie na samym końcu funkcji rysowania wywołaj funkcję requestAnimationFrame i nadaj mu nazwa funkcji, którą należy nazwać następną ramką.

Przed funkcją requestAnimationFrame można ją zgłosić.

Zobacz poniższy kod:

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 
 
}

Uwaga: Nic po linii, która wywołuje funkcję losowanie będzie działać, więc trzeba postawić wszystko chcesz uruchomić przed linia, która wywołuje funkcję rysowania.

Answer 6

Najprostszy sposób przez css.

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

translate3d wykorzystuje akcelerację sprzętową działającego na GPU. http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

HTML

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

CSS

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

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

JavaScript

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

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

Answer 7

CustomAnimation to mała biblioteka do animowania elementów HTML, napisana czystym js. Możesz użyć tej biblioteki.