actionscript-3 - Ye olde管流动画

Question

我尝试通过“管道”网格编写流程动画（基本颜色，没什么花哨的）。（想象一个 5*5 的平铺屏幕）因为管道是在运行时完全动态创建的，所以动画也必须编写脚本。目前，我没有想到如何在动作脚本中做到这一点，没有预先生成的面具。

感谢所有提示！

Answer 1

要动态填充曲线，您可能希望将这个封闭公式用于 Bezier 曲线：

//start point
var s = new Point(x0, y0);
//cont point
var c = new Point(x1, y1);
//end point
var e = new Point(x2, y2);

var step : Number = 1 / (Point.distance(startPoint, controlPoint) +  Point.distance(controlPoint, endPoint));
var t : Number = 0.0;

private function onEnterFrame(e : Event):void
{
    var p : Point = new Point();
    p.x = (s.x * (1-t) + c.x * t) * (1 - t) + (c.x * (1-t) + e.x * t) * t;
    //do the same for y axis
    drawSomething(p.x, p.y);
    t+= step;
}

这将为曲线样式流设置动画

Answer 2

您希望以与管道游戏中相同的方式在视觉上“模拟”一些液体（例如水）通过管道的流动？

http://www.mclelun.com/img/blog/120411_pipe_02.jpg

好吧...

你愿意使用bitmapData（像素）来创建这种效果吗？

这就是我将如何去做..

创建一个简短的脚本来逐渐填充一个矩形（块）像素。

IE

var animateOn  : Boolean = true;
var startPoint : Point = new Point(beginX , beginY); 
var endPoint   : Point = new Point(finishX, finishY);
var step : Number = 1 / Point.Distance(startPoint, endPoint);
var currentPos : Number = 0;
onEnterFrame(e : Event):void
{
   var p : point = Point.interpolate(startPoint, endPoint, currentPos);
   bitmap.drawRect(p.x - 2, p.y - 2, 4, 4, someColor);
   currentPos += step; 
}

这只是我头顶的一个例子（不会编译）这个想法是继续为每个图块输入正确的 startPoint 和 endPoint。你可以轻松地为它设置动画，而无需使用任何蒙版。

您可以将每种类型的图块定义为点向量，然后通过将图块的位置添加到每个点来从一个点迭代到另一个点。