Tweenerを使って折れ線を描画する

as3でTweenerを使って２点間の折れ線をアニメーション描画します。

Tweenerライブラリをインポート後、Tweener動作中に呼び出される関数onUpdateと、線を描くmoveTo、lineToを使用してまずはシンプルなラインの描画。

import caurina.transitions.*;

var movePoint:Point = new Point(100,100);
var dummyShape:Shape;

Tweener.addTween(movePoint, { x:300, y:300, time:1, transition:"linear", onUpdate:lineDraw});
function lineDraw(){
	if(dummyShape != null)stage.removeChild(dummyShape);
	dummyShape = new Shape();
	stage.addChild(dummyShape);

	var g = dummyShape.graphics;
	g.lineStyle (5, 0xFF6600, 1.0);
	g.moveTo (100, 100);
	g.lineTo (movePoint.x, movePoint.y);
}

TweenerでmovePointを移動させて、動作中に毎フレームmovePointのx,yに向けて線を描画します。

→DEMO

Shapeを変形して線を描くのも考えたけれど、線の調整とか角丸もありlineToで進める事に。

//lineMake関数　 引数(ターゲット、時間、太さ、色、始点X、始点Y、終点X、終点Y)
lineMake(mc ,1.5 ,5 ,0xFF6600 ,0 ,0 ,100 ,100);

function lineMake(_targetMc,_time:Number,_vol:Number,_col,_startX:Number,_startY:Number,_endX:Number,_endY:Number){

	var movePoint:Point = new Point(_startX,_startY);
	var drawCount:Number = 0;
	var pointArr:Array = new Array();

	for(var i:int = 0;i < 4;i++){
		//始点終点中間2点の各ポイントを配列に格納
		pointArr[i] = new Point();
		switch(i){
			case 0:
				pointArr[i].x = _startX;
				pointArr[i].y = _startY;
			break;
			case 1:
				pointArr[i].x = _startX;
				pointArr[i].y = _startY + (_endY - _startY)/2;
			break;
			case 2:
				pointArr[i].x = _endX;
				pointArr[i].y = _startY + (_endY - _startY)/2;
			break;
			case 3:
				pointArr[i].x = _endX;
				pointArr[i].y = _endY;
			break;
		}
	}

	drawCount++;
	drawFunc();

	function drawFunc(){
		var dummyShape:Shape;
		Tweener.addTween(movePoint, { x:pointArr[drawCount].x, y:pointArr[drawCount].y,time:_time/3, transition:"linear",onUpdate:lineDraw,onComplete:nextFunc } );
		function lineDraw(){

			if(dummyShape != null)_targetMc.removeChild(dummyShape);
			dummyShape = new Shape();
			_targetMc.addChild(dummyShape);
			var g = dummyShape.graphics;

			g.lineStyle (_vol, _col, 1.0);
			g.moveTo (pointArr[drawCount-1].x, pointArr[drawCount-1].y);
			g.lineTo (movePoint.x, movePoint.y);
		}
		function nextFunc(){
			drawCount++;
			if(drawCount < 4)drawFunc();
		}
	}
}

上記関数を使ってデモではドラッグ＆ドロップできる2点間を折れ線で繋ぎました。

→DEMO