- 前两个Json，semaphoreJson和targetJson
<title>运动框架实例</title>
<style>
div{
height: 80px;
width: 80px;
background-color: skyblue;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var oDiv=document.getElementById("box");
animate(oDiv,{"left":700,"top":800,"width":200},3000);
function animate(elem,targetJson,time){
var semaphoreJson = {}; //空对象信号量
//复制targetJson的属性名给信号量，再给它添加计算后的样式。
for(var k in targetJson){
semaphoreJson[k] = parseFloat(fetchComputedStyle(elem , k));
}
console.log(semaphoreJson);
}
//之前的轮子，计算后样式
function fetchComputedStyle(obj , property){
//能力检测
if(window.getComputedStyle){
//现在要把用户输入的property中检测一下是不是驼峰，转为连字符写法
//强制把用户输入的词儿里面的大写字母，变为小写字母加-
//paddingLeft → padding-left
property = property.replace(/([A-Z])/g , function(match,$1){
return "-" + $1.toLowerCase();
});
return window.getComputedStyle(obj)[property];
}else{
//IE只认识驼峰，我们要防止用户输入短横，要把短横改为大写字母
//padding-left → paddingLeft
property = property.replace(/\-([a-z])/g , function(match,$1){
return $1.toUpperCase();
});
return obj.currentStyle[property];
}
}
</script>
- 定时器和setpJson
var interval = 5;//动画间隔时间
var maxFrameNumber = time / interval;
//console.log(maxFrameNumber);
//计算步长
var stepJson = {};
for(var k in targetJson){
//捎带脚，把每个targetJSON中的值都去掉px
targetJson[k] = parseFloat(targetJson[k]);
stepJson[k] = (targetJson[k] - semaphoreJson[k])/maxcount;
}
//console.log(stepJson);
}
//定时器
setInterval(function(){
for(var k in semaphoreJson){
semaphoreJson[k] +=stepJson[k];
elem.style[k] = semaphoreJson[k] + "px";
}
},interval);
- 在指定时间内关闭定时器
var frameNumber = 0; //帧编号
//定时器
var timer=setInterval(function(){
for(var k in semaphoreJson){
semaphoreJson[k] +=stepJson[k];
elem.style[k] = semaphoreJson[k] + "px";
}
frameNumber++;
if(frameNumber == maxFrameNumber){
clearInterval(timer);
}
},interval);
有可能因为计算步长时，无法除尽导致系统自动约分，最后的结果有偏差。
//定时器
var timer=setInterval(function(){
for(var k in semaphoreJson){
semaphoreJson[k] +=stepJson[k];
elem.style[k] = semaphoreJson[k] + "px";
}
count++;
if(count == maxcount){
//这里玩个小聪明循环完成拉终停表
for(var k in targetJson){
elem.style[k] = parseFloat(targetJson[k]) + "px";
}
clearInterval(timer);
}
},interval);
}
- 兼容 opacity 改变属性时进行判断，值是否加 PX
var timer=setInterval(function(){
for(var k in semaphoreJson){
semaphoreJson[k] +=stepJson[k];
if(k != "opacity"){ // 新增if语句
elem.style[k] = semaphoreJson[k] + "px";
}else{
elem.style[k] = semaphoreJson[k];
//兼容IE6
elem.style.filter = "alpha(opacity=" + (semaphoreJSON[k] * 100) + ")";
}
}
PS：小聪明的地方也得加 if 判断
- 浏览器性能问题（浏览器检测）
//动画间隔要根据不同浏览器来设置：
if(window.navigator.userAgent.indexOf("MSIE") != -1){
var interval = 50;
}else{
var interval = 10;
}
全部源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动框架实例</title>
<style>
div{
height: 81px;
width: 81px;
background-color: skyblue;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var oDiv=document.getElementById("box");
animate(oDiv,{"left":700,"top":600,"opacity":0.6,"border-radius":50},2000);
function animate(elem,targetJson,time){
//动画间隔要根据不同浏览器来设置：
if(window.navigator.userAgent.indexOf("MSIE") != -1){
var interval = 50;
}else{
var interval = 10;
}
var semaphoreJson = {}; //空对象信号量
//复制targetJson的属性名给信号量，再给它添加计算后的样式。
for(var k in targetJson){
semaphoreJson[k] = parseFloat(fetchComputedStyle(elem , k));
}
console.log(semaphoreJson);
// 动画5毫秒执行一次，时间time，共执行函数次数
var maxFrameNumber = time / interval;
var frameNumber = 0; //帧编号
//console.log(maxcount);
//计算步长
var stepJson = {};
for(var k in targetJson){
//捎带脚，把每个targetJSON中的值都去掉px
targetJson[k] = parseFloat(targetJson[k]);
stepJson[k] = (targetJson[k] - semaphoreJson[k])/maxFrameNumber;
}
//console.log(stepJson);
//定时器
var timer=setInterval(function(){
for(var k in semaphoreJson){
semaphoreJson[k] +=stepJson[k];
if(k != "opacity"){
elem.style[k] = semaphoreJson[k] + "px";
}else{
elem.style[k] = semaphoreJson[k];
//兼容IE6
elem.style.filter = "alpha(opacity=" + (semaphoreJson[k] * 100) + ")";
}
}
frameNumber++;
if(frameNumber == maxFrameNumber){
//这里玩个小聪明循环完成拉终停表
for(var k in targetJson){
if(k != "opacity"){
elem.style[k] = targetJson[k] + "px";
}else{
elem.style[k] = targetJson[k];
//兼容IE6
elem.style.filter = "alpha(opacity=" + (targetJson[k] * 100) + ")";
}
}
clearInterval(timer);
}
},interval);
}
//之前的轮子，计算后样式
function fetchComputedStyle(obj , property){
//能力检测
if(window.getComputedStyle){
//现在要把用户输入的property中检测一下是不是驼峰，转为连字符写法
//强制把用户输入的词儿里面的大写字母，变为小写字母加-
//paddingLeft → padding-left
property = property.replace(/([A-Z])/g , function(match,$1){
return "-" + $1.toLowerCase();
});
return window.getComputedStyle(obj)[property];
}else{
//IE只认识驼峰，我们要防止用户输入短横，要把短横改为大写字母
//padding-left → paddingLeft
property = property.replace(/\-([a-z])/g , function(match,$1){
return $1.toUpperCase();
});
return obj.currentStyle[property];
}
}
</script>
</body>
</html>
网友评论