드로잉 API를 사용한 애니메이션

드로잉 API를 사용하여 내용을 만들면 내용을 한 번만 배치하도록 제한되지 않는다는 장점이 있습니다. 그릴 때 사용하는 변수를 유지하거나 수정하여 드로잉 내용을 수정할 수 있습니다. 특정 프레임 기간 동안 또는 타이머를 사용하여 변수를 변경하거나 다시 그림으로써 애니메이션을 전달할 수 있습니다.

예를 들어 다음 코드는 Event.ENTER_FRAME 이벤트 수신을 통해 각 전달 프레임으로 표시를 변경하고 현재 각도를 증가시켜 graphics 객체를 지우고 업데이트된 위치에서 다시 그리도록 지시합니다.

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 약관을 적용받지 않습니다.