js动画学习
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js动画学习相关的知识,希望对你有一定的参考价值。
一、运动框架实现思路
1.匀速运动(属性值匀速变化)(改变 left, right, width, height, opacity 等);
2.缓冲运动(属性值的变化速度与当前值与目标值的差成正比);
3.多物体运动;
4.任意属性值的变化(用封装函数);
5.链式运动(同一物体完成一系列的运动);
6.多物体同时运动
====================================================
二、简单运动之匀速运动
1 //鼠标移到元素上元素右移,鼠标离开元素回去。
2 var timer="";
3 function Move(speed,locat) {//移动速度,移动终点位置
4 var ob=document.getElementById(‘box1‘);
5 clearInterval(timer);
6 timer=setInterval(function () {
7 if (ob.offsetLeft==locat) {//当前位置到达指定终点,关闭定时器
8 clearInterval(timer);
9 } else {
10 ob.style.left=ob.offsetLeft+speed+‘px‘;
11 }
12 }, 30)
13 }
以上是关于js动画学习的主要内容,如果未能解决你的问题,请参考以下文章
Android:将“ViewPager”动画从片段更改为片段