FX

이 샘플은 어떻게 물체가 제멋대로인 궤도를 따라서 움직이는지를 보여줍니다. 사용자가 전환할수 있는 두개의 "senarios"가 있습니다:트랙을 달리는 자동차와 도 위를 항해하는 보트.

코드 이해하기

경로 기반의 애니메니션은 javafx.animation.transition.PathTransition 클래스에 의해 제공됩니다. 이 클래스는 두가지 중요한 파라메터를 받습니다: 움직여지는 Node와 노드가 따라서 움질일 Path.

움직일 노드가 만들어 질때 그 노드의 중앙이 항상 애니메이션의 주요 지점, 다시말하면 경로와 밀접하게 움직이는 포인트가 된다는 것을 명심하세요. 주요 지점을 제어하기 위한 API는 앞으로 릴리즈될 계획입니다만 아직 존재하지 않습니다.

노드와 경로 둘다 준비가 된후에 animating은 쉽게 끝납니다. 여러분은 전이와 보간법 메소드를 위해서 존속기간(duration)을 조건으로 저장합니다. 옵션 파라메터인 ORTHOGONAL_TO_TANGENT 경로의 접선에 직각으로 유지될 노드를 필요로 합니다. 만약 그렇지 않으면 차는 초기의 왼쪽에서 오른쪽으로 가는 경로에만 고집하고 회전을 못할것입니다. Figure 1는 변화의 완벽한 정의를 보여줍니다.

def track = Path {
    ...
};

def anim = PathTransition {
    node: car
    path: AnimationPath.createFromPath(track)
    orientation: OrientationType.ORTHOGONAL_TO_TANGENT
    interpolate: Interpolator.LINEAR
    duration: 6s
    repeatCount: Timeline.INDEFINITE
};

Figure 1: Transition 객체 만들기

transition을 시작하기 위해서 Figure 2에서 보여지는 것처럼 play() 메소드를 사용하세요.

anim.play();

Figure 2: Transition 시작하기

범선 시나리오에서 움직이는 범선뿐만 아니라 파도 역시 오른쪽에서 왼쪽으로 흘러갑니다. 이 효과는 transition의 다른 타입인 javafx.animation.transition.TranslateTransition에 의해서 얻어집니다. 이 transition은 PathTransition가 하는 것처럼 같은 시간에 같은 거리를 움직여가지만 다른 방향으로 움직여가는 것을 제공하기 때문에 보트는 시나리오의 정중앙에 위치할수 있습니다. Figure 3은 변형하는 transition을 보여줍니다.

def move = TranslateTransition {
    fromX: 0
    fromY: 0
    toX: -600
    toY: 0
    node: bind this.node
    interpolate: Interpolator.LINEAR
    duration: 8s
    repeatCount: Timeline.INDEFINITE
};

Figure 3: Translation Transition 정의하기

사용자가 상단 왼쪽에 있는 버튼을 이용하여 시나리오들 사이를 변경할때 새로운 시나리오는 페이드 인(fade in) 합니다. 이것은 이제 다른 trasition 클래스인 javafx.animation.transition.FadeTransition를 이용하여 완료됩니다. fromValue와 toValue 인자는 노드의 불투명도에 적용합니다. Figure 4에 도해된 우리의 경우 시나리오 노드는 현재 노드의 불투명도 상태부터 완전하게 불투명까지 2초안에 이르게 됩니다.

var fadein = FadeTransition {
    node: bind this.node
    fromValue: bind this.node.opacity
    toValue: 1
    duration: 2s
    interpolate: Interpolator.EASEOUT
};

Figure 4: Using Fade Transition