一个简陋js的动画函数
2020-03-18 本文已影响0人
huanghaodong
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画函数</title>
<style type="text/css">
#tutorial {
background: red;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<button id="btn">抽奖</button>
<div id="tutorial" ></div>
<script type="text/javascript">
function animation(el, targetObj, time){
var speed = 10;
var count = time / speed;
var currentObj = {}
var stepObj = {}
for(var k in targetObj){
currentObj[k] = parseInt(window.getComputedStyle(el)[k]);
stepObj[k] = (targetObj[k] - currentObj[k]) / count
console.log(stepObj[k])
}
var timer = setInterval(function(){
for(var k in targetObj){
if(Math.abs(targetObj[k] - currentObj[k]) <= 1){
clearInterval(timer)
}else{
currentObj[k] += stepObj[k]
el.style[k] = currentObj[k] + 'px'
}
}
}, speed)
}
var btn = document.getElementById('btn')
var tutorial = document.getElementById('tutorial')
btn.onclick = function(){
console.log(1)
animation(tutorial, {width: 800, height: 800}, 5000)
}
</script>
</body>
</html>
