滑动

滑动即是动画式的运动或可称为重复效果(平滑的移动). 使用重复函数和小增量的层移动, 你可以把能想到的各种动画运动组合到一起.

以下面的移动代码作为基本概念:

block.xpos += 5
block.left = block.xpos

层将向右移动 5 pixels. 然后把这段代码粘贴到一个重复函数里:

function slide() {
	if (block.xpos < 300) {
		block.xpos += 5
		block.left = block.xpos
		setTimeout("slide()",30)
	}
}

if语句的作用是决定何时停止移动. 在这个例子中当水平(x-position)运动达到或超过 300 pixels 这个坐标值时函数就会停止运行. setTimeout() 的作用是生成并限制重复动作. 一定时间内它会执行括号内的所有内容. 具体到本例此函数每30毫秒重复一次.

点击这里观看示例.

要做到斜线移动也并非很困难 -- 你只需将 xpos(左) 和 ypos(上) 的值同时改变就可以了. 点击这里看看斜线移动的示例.

按照给定的角度移动

运用中学的三角知识我们就可以做到使元素以一定的角度移动. 如果你忘记了这部分基础知识, 这里有一个小图表可以帮助你寻回记忆:

为了初始化对象, 使其将角度包含在内, 你将需要四个新属性:

object.angle = 30
object.xinc = 5*Math.cos(object.angle*Math.PI/180)
object.yinc = 5*Math.sin(object.angle*Math.PI/180)
object.count = 0

计算 x 和 y 增量并用它们来定义 left 和 top 的移动值. 你需要用角度乘 Math.PI/180 以便把角度转换为弧度 -- sin 和 cos 总是以弧度来计算的. 计算属性将添加在重复函数中以设定重复的次数.

以下是关于一个元素以指定角度移动的完整代码.

function init() {
	if (ns4) block = document.blockDiv
	if (ie4) block = blockDiv.style
	block.xpos = parseInt(block.left)
	block.ypos = parseInt(block.top)
	block.angle = 30
	block.xinc = 5*Math.cos(block.angle*Math.PI/180)
	block.yinc = 5*Math.sin(block.angle*Math.PI/180)
	block.count = 0
}

function slide() {
	if (block.count < 25) {
		block.xpos += block.xinc
		block.ypos -= block.yinc
		block.left = block.xpos
		block.top = block.ypos
		block.count += 1
		setTimeout("slide()",30)
	}
	else block.count = 0
}

if (block.count < 25)意思是函数将在停止前运行25次 -- IE4. 小方块将滑动共125个象素.

点击这里看示例.

我还创建了另一个例子以使你能变换角度. 点击这里观看.

首页 下一课: 鼠标点击动画
copyright 1998 Dan Steinman
Translated by Cartouche YU