我想學習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
你錯過http://javascript.info/files/tutorial/browser/animation/animate.js –
他們進一步定義動畫功能的頁面中你聯繫,你只需在你的代碼中缺少它。 – spaceman