|
8．Spring弹簧
spring非常类似于easing，但它的效果比easing更cool。一般的方法为定义一个目标点，计算出到它的距离，加速度为距离与摩擦系数的积，同时还需要使用摩擦。
代码：
var targetx = 200;
var targety = 150;
fraction = .9;
vx = 0;
vy = 0;
onEnterFrame = function () {
if (!dragging) {
//起始点与目标地点的距离
dx = targetx-my_mc._x;
dy = targety-my_mc._y;
//加速度
vx += dx*.3;
vy += dy*.3;
//加入摩擦
vx *= fraction;
vy *= fraction;
my_mc._x += vx;
my_mc._y += vy;
}
};
my_mc.onPress = function() {
this.startDrag();
dragging = true;
};
my_mc.onRelease=function() {
this.stopDrag();
dragging = false;
};
演示：
spring 与鼠标相连
下面我们要对spring 进行一下简单的扩展，我们可以将目标地点设为光标的坐标值，同时可以使用drawing api用画线的方式将其相连起来。
代码：
var targetx = 200;
var targety = 150;
fraction = .9;
vx = 0;
vy = 0;
onEnterFrame = function () {
dx = _xmouse-my_mc._x;
dy = _ymouse-my_mc._y;
vx += dx*.3;
vy += dy*.3;
vx *= fraction;
vy *= fraction;
my_mc._x += vx;
my_mc._y += vy;
//画线与mouse相连
clear();
lineStyle(1,0,100);
moveTo(_xmouse,_ymouse);
lineTo(my_mc._x,my_mc._y);
};
演示：
现在我们在变通一下，小球在自然界中是有重力的。加上重力看看什么效果。一个小作业，你试一下。
Spring 链
最后我们来一个稍微难一点的，是上面例子的一个扩展，如果你对上一个例子有了一定的理解，这个对你来说是不成问题的。上面的例子是跟随着光标，如果是链的话。那么第二个小球就应跟随第一个小球，依次类推。如果这个你难做出来。相信这种类型的菜单对你来说就不成问题了。
代码：
fraction = .7;
grav=20;
my_mc.vx = 0;
my_mc.vy = 0;
my_mc1.vx = 0;
my_mc1.vy = 0;
my_mc2.vx = 0;
my_mc2.vy = 0;
onEnterFrame = function () {
clear();
lineStyle(1, 0, 100);
moveTo(_xmouse, _ymouse);
spring(my_mc, _xmouse, _ymouse);
spring(my_mc1, my_mc._x, my_mc._y);
spring(my_mc2, my_mc1._x, my_mc1._y);
};
function spring(mc, x, y) {
dx = x-mc._x;
dy = y-mc._y;
mc.vx += dx*.3;
mc.vy += dy*.3;
mc.vy += grav;
mc.vx *= fraction;
mc.vy *= fraction;
mc._x += mc.vx;
mc._y += mc.vy;
lineTo(mc._x, mc._y);
}
演示：
总结：上面的教程看起来都是一些简单的东西，但它确确实实是一些好的框架，你可无限的发挥你的想象和创意，只要在这个框架之中添加一些元素或是代码。写这篇教程的目的主要是针对初级和中级的用户。目的是使大家意识到其实许多表面看起来复杂的东西，实际上都隐藏着相对复杂的简单，前提条件是你的思路一定要清晰。最后。仍要引用keith peters话。不要直接下载源文件或是直接粘贴代码。最好的方式是理解。才能发挥自如。如果你想知道更多更详细的内容。请访问keith peters的网站www.bit-101.com.或是去预定keith peters的新书making things move…相信对于desinger来说一定是一本好书。 
文章页数:[1] [2] [3] [4] [5] [6] [7] [8] | 
相关文章 
