простой анимации в Java Script

Я пытаюсь научиться Java Script анимаций, и я нашел очень хорошие примеры на этом сайте: http://javascript.info/tutorial/animation#maths-the-function-of-progress-deltaпростой анимации в Java Script

Но проблема в том, как новичок, я не понимаю, как функции и объекты работают друг с другом.

Вопрос 01

Я скопировал пример «Давайте создадим анимацию движения на его базе:» Но моя версия не работает.

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
    .example_path{ 
     position: relative; 
     width: 600px; 
     height: 100px; 
     border-style: solid; 
     border-width: 5px; 
    } 
    .example_block{ 
     position: absolute; 
     width: 100px; 
     height: 100px; 
     background-color: yellow; 
    } 
</style> 
</head> 

<body> 
<div onclick="move(this.children[0])" class="example_path"> 
    <div class="example_block"></div> 
</div> 

<script> 
function move(element, delta, duration) { 
    var to = 500 

    animate({ 
    delay: 10, 
    duration: duration || 1000, // 1 sec by default 
    delta: delta, 
    step: function(delta) { 
     element.style.left = to*delta + "px"  
    } 
    }) 

} 


</script> 
</body> 
</html>

консольный вывод: ReferenceError: одушевленные не определен Кто-нибудь знает, в чем проблема?

Вопрос 02

Моя вторая желание, чтобы интегрировать функцию easeInOut

function makeEaseInOut(delta) { 
    return function(progress) { 
    if (progress < .5) 
     return delta(2*progress)/2 
    else 
     return (2 - delta(2*(1-progress)))/2 
    } 
} 

bounceEaseInOut = makeEaseInOut(bounce)

Как я могу связать оба фрагменты кода? Код также на этой странице: http://javascript.info/tutorial/animation#maths-the-function-of-progress-delta

источник

2016-04-23 LolaRuns

Вы упускаете http://javascript.info/files/tutorial/browser/animation/animate.js –

Они определяют функцию анимации дальше страницы вы связаны между собой, ваши просто пропуская его в коде. – spaceman

Добавить анимацию и makeEaseInOut в свой тег скрипта, тогда вы можете их использовать. Возможно, вы захотите включить функции в отдельный файл JavaScript в конечном итоге.

<script> 
    function animate(opts) { 
     var start = new Date 
     var id = setInterval(function() { 
      var timePassed = new Date - start 
      var progress = timePassed/opts.duration 
      if (progress > 1) progress = 1 
       var delta = opts.delta(progress) 
       opts.step(delta) 
       if (progress == 1) { 
        clearInterval(id) 
       } 
      }, opts.delay || 10) 
    } 

    function makeEaseInOut(delta) { 
     return function(progress) { 
      if (progress < .5) 
       return delta(2*progress)/2 
      else 
       return (2 - delta(2*(1-progress)))/2 
     } 
    } 

    bounceEaseInOut = makeEaseInOut(bounce) 
</script>

источник

2016-04-23 15:53:01 spaceman

вот что я пробовал. У меня все еще есть проблемы. выход консоль: дельта не функция. Отскок не является функцией. Я знаю, что мне нужно больше узнать о создании функций. Но сейчас я не так хорошо решаю проблему.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style> 
    .example_path{ 
     position: relative; 
     width: 600px; 
     height: 100px; 
     border-style: solid; 
     border-width: 5px; 
    } 
    .example_block{ 
     position: absolute; 
     width: 100px; 
     height: 100px; 
     background-color: yellow; 
    } 
</style> 

<script> 
function move(element, delta, duration) { 
    var to = 500; 

    animate({ 
    delay: 10, 
    duration: duration || 1000, // 1 sec by default 
    delta: delta, 
    step: function(delta) { 
     element.style.left = to*delta + "px"  
    } 
    }); 

} 

function animate(opts) { 
     var start = new Date; 
     var id = setInterval(function() { 
      var timePassed = new Date - start; 
      var progress = timePassed/opts.duration; 
      if (progress > 1) progress = 1 
       var delta = opts.delta(progress); 
       opts.step(delta); 
       if (progress == 1) { 
        clearInterval(id); 
       } 
     }, opts.delay || 10); 
} 

function makeEaseInOut(delta) { 
    return function(progress) { 
     if (progress < .5) 
      return delta(2*progress)/2; 
     else 
      return (2 - delta(2*(1-progress)))/2; 
    }; 
} 
varbounceEaseInOut = makeEaseInOut(bounce); 
</script> 
</head> 

<body> 
<div onclick="move(this.children[0], makeEaseInOut(bounce), 3000)" class="example_path"> 
    <div class="example_block"></div> 
</div> 
</body> 

</html>

источник

2016-04-23 19:51:06 LolaRuns

Я сделал очень простую анимацию с помощью JavaScript, надеюсь, что это помогает, попробуйте «Выполнить фрагмент кода» для лучшего понимания.

/*JavaScript*/ 
 

 
function myMove() { 
 
    var elem = document.getElementById("animate"); 
 
    var pos = 0; 
 
    var id = setInterval(frame, 5); 
 

 
    function frame() { 
 
    if (pos == 350) { 
 
     clearInterval(id); 
 
    } else { 
 
     pos++; 
 
     elem.style.top = pos + 'px'; 
 
     elem.style.left = pos + 'px'; 
 
    } 
 
    } 
 
} 
 

 
function Back() { 
 
    var elem1 = document.getElementById("animate"); 
 
    var id1 = setInterval(frame2, 5); 
 
    var pos1 = 350; 
 

 
    function frame2() { 
 
    if (pos1 == 0) { 
 
     clearInterval(id1); 
 
    } else { 
 
     pos1--; 
 
     elem1.style.top = pos1 + 'px'; 
 
     elem1.style.left = pos1 + 'px'; 
 
    } 
 
    } 
 
}

/*CSS*/ 
 

 
#container { 
 
    width: 400px; 
 
    height: 400px; 
 
    position: relative; 
 
    background: yellow; 
 
} 
 

 
#animate { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    background-color: red; 
 
}

/*HTML*/ 
 

 
<button onclick="myMove()">Click Me</button> 
 
<button onclick="Back()"> roll back</button> 
 

 

 
<div id ="container"> 
 
    <div id ="animate"></div> 
 
</div>

источник

2017-04-13 13:23:53

простой анимации в Java Script

ответ

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