Анимация JavaScript

Ответ 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
);

В этом примере анимация данного элемента будет линейно перемещаться от 0px до 200px в течение 1 секунды (1000 мс).

Ответ 2

Вы можете легко сделать это через CSS3-Transition:

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

Хотя он не поддерживается версиями браузера IE9 и более ранних версий.

Ответ 3

Я провел много исследований, и я наконец-то научился делать это очень хорошо.

Мне нравится размещать свою программу в функции window.onload, так что она не запускает код до тех пор, пока страница не закончит загрузку.

Чтобы сделать анимацию, сделайте функцию (я назову ее функцией рисования) и назову ее, что угодно, за исключением зарезервированных слов, а затем в самом конце функции рисования вызовите функцию requestAnimationFrame и дайте ей имя функции для вызова следующего кадра.

Прежде чем использовать функцию requestAnimationFrame, она должна быть объявлена.

См. Код ниже:

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
}

Ответ 4

С JavaScript вам нужно будет использовать функцию setInterval, иначе это можно сделать в jQuery:

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

Значение adust (5) в соответствии с вашими потребностями, а также направление через =- или =+

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

И вы можете использовать его как:

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

Чтобы остановить анимацию в любое время, вы должны:

clearInterval(interval);

Примечание: Это очень быстрый способ сделать это, чтобы дать вам представление.

Ответ 5

Вам нужно будет использовать функцию тайм-аута javascript и немного изменить значение css. Самый простой способ - увеличивать на заданную величину каждый раз до достижения порога, что даст вам линейную анимацию, которая будет выглядеть неуклюжей и любительской по сравнению с анимацией jQuery по умолчанию swing, которая следует за кривой безье примерно так же, как s -кривой.

Неподтвержденный код должен делать линейную анимацию

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. есть много улучшений, которые нужно сделать для этого блока кода, но он должен заставить вас идти...

Ответ 6

Простейший путь через css.

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

translate3d использует аппаратное ускорение, выполняемое на графическом процессоре. 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);

Ответ 7

CustomAnimation - небольшая библиотека для анимации элементов html, написанная в чистых js.You можете использовать эту библиотеку.