JavaScript运动框架之速度时间版本
# 一、JavaScript运动框架之速度版
# 1.1 运动框架的实现思路
运动，其实就是在一段时间内改变 left 、 right 、 width 、 height 、 opactiy 的值，到达目的地之后停止
-
位移
top,left -
折叠
width,height -
淡入淡出
opacity -
时间有关系
setIntervalsetTimeout
-
用javascript直接获取行间样式很容易，但如果要获取非行间样式那我们只能借助函数了。我这里编写了一个名为getStyle的函数，专门处理取非行间的样式
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
@前端进阶之旅: 代码已经复制到剪贴板
# 1.2 一些案例演示
# 1.2.1 运动之速
<div id="box"></div>
@前端进阶之旅: 代码已经复制到剪贴板
#box {
width: 100px;
height: 100px;
background: red;
position: relative;
left: 0;
}
@前端进阶之旅: 代码已经复制到剪贴板
var box = document.getElementById("box");
var speed = 0; //步长
var target = 600;
var timer = null;
timer = setInterval(function(){
var curr = parseInt(getStyle(box,"left")); //去除getStyle(box,"left")的单位
if(curr == target){
clearInterval(timer);
speed = 0;
alert("运动结束");
}else{
speed +=10;
box.style.left = speed + "px";
}
},1000/30);
//监控left的值的变化 怎么样拿到left的值
//alert(getComputedStyle(box)["width"]);
//alert(box.currentStyle["left"]);
// currentStyle --IE
// getComputedStyle -- 非IE
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
@前端进阶之旅: 代码已经复制到剪贴板
# 1.2.2 运动速度之封装1
<div id="ball"></div>
@前端进阶之旅: 代码已经复制到剪贴板
#ball {
width: 100px;
height: 100px;
background: blue;
}
@前端进阶之旅: 代码已经复制到剪贴板
var ball = document.getElementById("ball");
ball.onmouseover = function(){
//同时变换 用的最多
//move(this,"width",500,10);
//move(this,"height",500,10);
move(ball,{"width":400,"height":300},10);
}
ball.onmouseout = function(){
//move(this,"width",100,-10);
//move(this,"height",100,-10);
move(ball,{"width":100,"height":100},-10);
}
function move(obj,json,speed){
clearInterval(obj.timer);
var mark = true;
obj.timer = setInterval(function(){
for(var attr in json){
var curr = parseInt(getStyle(obj,attr));
var target = json[attr];
if(curr != target){
obj.style[attr] = curr+speed+"px";
mark = false;
}
}
if(mark){
clearInterval(obj.timer);
}
},1000/30);
}
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
@前端进阶之旅: 代码已经复制到剪贴板
- 需要注意的地方
- 当需要两个动画的时候，会执行后面一个，解决办法如下，回调函数
- 当需要两个以上的时候，需要考虑是否可写一行代码变换多个属性
- 变换不一致的时候，定时器被提前清除
# 1.2.3 运动速度之封装2–增加opacity
<div id="ball"></div>
@前端进阶之旅: 代码已经复制到剪贴板
#ball {
position: relative;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: blue;
opacity: 1;
}
@前端进阶之旅: 代码已经复制到剪贴板
var ball = document.getElementById("ball");
ball.onmouseover = function(){
move(ball,{"width":300,"height":300,"opacity":0.3});
}
// ball.onmouseout = function(){
// move(ball,{"width":100,"height":100},-10);
// }
function move(obj,json){
clearInterval(obj.timer);
var mark = true;
obj.timer = setInterval(function(){
for(var attr in json){
var curr = null;
var target = json[attr];
var speed = null;
if(attr == "opacity"){
curr = getStyle(obj,attr)*100;
speed = (target*100-curr)*0.15;
}else {
curr = parseInt(getStyle(obj,attr));
speed = (target - curr)*0.15;
}
speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
if(curr != target){
if(attr == "opacity"){
obj.style[attr] = (curr+speed)/100;
}else {
obj.style[attr] = curr+speed+"px";
}
mark = false;
}
}
if(mark){
clearInterval(obj.timer);
}
},1000/30);
}
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
@前端进阶之旅: 代码已经复制到剪贴板
- 需要注意的地方
- 当需要两个动画的时候，会执行后面一个，解决办法如下，回调函数
- 当需要两个以上的时候，需要考虑是否可写一行代码变换多个属性
- 变换不一致的时候，定时器被提前清除
- 速度
speed不要写死
# 1.3 运动框架之应用
# 1.3.1 分享按钮
<div id="ball"></div>
<div id="box1">
<div id="box2">分享到</div>
</div>
@前端进阶之旅: 代码已经复制到剪贴板
var box1 = document.getElementById("box1");
var ball = document.getElementById("ball");
box1.onmouseover = function(){
move(this,"left",0,10);
}
box1.onmouseout = function(){
move(this,"left",-100,-10);
}
//问题一：当需要两个动画的时候，会执行后面一个，解决办法如下，回调函数
ball.onmouseover = function(){
//同时变换 用的最多
//move(this,"width",500,10);
//move(this,"height",500,10);
//列队在执行
move(ball,"width",500,10,function(){
move(ball,"height",500,10);
});
}
ball.onmouseout = function(){
//move(this,"width",100,-10);
//move(this,"height",100,-10);
move(ball,"width",100,-10,function(){
move(ball,"height",100,-10);
});
}
var timer = null;
function move(obj,attr,target,speed,callback){
clearInterval(timer); //obj.timer缓存到各自的obj下
timer = setInterval(function(){
var curr = parseInt(getStyle(obj,attr));
if(curr == target){
clearInterval(timer);
callback && callback();
}else {
obj.style[attr] = curr+speed+"px";
}
},1000/30);
}
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
@前端进阶之旅: 代码已经复制到剪贴板
