การทำ Animation (Interpolator)

values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="ButtonStyle">
        <item name="android:layout_width">120dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textSize">18sp</item>
        <item name="android:textAllCaps">false</item>
    </style>
</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

<item name="android:layout_height">wrap_content</item>

<item name="android:textAllCaps">false</item>

</style>

</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/img_ball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|right"
        android:src="@drawable/ball" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <Button
            android:id="@+id/button_linear"
            style="@style/ButtonStyle"
            android:text="Linear" />

        <Button
            android:id="@+id/button_accelerate"
            style="@style/ButtonStyle"
            android:text="Accelerate" />

        <Button
            android:id="@+id/button_decelerate"
            style="@style/ButtonStyle"
            android:text="Decelerate" />

        <Button
            android:id="@+id/button_bounce"
            style="@style/ButtonStyle"
            android:text="Bounce" />

        <Button
            android:id="@+id/button_cycle"
            style="@style/ButtonStyle"
            android:text="Cycle" />
    </LinearLayout>

</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<ImageView

android:id="@+id/img_ball"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="top|right"

android:src="@drawable/ball" />

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<Button

android:id="@+id/button_linear"

style="@style/ButtonStyle"

android:text="Linear" />

<Button

android:id="@+id/button_accelerate"

style="@style/ButtonStyle"

android:text="Accelerate" />

<Button

android:id="@+id/button_decelerate"

style="@style/ButtonStyle"

android:text="Decelerate" />

<Button

android:id="@+id/button_bounce"

style="@style/ButtonStyle"

android:text="Bounce" />

<Button

android:id="@+id/button_cycle"

style="@style/ButtonStyle"

android:text="Cycle" />

</LinearLayout>

</FrameLayout>

MainActivity.java

package com.phaisarn.myapplication;

import android.animation.TimeInterpolator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.BounceInterpolator;
import android.view.animation.CycleInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private int mScreenWidth;
    private int mScreenHeight;

    private ImageView mImgBall;
    private int mImgHeight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        DisplayMetrics display = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(display);
        mScreenWidth = display.widthPixels;
        mScreenHeight = display.heightPixels;

        mImgBall = findViewById(R.id.img_ball);
        mImgBall.post(new Runnable() {
            @Override
            public void run() {
                mImgHeight = mImgBall.getHeight();
                setStartPosition(100);
            }
        });

        findViewById(R.id.button_linear).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setStartPosition(100);
                animate(new LinearInterpolator(), mScreenHeight - 650);
            }
        });

        findViewById(R.id.button_accelerate).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setStartPosition(100);
                animate(new AccelerateInterpolator(), mScreenHeight - 650);
            }
        });

        findViewById(R.id.button_decelerate).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setStartPosition(100);
                animate(new DecelerateInterpolator(), mScreenHeight - 650);
            }
        });

        findViewById(R.id.button_bounce).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setStartPosition(100);
                animate(new BounceInterpolator(), mScreenHeight - 650);
            }
        });

        findViewById(R.id.button_cycle).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int delta = mScreenHeight / 2 - mImgHeight;
                setStartPosition(delta);
                animate(new CycleInterpolator(2), delta - 100);
            }
        });
    }

    private void animate(TimeInterpolator interpol, float yBy) {
        mImgBall.animate()
                .setInterpolator(interpol)
                .translationYBy(yBy)
                .setDuration(5000)
                .setStartDelay(1000)
                .start();
    }

    private void setStartPosition(int y) {
        mImgBall.setX(mScreenWidth - 400);
        mImgBall.setY(y);
    }
}

package com.phaisarn.myapplication;

import android.animation.TimeInterpolator;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.DisplayMetrics;

import android.view.View;

import android.view.animation.AccelerateInterpolator;

import android.view.animation.BounceInterpolator;

import android.view.animation.CycleInterpolator;

import android.view.animation.DecelerateInterpolator;

import android.view.animation.LinearInterpolator;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private int mScreenWidth;

private int mScreenHeight;

private ImageView mImgBall;

private int mImgHeight;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

DisplayMetrics display = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(display);

mScreenWidth = display.widthPixels;

mScreenHeight = display.heightPixels;

mImgBall = findViewById(R.id.img_ball);

mImgBall.post(new Runnable() {

@Override

public void run() {

mImgHeight = mImgBall.getHeight();

setStartPosition(100);

}

});

findViewById(R.id.button_linear).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

setStartPosition(100);

animate(new LinearInterpolator(), mScreenHeight - 650);

}

});

findViewById(R.id.button_accelerate).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

setStartPosition(100);

animate(new AccelerateInterpolator(), mScreenHeight - 650);

}

});

findViewById(R.id.button_decelerate).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

setStartPosition(100);

animate(new DecelerateInterpolator(), mScreenHeight - 650);

}

});

findViewById(R.id.button_bounce).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

setStartPosition(100);

animate(new BounceInterpolator(), mScreenHeight - 650);

}

});

findViewById(R.id.button_cycle).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

int delta = mScreenHeight / 2 - mImgHeight;

setStartPosition(delta);

animate(new CycleInterpolator(2), delta - 100);

}

});

}

private void animate(TimeInterpolator interpol, float yBy) {

mImgBall.animate()

.setInterpolator(interpol)

.translationYBy(yBy)

.setDuration(5000)

.setStartDelay(1000)

.start();

}

private void setStartPosition(int y) {

mImgBall.setX(mScreenWidth - 400);

mImgBall.setY(y);

}

ภาพที่ใช้

Phaisarn Sutheebanjard

blog.phaisarn.com

การทำ Animation (Interpolator)