描画 API でのアニメーション化

描画 API を使用してコンテンツを作成する利点の 1 つは、コンテンツの配置が 1 度だけに制限されないことです。 描画に使用した変数を保持または変更して、描画したコンテンツを変更できます。 一定期間のフレーム上でまたはタイマーを使用して、変数を変更し再描画すると、アニメーションを表示できます。

例えば、次のコードは、 Event.ENTER_FRAME イベントを監視して、通過フレームごとに表示を変更していきます。現在の度数を増やしていき、グラフィックオブジェクトをクリアして更新した位置に再描画します。

stage.frameRate = 31; 
 
var currentDegrees:Number = 0; 
var radius:Number = 40; 
var satelliteRadius:Number = 6; 
 
var container:Sprite = new Sprite(); 
container.x = stage.stageWidth / 2; 
container.y = stage.stageHeight / 2; 
addChild(container); 
var satellite:Shape = new Shape(); 
container.addChild(satellite); 
 
addEventListener(Event.ENTER_FRAME, doEveryFrame); 
 
function doEveryFrame(event:Event):void 
{ 
    currentDegrees += 4; 
    var radians:Number = getRadians(currentDegrees); 
    var posX:Number = Math.sin(radians) * radius; 
    var posY:Number = Math.cos(radians) * radius; 
    satellite.graphics.clear(); 
    satellite.graphics.beginFill(0); 
    satellite.graphics.drawCircle(posX, posY, satelliteRadius); 
} 
function getRadians(degrees:Number):Number 
{ 
return degrees * Math.PI / 180; 
}

大きく異なる結果を生成するには、コードの先頭の初期シード変数 currentDegrees 、 radius および satelliteRadius を変更して試してみます。例えば、radius 変数を減らしたり、totalSatellites 変数を増やします。 これは、描画 API が複雑なビジュアル表示をどれだけ簡単に作成できるかを示す一例にすぎません。

Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。