Tween 애니메이션 만들기

FPSAnimator의 기본적인 사용법은 여기 에 기술했습니다.
이번 기사에서는 TweenAnimation에 대해 자세히 씁니다.

Bitmap을 애니메이션으로 만들기

BitmapDrawer 만들기
인스턴스를 만들 때 Bitmap을 생성자로 설정합니다.

DisplayObject를 생성하고 FPSTextureView, FPSSurfaceView 또는 Container에 추가합니다.
with 다음에 Tween 애니메이션을 한다면 tween(), 포물선 운동의 애니메이션을 한다면 parabolic()를 기술.
이번은 Tween 애니메이션이므로 tween().

    BitmapDrawer bitmapDrawer = new BitmapDrawer(bitmap)
        .dpSize(this)
        .scaleRegistration(bitmap.getWidth() / 2, bitmap.getHeight() / 2);

    float x = 300;
    float y = 400;

    DisplayObject bitmapDisplay = new DisplayObject();
    bitmapDisplay.with(bitmapDrawer)
            .tween()
            .tweenLoop(true)
            .transform(x, y)
            .to(500, x, y, 0, 6f, 6f, 0, Ease.SINE_IN_OUT)
            .waitTime(300)
            .transform(x, y, Util.convertAlphaFloatToInt(1f), 1f, 1f, 0)
            .waitTime(300)
            .end();

텍스트 애니메이션

TextDrawer 만들기
인스턴스 작성시, String 의 캐릭터 라인과, textSize나 textColor가 설정된 Paint를 constructor 으로 설정.
Paint에 typeface를 설정하면 글꼴을 바꿀 수 있으며 글꼴 아이콘을 그릴 수 있습니다.

DisplayObject를 생성하고 FPSTextureView, FPSSurfaceView 또는 Container에 추가합니다.
with 다음에 Tween 애니메이션을 한다면 tween(), 포물선 운동의 애니메이션을 한다면 parabolic()를 기술.
이번은 Tween 애니메이션이므로 tween().

    Paint paint = new Paint();
    paint.setColor(ContextCompat.getColor(this, R.color.colorAccent));
    paint.setTextSize(Util.convertDpToPixel(16, this));

    String tweenTxt = "TweenText";
    float textWidth = paint.measureText(tweenTxt);

    TextDrawer textDrawer = new TextDrawer(tweenTxt, paint)
            .rotateRegistration(textWidth / 2, textWidth / 2);

    DisplayObject textDisplay = new DisplayObject();
    textDisplay.with(textDrawer)
            .tween()
            .tweenLoop(true)
            .transform(0, 800)
            .waitTime(300)
            .to(1000, windowWidth - textWidth, 800, 720f, Ease.SINE_OUT)
            .waitTime(300)
            .to(1000, 0, 800, 0f, Ease.SINE_IN)
            .end();

Tween 속성

함수 이름
기능


tweenLoop(boolean)
true이면 트윈 애니메이션이 반복됩니다.

transform(float x, float y) transform(float x, float y, int alpha, float scaleX, float scaleY, float rotation)
애니메이션은 없으며 즉시 인수 값으로 변경됩니다.

toX(long animDuration, float x) toX(long animDuration, float x, Ease ease)
x 값의 애니메이션을 만듭니다. 값의 단위는 pixel

toY(long animDuration, float y) toY(long animDuration, float y, Ease ease)
y 값의 애니메이션을 만듭니다. 값의 단위는 pixel

alpha(long animDuration, float alpha)alpha(long animDuration, float alpha, Ease ease)
투명도의 애니메이션을 시킨다. 그러나 Max 값은 int255입니다. 1.0~0의 범위내에서 지정하고 싶은 경우, Util.convertAlphaIntToFloat(float)라고 하는 함수가 준비되어 있습니다.

scale(long animDuration, float scaleX, float scaleY)scale(long animDuration, float scaleX, float scaleY, Ease ease)
scale의 애니메이션을 시킨다. 확대의 중심 좌표를 조작하고 싶은 경우, 각 Drawer에 scaleRegistration 함수가 탑재되어 있으므로, 거기서 좌표를 설정한다.

rotation(long animDuration, float rotation)rotation(long animDuration, float rotation, Ease ease)
회전 애니메이션을 만듭니다. 회전의 중심 좌표를 조작하고 싶은 경우, 각 Drawer에 rotateRegistration 함수가 탑재되어 있으므로, 거기서 좌표를 설정한다.

waitTime(long animDuration)
애니메이션하지 않고 그 때의 속성으로 그립니다.

call (AnimCallBack callBack)
트윈이 시작되거나 종료될 때와 같이 특정 시점에서 콜백 함수를 실행하려는 경우에 사용

to(long animDuration, float x, float y) to(long animDuration, float x, float y, Ease ease) to(long animDuration, float x, float y, int alpha) to(long animDuration, float x, float y, int alpha, Ease ease) to(long animDuration, float x, float y, float scaleX, float scaleY) to(long animDuration, float x, float y, float scaleX, float scaleY, Ease ease) to(long animDuration , float y, float rotation) to(long animDuration, float x, float y, float rotation, Ease ease) to(long animDuration, float x, float y, int alpha, float scaleX, float scaleY, float rotation, Easeease
현재의 상태로부터 인수의 타겟의 상태까지, animDuration의 시간으로 트윈 애니메이션 한다.


설명 예

    DisplayObject bitmapDisplay = new DisplayObject();
    bitmapDisplay
            .with(new BitmapDrawer(bitmap))
            .tween()
            .tweenLoop(true)
            .transform(bitmapX, bitmapY)
            .toX(1600, UIUtil.getWindowWidth(this) - bitmap.getWidth(), Ease.BACK_IN_OUT)
            .waitTime(1000)
            .alpha(1000, 0f)
            .alpha(1000, 1f)
            .scale(500, -1f, 1f, Ease.CUBIC_IN)
            .scale(500, 1f, 1f, Ease.CUBIC_OUT)
            .call(new AnimCallBack() {
                @Override
                public void call() {
                    Snackbar.make(mFPSTextureView, "Animation finished!", Snackbar.LENGTH_LONG)
                            .setAction("Action", null).show();
                }
            })
            .end();

Easing

easing은 28 종류도 있네요.


꼭 library에 github의 Star를 부탁드립니다.
FPSAnimator