単純なアニメーション

私は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

私の第二の願いは、私は両方のコードスニペットをリンクするにはどうすればよい

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)

easeInOut機能を統合すること、ありますか？このページのコードも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

これは私が試みたものです。私はまだ問題があります。 出力コンソール：デルタは機能ではありません。バウンスは関数ではありません。私は、関数の作成についてもっと知る必要があることを知っています。しかし、今私は問題を解決することができません。私はJavaScriptを使用して、非常に簡単なアニメーションを作った

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

 
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

単純なアニメーション

答えて

関連する問題