Question

我正在尝试学习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：未定义animate 有谁知道问题是什么？

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

Answer 1

将animate和makeEaseInOut添加到脚本标记中，然后就可以使用它们了。您可能希望最终将这些函数包含在单独的JavaScript文件中。

view

Answer 2

那是我尝试过的。我还有问题。 输出控制台： delta不是一个功能。弹跳不是一个功能。我知道我必须学习更多关于创建函数的知识。但是现在我解决这个问题并不是那么好。

<!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>

Answer 3

我使用javascript制作了一个非常简单的动画，希望它有所帮助，尝试运行代码片段＆＃34;为了更好地理解。

＆＃13;

/*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';
    }
  }
}

＆＃13;

/*CSS*/

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

＆＃13;

/*HTML*/

<button onclick="myMove()">Click Me</button>
<button onclick="Back()"> roll back</button>


<div id ="container">
    <div id ="animate"></div>
</div>

＆＃13;

java脚本中的简单动画

3 个答案: