Динамические анимации?

Так что я пытаюсь сделать это ДИВ анимация немного более реалистичным путем внедрения «физический движок», который немного напоминает, как это было на самом деле ускорения и замедления ... вроде ...Динамические анимации?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Gio is Fay</title> 
    <link rel="stylesheet" href="sliding.css"/> 
</head> 
<body> 
    <div id="button"> 
    <h5>Click me!</h5> 
    <h4>HARDER!</h4> 
    </div> 

    <div id="moving"></div> 

    <script type="text/javascript"> 
     var sliding = document.getElementById("moving"); 
     var margin = sliding.style.marginTop | 100; 

     var speeds = [0.5, 1, 3, 6, 8, 9, 10, 10, 10, 10, 10, 10, 9, 8, 5, 3, 1]; 
     var length = speeds.length; 

     sliding.onclick = move; 

     function move() { 
      window.log("Herro!"); 
      for (i = 0; i < length; i++) { 
       var x = speeds[i]; 
       margin += x * 5; 
       sliding.style.marginTop = margin + "px"; 
      } 
     } 
    </script> 
</body> 
</html>

Когда я нажимаю на div, неудивительно, ничего не происходит. Я поставил окно предупреждения, чтобы сообщить мне, была ли функция запущена, и, видимо, это не так. Или, по крайней мере, предупреждение никогда не появлялось. Не знаю, почему. В консоли нет ошибок. Помогите?

источник

2014-12-11 Tommay

'window.log =/= console.log'. – h2ooooooo

просто быстрая заметка: если вы хотите «подражать» физике, используйте формулы. а не массивы с номерами ... – Banana

Что вы делаете, уже поставляется с CSS бесплатно. Для некоторых примеров см. Http: // easings.net – Lee

Я пробовал свой код, и все, кроме window.log(), «работало», поэтому я не уверен, почему вы вообще не получали никаких результатов.

Это действительно не лучший способ оживить. Вы должны использовать requestAnimationFrame(), который очень похож на setTimeout(), но оптимизирован для анимации. Когда я получаю ваш код, вы не видите анимацию вообще, потому что у вас всего 17 кадров, и эти 17 проходов через цикл for бывают быстрыми. Поэтому загляните в requestAnimationFrame() для анимации с помощью js. Вот как будет выглядеть ваш код: Внесите это изменение:

var sliding = document.getElementById("moving"); 
var margin = sliding.style.marginTop | 10; 

var speeds = [0.5, 1, 3, 6, 8, 9, 10, 10, 10, 10, 10, 10, 9, 8, 5, 3, 1]; 
var length = speeds.length; 
var frame = 0; 

sliding.onclick = function() { 
    frame = 0; 
    requestAnimationFrame(move); 
} 

function move() { 
    var x = speeds[frame]; 
    margin += x; 
    sliding.style.marginTop = margin + "px"; 
    if (frame < length) 
    requestAnimationFrame(move); 
    frame++; 
}

Вы также должны пересмотреть свой метод изменения ставки. Я бы использовал триггерные функции. Таким образом, вы можете легко изменить продолжительность и расстояние, на которые движется div. Вот пример этого, не стесняйтесь использовать его. Вы можете запустить этот фрагмент, чтобы посмотреть, как он выглядит.

var sliding = document.getElementById("moving"); 
 
var margin = sliding.style.marginTop | 10; 
 

 
// a few settings for our animation 
 
var theta = 0.0; //in radians 
 
var distance = 100; //in pixels 
 
var duration = 1; //in seconds 
 
var frameRate = 60; //fps 
 
var down = false; //a switch so we can move up and down, we are starting in the up position 
 

 
sliding.onclick = function() { 
 
    if (down) 
 
    //if we need to go up, we start at 1 (cos(PI) = -1) 
 
    theta = Math.PI; 
 
    else 
 
    //otherwise we start at 0 
 
    theta = 0.0; 
 
    
 
    //flip it 
 
    down = !down; 
 
    
 
    //and away we go 
 
    requestAnimationFrame(move); 
 
} 
 

 
function move() { 
 
    //the margin is determined with cos 
 
    margin = (-1 * Math.cos(theta) + 1) * distance + 10; 
 
    //and set 
 
    sliding.style.marginTop = margin + "px"; 
 
    //our theta advances 
 
    theta += (Math.PI)/frameRate/duration; 
 
    //and we continue if we are not at either end 
 
    if ((down && theta <= Math.PI) || (!down && theta <= Math.PI * 2)) 
 
    requestAnimationFrame(move); 
 
}

#moving { 
 
    margin-top: 10px; 
 
    padding: 10px; 
 
    background: #047; 
 
    color: #bbb; 
 
    border-radius: 5px; 
 
    width: 80px; 
 
    text-align: center; 
 
}

<div id="moving">DIV</div>

И, наконец, JQuery имеет этот материал построен в так что вам не придется беспокоиться о изобретать колесо, так что смотрите, чтобы это. Надеюсь, это поможет!

источник

2014-12-11 20:50:18 jamador

Да, я знаю, что jQuery делает все это, но я пытаюсь научиться самому это делать. Зачем? Не знаю. Благодаря! – Tommay

Прежде всего, как упомянуто. window.log не является функцией. Я получаю эту ошибку в консоли. Вам также нужно будет установить положение вашего moving div относительно того, чтобы он перемещался.

Вот скрипка вашего кода (с моими изменениями)

http://jsfiddle.net/404xk2fo/

, когда я нажимаю на красном DIV он мгновенно исчезнет с экрана, потому что она двигается совсем немного. Опустите коэффициент умножения, и он останется на экране, но все же мгновенно перемещается. Проблема в том, что вы пытаетесь анимировать в этом цикле без какого-либо таймера. Выполнение этого кода в цикле настолько быстро, что ваша анимация произойдет мгновенно.

Ознакомьтесь с этой страницей для некоторых примеров того, как делать плавные анимации в javascript. ключ используется requestAnimationFrame

http://creativejs.com/resources/requestanimationframe/

Я добавил очень простой пример requestAnimationFramehttp://jsfiddle.net/j4x9dctq/

Я использую немного JQuery, чтобы выбрать DIV. Я просто предпочитаю синтаксис jquery. вы можете использовать собственный javascript, если хотите.

источник

2014-12-11 19:37:51 hamobi

Динамические анимации?

ответ

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