2016-04-23 130 views
0

我想學習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

+3

你錯過http://javascript.info/files/tutorial/browser/animation/animate.js –

+0

他們進一步定義動畫功能的頁面中你聯繫,你只需在你的代碼中缺少它。 – spaceman

回答

0

添加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> 
0

這就是我試過的。 我仍然有問題。 輸出控制檯:增量不是函數。反彈不是一個功能。 我知道我必須學習更多關於創建函數的知識。但是現在我解決這個問題並不好。

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

我做了使用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>