【javascript】实现动画效果

一、动画基础知识
1.位置
位置信息通常由CSS负责设置

element {
   
	position:absolute;
	top:50px;
	left:100px;
}

也可以使用DOM实现相同的效果

element.style.position = "absolute";
element.style.left = "100px";
element.style.top = "50px";

position属性的值有static,fixed,relative和absolute,其默认是值static。
top属性是元素距离文档顶部的距离,bottom则是元素距离文档底部的距离。left属性是元素距离文档左边界的距离,right是元素距离文档右边的距离。
为防止它们发生冲突,最好只是用top和bottom属性其中之一,left和right属性也是如此。

假设有一个p元素(其余html代码已省略)

<p id="message">Whee!</p>

可以使用javascript代码来设置这个元素的位置

function positionMessage(){
   
	if (!document.getElementById) return false;
	if (!document.getElementById("message")) return false;
	var elem = document.getElementById("message");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "100px";
}

我们可以观察到,调用该函数,会把这段文本摆放在距浏览器窗口左边界50像素,距离浏览器窗口的顶边界100像素的位置。

改变某个元素的位置,主要执行一个函数去改变这个元素的style.top或style.left等属性即可。

function moveMessage(){
   
	if (!document.getElementById) return false;
	if (!document.getElementById("message")) return false;
	var elem = document.getElementById("message");
    elem.style.left = "200px";	
}

调用这两个函数,这个元素的显示位置立刻发生了变化,但是并不是我们想要的动画效果。这是由于javascript太有效率了,函数的执行间隔我们尚未察觉,因此需要创造时间间隔。

2.时间
setTimeout函数能使函数在经过一段预定的时间后才被执行,该函数有2个参数:第一个参数是一个字符串,代表将要执行的函数名,第二个参数是一个数值,代表经过多长时间后才开始执行该函数,单位是毫秒。
clearTimeout函数可以取消”等待执行“队列中的某个函数,该函数需要1个参数:保存着某个setTimeout函数调用返回值的变量。

修改positionMessage函数,使得在5秒后才调用moveMessage函数。

function positionMessage(){
   
	if (!document.getElementById) return false;
	if (!document.getElementById("message")) return false;
	var elem = document.getElementById("message");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "100px";
    movement = setTimeout("moveMessage()",5000);
}

如此一来,文本元素将先出现在它原始位置上,经过5秒之后向右移动150像素

3.时间递增量
真正的动画效果是一个渐变的过程,元素应该从出发点逐步移动到目的地,而不是跳跃到目的地。
为了让元素的移动以渐变的方式发生,以下是moveMessage函数的逻辑。

  1. 获得元素的当前位置
  2. 若元素已经到达目的地,则退出该函数
  3. 若元素尚未到达目的地,则将它向目的地移动一点儿
  4. 经过一段时间间隔后从步骤1开始重复执行

第一步是确定元素的当前位置,可以通过查询style.top和style.left等位置属性完成。

var xpos = elem.style.left;
var ypos = elem.style.top;

调用该函数后,xpos,ypos分别将被赋值50px,100px,这两个值都是字符串,然而我们需要的是数值。
parseInt函数将字符串中的数值提取出来,返回值通常是整数;若需要提取浮点数,则使用parseFloat函数。
修改后的moveMessage函数:

function moveMessage(){
   
	if (!document.getElementById) return false;
	if (!document.getElementById("message")) return false;
	var elem = document.getElementById("message");
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if (xpos == 200 && ypos ==100) return true;
	if (xpos < 200) xpos++;
	if (xpos > 200) xpos--;
	if (ypos < 100) ypos++;
	if (ypos > 100) ypos--;
    elem.style.left = xpos + "px";
    elem
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值