Анимация с помощью JavaScript

Как анимировать div в определенные координаты X и Y и выбирать скорость с помощью JavaScript?Анимация с помощью JavaScript

<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Animation</title> 
    </head> 

<body> 

    <div id="img"><img src="image"</div> 

    <form id="xy"> 
     X<input type="text" id="X"><br> 
     Y<input type="text" id="Y"><br> 
     V<input type="text" id="V"><br> 
     <input type="button" value="Start"> 
    </form> 
</body> 
</html>

Спасибо.

источник

2014-12-09 Wizerol

Вы не дают достаточно подробно, поэтому я могу только предложить что-то быстро и весело, используя CSS переходы. Проверьте это.

var image = document.querySelector('#img'); 
 

 
document.querySelector('#xy [type=button]').onclick = function() { 
 
    
 
    var x = document.querySelector('#X').value, 
 
     y = document.querySelector('#Y').value, 
 
     v = document.querySelector('#V').value; 
 
    
 
    image.style.transitionDuration = v + 's'; 
 
    image.style.left = x + 'px'; 
 
    image.style.top = y + 'px'; 
 
};

#img { 
 
    position: absolute; 
 
    transition: all 2s linear; 
 
    left: 200px; 
 
    top: 10px; 
 
}

<form id="xy"> 
 
    X <input type="number" id="X" value="100" step="10"><br> 
 
    Y <input type="number" id="Y" value="100" step="10"><br> 
 
    V <input type="number" id="V" value="1" step="0.1"><br> 
 
    <input type="button" value="Start"> 
 
</form> 
 
    
 
<div id="img"><img src="http://placehold.it/100/100"/></div>

источник

2014-12-09 15:09:48 dfsq

Это зависит от того, насколько развита анимация. Если анимация включает пользовательские функции, такие как щелчок или ввод текста, необходим JavaScript. Но в остальном я считаю, что для анимации вам понадобится использовать CSS3, например, Cascade Style Sheet. Вот удобный сайт для изучения этого; плюс другие языки тоже!

http://www.w3schools.com/css/css3_intro.asp

с:

источник

2014-12-09 15:08:05

Анимация с помощью JavaScript

ответ

Смежные вопросы