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来说一定是一本好书。

出处：WebStudio
责任编辑：qhwa

上一页 拖动与抛、缓冲 下一页

◎进入论坛Flash专栏版块参加讨论