JavaFX Example Code | SpringAnimation

Spring Animation Effects With a Custom Interpolator

By Josh Marinacci, October 19th, 2008

JavaFX는 애니메이션 사이를 위해서 기본 interpolators를 제공합니다만 여러분은 또한 어떤 멋진 효과를 위해서 여러분 자신만의것을 만들어야 합니다. 이 예제는 spring interpolator를 어떻게 만드는지 보여줍니다.

코드 이해하기

기본적으로 애니메이션은 일정한 속도로 움직이는 animated된 물체를 의미하는 리니어(선형) 입니다. "ease-in" 애니메이션은 물체가 서서히 움직이다가 속도를 올리는 것을 의미합니다. "Ease-out" 은 거꾸로 물체가 평균적인 속도로 시작하다가 끝에 다다를때 속도를 늦춥니다. 이 행동은 Interpolator 객체에 의해서 제어됩니다. JavaFX는 LINEAR, EASEIN, EASEOUT 그리고 ease-out (EASEBOTH)를 더한 ease-in 이외에 ease-out (EASEBOTH)을 위한 기본 interpolators를 가지고 있습니다. 하지만 가끔 여러분은 다른 종류의 interpolation을 원합니다. JavaFX는 Interpolator 또는 SimpleInterpolator를 상속받아서 여러분 자신만의 custom interpolators를 만들수 있게 합니다. 이 예제는 여러분이 커스텀 interpolator를 이용해서 용수철 같은 움직임을 만드는지 보여줍니다.

interpolator는 스스로 SimpleInterpolator를 상속받고 단 하나의 함수를 구현합니다: curve. 이것은 애니메이션의 길이를 넘는 t (시간)의 커브 입니다. 0.0 부터 1.0까지(애니메이션의 지속을 나타내는) 진행하여 t의 서로 다른 값을 리턴함으로써 여러분은 복잡한 interpolation 행위를 생성할수 있습니다. 용수철 같은 애니메이션을 만들기 위해서 Figure 1 의 코드는 표준 물리 스프링 방정식을 사용하여 SpringInterpolator를 생성합니다.

Source Code

import javafx.animation.SimpleInterpolator;
import java.lang.Math;

public class SpringInterpolator extends SimpleInterpolator {
    // the amplitude of the wave
    // controls how far out the object can go from it's final stopping point.
    public-init var amplitude:Number = 1.0;
    // determines the weight of the object
    // makes the wave motion go longer and farther
    public-init var mass:Number = 0.058;
    // the stiffness of the wave motion / spring
    // makes the motion shorter and more snappy
    public-init var stiffness:Number = 12.0;
    // makes the wave motion be out of phase, so that the object
    // doesn't end up on the final resting spot.
    // this variable is usually never changed
    public-init var phase:Number = 0.0;

    // if this should do a normal spring or a bounce motion
    public-init var bounce:Boolean = false;


    // internal variables used for calcuations
    var pulsation:Number;

    init {
        this.pulsation = Math.sqrt(stiffness / mass);
    }


    // the actual spring equation
    override public function curve(t: Number) : Number {
        var t2 = -Math.cos(pulsation*t+phase+Math.PI) * (1-t) * amplitude ;
        // use the absolute value of the distance if doing a bounces
        if(bounce) {
            return 1-Math.abs(t2);
        } else {
            return 1-t2;
        }
    }
}

Figure 1: SpringInterpolator.fx Code

커스텀 interpolator를 사용하기 위해서 여러분은 그것의 인스턴스를 생성하고 나서 tween 키워드와 함께 여러분의 키프레임 안에서 그것을 사용해야 합니다. Figure 2의 코드는 새로운 SpringInterpolator를 생성하고 나서 springAnimY 변수를 정의합니다. springAnim 타임라인은 1.5초 동안 0부터 200까지 springAnimY 변수를 움직이게 합니다. tween spring는 표준 interpolator 대신에 스피링 interpolator를 사용하는 애니메이션을 만듭니다. 마지막으로 공 이미지를 포함한 그룹은 타임라인과 함께 움직이게 만드는 springAnimY 변수에 의존합니다(결정됩니다?).

Source Code

def spring = SpringInterpolator { bounce: false};
var springAnimY = 50;
var springAnim = Timeline {
    keyFrames: [ at(1.5s) { springAnimY => 200 tween spring}, ]
};
// bind the to the springAnimY variable which will animate it
var springImage = ImageView {
    translateX: 20
    translateY: bind springAnimY;
    image: Image { url: "{__DIR__}image/ball.png" }
    onMousePressed:function(e:MouseEvent) {
        springAnim.time = 0s;
        springAnim.play();
    }
};

Figure 2: SpringTest.fx Code

이 예제는 실제로 두개의 애니메이션을 가지고 있습니다. 하나는 스프링을 위한것이고 하나는 튀어오르는 것을 위한 것입니다. 튀어오르는 버전은 스프링 웨이브를 반영하기 위한 t의 절대값을 제외하고 실제로 같은 방정식입니다. (Figure 1의 마지막을 보세요) 결과적으로 객체는 오히려 그것을 지나치고 다시 돌아오는지 보다는 그것의 종점을 반응을 살핍니다. 이 기능을 사용하기 위해서 SpringInterpolator의 bounce 변수를 true가 되게 하세요.

FX

Profile

Spring Animation Effects With a Custom Interpolator

코드 이해하기