一、先来了解一下为什么要学习运动框架呢
在我们web开发中过程中,一些特效的使用,比如:导航条中滑动的动画特效、点击加入购物车按钮有抛物线的特效,还有一些小游戏的开发等,就需要我们对动画的基础运动掌握的足够扎实。
二、关于运动的原理
JS运动,本质来说就是让web上DOM元素运动起来,要想运动起来,就改变其自身的位置属性。
我们先来看一下如何实现运动:
方法:
1.运动的物体使用绝对定位。
2.通过改变定位物体的属性(left、right、top、bottom)的值来使物体移动。如:向右或向左使用offsetlest(offsetright)来控制左右移动。
步骤:
1.开始运动之前,要先清除已有的定时器(如果不清除,连续点击按钮时,物体会运动的越来越快,造成运动混乱。)
2.开启定时器,计算速度
3.把运动和停止分开(使用if/else语句),判断停止条件,执行运动。
三、定时器
在这次项目中要用到的定时器是:
循环定时器:timer=setInterval(函数名:time);
是指在间隔时间到来时反复触发事件,是不停的使用
function()是定时器触发时要执行的事件函数,可以是一个函数,也可以是几个函数,间隔的时间以毫秒为单位。
封装一个运动框架startMove.js,封装的代码如下:
/*
【注】我们必须保证所有运动都到达目的值以后,才能关闭定时器。
*/
function startMove(node, obj, callback){
clearInterval(node.timer);
node.timer = setInterval(function(){
var isEnd = true; //假设都到达目的值了
for(var attr in obj){
var iTarget = obj[attr];
//1、计算速度
//兼容透明度
var iCur = null;
if(attr == "opacity"){
iCur = parseInt(parseFloat(getStyle(node, "opacity")) * 100);
}else{
iCur = parseInt(getStyle(node, attr));
}
var speed = (iTarget - iCur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(attr == "opacity"){
iCur += speed;
node.style.opacity = iCur / 100;
node.style.filter = "alpha(opacity=" + iCur + ")";
}else{
node.style[attr] = iCur + speed + 'px';
}
if(iCur != iTarget){
isEnd = false;
}
}
if(isEnd){
clearInterval(node.timer);
if(callback){
callback.call(node);//重设函数的父级
}
}
}, 30);
}
// 浏览器兼容写法
function getStyle(node, styleType){
return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType];
}
图片缓冲运动的完整代码:
style
<style>
*{margin: 0px; padding: 0px}
#div1{width: 680px; height: 170px; border: 1px solid black; margin: 100px auto; position: relative; overflow: hidden; }
#ul1{position: absolute; left: 0px}
#ul1 li{list-style: none; width: 150px; height: 150px; margin: 10px; float: left;}
#ul1 li img{width: 100%; height: 100%}
</style>
script
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
var oUl = document.getElementById("ul1");
var aLis = oUl.getElementsByTagName("li");
//在ul的后面,再去添加四张图片
oUl.innerHTML += oUl.innerHTML;
//oUl的宽应该变成原来的两倍
oUl.style.width = 170 * aLis.length + 'px';
//缓冲运动,每一次向左运动一个图片宽
var timer = null;
function timerInner(){
timer = setInterval(function(){
startMove(oUl, {left: oUl.offsetLeft - 170}, function(){
if(oUl.offsetLeft <= -oUl.offsetWidth / 2){
oUl.style.left = 0;
}
})
}, 2000);
}
timerInner();
oDiv.onmouseover = function(){
clearInterval(timer);
}
oDiv.onmouseout = function(){
timerInner()
}
}
</script>
<body>
<div id = 'div1'>
<ul id = 'ul1'>
<li>
<img src="img/1.jpg" alt="">
</li>
<li>
<img src="img/2.jpg" alt="">
</li>
<li>
<img src="img/3.jpg" alt="">
</li>
<li>
<img src="img/4.jpg" alt="">
</li>
</ul>
</div>
</body>
效果图
无缝滚动的效果,设置图片自动滚动,设置的定时器时间是每2秒滚动一次,切换到下一张图片。