Question

我尝试通过“管道”网格编写流动画（基本颜色，没什么花哨）的脚本。（想想5 * 5平铺屏幕）由于管道在运行时是完全动态创建的，因此动画也必须编写脚本。目前，它没有考虑如何在动作脚本中执行此操作，而没有预先生成的蒙版。

感谢所有提示！

Answer 1

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

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

...好的

您是否愿意使用bitmapData（像素）来创建此效果？

以下是我如何去做..

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

即

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。您可以轻松地为其设置动画，而无需使用任何蒙版。

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

Answer 2

要动态填充曲线，您可能希望将此闭合公式用于贝塞尔曲线：

//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;
}

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

Ye olde Pipe Flow Animation

2 个答案: