23 改变方向

你已经知道了如何让一个形状向右移动(把x的值增加),但是如果需要改变运动的速度又该如何实现呢,或者如何改变动画的方向呢?非常简单:只需要增加(或减少)x和y值就可以了。如果你使用与前面示例相同的代码,按以下方式修改tmpShape.x++语句,就可以非常方便地使形状沿着向右的对角线方向运动:

tmpShape.x += 2; 
tmpShape.y++; 

与前面代码的不同之处在于,上面的代码将x值每次增加2,而不是增加1,并将y值每次增加1。这样产生的效果是,在每次动画循环中,每个形状向右移动2像素,并向下移动1像素,即为向右的对角线方向移动(如图1所示)。

图1
图1 让形状沿着对角线运动

或者还可以实现一些非常有趣的效果。例如,在每个动画循环中将x和y值设为随机值。这样产生的动画效果就具有不可预测性和无序性,形状将表现为不规则的运动形式,这种方法可以让对象的运动更加生动自然:

tmpShape.x += Math.random()*4-2; 
tmpShape.y += Math.random()*4-2; 

以上代码的作用是产生一个介于0到4之间的随机数(Math.random产生一个0到1之间的数,然后将该数乘以4),然后减去2得到一个介于-2到2之间的随机数。通过这种方法,形状可以向右运动(x值为正数)、向左运动(x值为负数)、向上运动(y值为正数)和向下运动(y值为负数)。

如果你在浏览器中尝试该方法,形状将会前后随机运动,并出现摆动现象(如图2)。

Start
Stop
图2 形状的随机运动
文件下载(已下载 2196 次)

发布时间:2013/2/22 上午10:12:08  阅读次数:6551

2006 - 2024,推荐分辨率 1024*768 以上,推荐浏览器 Chrome、Edge 等现代浏览器,截止 2021 年 12 月 5 日的访问次数:1872 万 9823 站长邮箱

沪 ICP 备 18037240 号-1

沪公网安备 31011002002865 号