简单的动画

我想学习Java脚本动画，我发现在这个网站真的很好的例子：http://javascript.info/tutorial/animation#maths-the-function-of-progress-delta简单的动画

但问题是，作为一个初学者，我不明白是怎么功能和对象相互配合。

问题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

添加animate和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

回答

相关问题