การทำ Animation (Alpha) | Phaisarn Sutheebanjard

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">150dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:padding">10dp</item>
        <item name="android:textSize">20sp</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"?>
<GridLayout 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"
    android:columnCount="2"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="2"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="10dp"
        android:padding="10dp"
        android:text="Alpha Animation"
        android:textColor="@color/colorAccent"
        android:textSize="40dp" />

    <Button
        android:id="@+id/button_fade_out"
        style="@style/ButtonStyle"
        android:layout_columnWeight="1"
        android:text="Fade Out" />

    <Button
        android:id="@+id/button_fade_in"
        style="@style/ButtonStyle"
        android:layout_columnWeight="1"
        android:text="Fade In" />

    <TextView
        android:id="@+id/textview_blink"
        android:layout_columnSpan="2"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp"
        android:padding="10dp"
        android:text="Blink!"
        android:textColor="@color/colorAccent"
        android:textSize="50dp" />

    <FrameLayout
        android:layout_columnSpan="2"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp">

        <TextView
            android:id="@+id/textview_cross_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="Cross"
            android:textColor="@color/colorAccent"
            android:textSize="50dp" />

        <TextView
            android:id="@+id/textview_cross_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="Fading"
            android:textColor="@color/colorAccent"
            android:textSize="50dp" />
    </FrameLayout>

</GridLayout>

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

<GridLayout 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"

android:columnCount="2"

tools:context=".MainActivity">

<TextView

android:id="@+id/textview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_columnSpan="2"

android:layout_gravity="center_horizontal"

android:layout_marginBottom="10dp"

android:padding="10dp"

android:text="Alpha Animation"

android:textColor="@color/colorAccent"

android:textSize="40dp" />

<Button

android:id="@+id/button_fade_out"

style="@style/ButtonStyle"

android:layout_columnWeight="1"

android:text="Fade Out" />

<Button

android:id="@+id/button_fade_in"

style="@style/ButtonStyle"

android:layout_columnWeight="1"

android:text="Fade In" />

<TextView

android:id="@+id/textview_blink"

android:layout_columnSpan="2"

android:layout_gravity="center_horizontal"

android:layout_marginTop="50dp"

android:padding="10dp"

android:text="Blink!"

android:textColor="@color/colorAccent"

android:textSize="50dp" />

<FrameLayout

android:layout_columnSpan="2"

android:layout_gravity="center_horizontal"

android:layout_marginTop="50dp">

<TextView

android:id="@+id/textview_cross_1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="10dp"

android:text="Cross"

android:textColor="@color/colorAccent"

android:textSize="50dp" />

<TextView

android:id="@+id/textview_cross_2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="10dp"

android:text="Fading"

android:textColor="@color/colorAccent"

android:textSize="50dp" />

</FrameLayout>

</GridLayout>

MainActivity.java

package com.phaisarn.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.animation.Animator;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private float mValueBlink = 0f;
    private float mValueCross1 = 0f;
    private float mValueCross2 = 1f;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final TextView textView = findViewById(R.id.textview);

        findViewById(R.id.button_fade_out).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.animate()
                        .alpha(0.1f).setDuration(1000).start();
            }
        });

        findViewById(R.id.button_fade_in).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.animate().alpha(1f).setDuration(1000).start();
            }
        });

        final TextView textBlink = findViewById(R.id.textview_blink);
        Animator.AnimatorListener listener = new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //ให้กำหนดค่าสิ้นสุดสลับกันระหว่าง 0f กับ 1f เพื่อให้เกิด Fade Out สลับกับ Fade In
                mValueBlink = (mValueBlink == 0f) ? 1f : 0f;
                textBlink.animate().alpha(mValueBlink).setDuration(500).start();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        };
        textBlink.animate().alpha(mValueBlink).setDuration(500).setListener(listener).start();
            /*
            ObjectAnimator blink = ObjectAnimator.ofFloat(textBlink, "alpha", 1f, 0f);
            blink.setDuration(500);
            //blink.setRepeatMode(ObjectAnimator.REVERSE);
            blink.reverse();
            blink.setRepeatCount(ObjectAnimator.INFINITE);
            blink.start();
            */

        final TextView textCross1 = findViewById(R.id.textview_cross_1);
        //runnable สำหรับ TextView อันที่ 1
        Runnable runnableCross1 = new Runnable() {
            @Override
            public void run() {
                //ให้กำหนดค่าสิ้นสุดสลับกันระหว่าง 0f กับ 1f เพื่อให้เกิด Fade Out สลับกับ Fade In
                mValueCross1 = (mValueCross1 == 0f) ? 1f : 0f;
                textCross1.animate().alpha(mValueCross1).setDuration(1500).withEndAction(this).start();
            }
        };

        final TextView textCross2 = findViewById(R.id.textview_cross_2);
        //runnable สำหรับ TextView อันที่ 2
        Runnable runnableCross2 = new Runnable() {
            @Override
            public void run() {
                mValueCross2 = (mValueCross2 == 0f) ? 1f : 0f;
                textCross2.animate().alpha(mValueCross2).setDuration(1500).withEndAction(this).start();
            }
        };

        textCross1.animate().alpha(mValueCross1).setDuration(1500).withEndAction(runnableCross1).start();
        textCross2.animate().alpha(mValueCross2).setDuration(1500).withEndAction(runnableCross2).start();
    }
}

package com.phaisarn.myapplication;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.animation.Animator;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

private float mValueBlink = 0f;

private float mValueCross1 = 0f;

private float mValueCross2 = 1f;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

final TextView textView = findViewById(R.id.textview);

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

@Override

public void onClick(View v) {

textView.animate()

.alpha(0.1f).setDuration(1000).start();

}

});

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

@Override

public void onClick(View v) {

textView.animate().alpha(1f).setDuration(1000).start();

}

});

final TextView textBlink = findViewById(R.id.textview_blink);

Animator.AnimatorListener listener = new Animator.AnimatorListener() {

@Override

public void onAnimationStart(Animator animation) {

}

@Override

public void onAnimationEnd(Animator animation) {

//ให้กำหนดค่าสิ้นสุดสลับกันระหว่าง 0f กับ 1f เพื่อให้เกิด Fade Out สลับกับ Fade In

mValueBlink = (mValueBlink == 0f) ? 1f : 0f;

textBlink.animate().alpha(mValueBlink).setDuration(500).start();

}

@Override

public void onAnimationCancel(Animator animation) {

}

@Override

public void onAnimationRepeat(Animator animation) {

}

};

textBlink.animate().alpha(mValueBlink).setDuration(500).setListener(listener).start();

ObjectAnimator blink = ObjectAnimator.ofFloat(textBlink, "alpha", 1f, 0f);

blink.setDuration(500);

//blink.setRepeatMode(ObjectAnimator.REVERSE);

blink.reverse();

blink.setRepeatCount(ObjectAnimator.INFINITE);

blink.start();

final TextView textCross1 = findViewById(R.id.textview_cross_1);

//runnable สำหรับ TextView อันที่ 1

Runnable runnableCross1 = new Runnable() {

@Override

public void run() {

//ให้กำหนดค่าสิ้นสุดสลับกันระหว่าง 0f กับ 1f เพื่อให้เกิด Fade Out สลับกับ Fade In

mValueCross1 = (mValueCross1 == 0f) ? 1f : 0f;

textCross1.animate().alpha(mValueCross1).setDuration(1500).withEndAction(this).start();

}

};

final TextView textCross2 = findViewById(R.id.textview_cross_2);

//runnable สำหรับ TextView อันที่ 2

Runnable runnableCross2 = new Runnable() {

@Override

public void run() {

mValueCross2 = (mValueCross2 == 0f) ? 1f : 0f;

textCross2.animate().alpha(mValueCross2).setDuration(1500).withEndAction(this).start();

}

};

textCross1.animate().alpha(mValueCross1).setDuration(1500).withEndAction(runnableCross1).start();

textCross2.animate().alpha(mValueCross2).setDuration(1500).withEndAction(runnableCross2).start();

}