Wednesday, May 24, 2017

3D-flip Animation



1. FlipListener.java

import android.animation.ValueAnimator;
import android.view.View;


public class FlipListener implements ValueAnimator.AnimatorUpdateListener {

    private final View mFrontView;
    private final View mBackView;
    private boolean mFlipped;

    public FlipListener(final View front, final View back) {
        this.mFrontView = front;
        this.mBackView = back;
        this.mBackView.setVisibility(View.GONE);
    }

    @Override
    public void onAnimationUpdate(final ValueAnimator animation) {
        final float value = animation.getAnimatedFraction();
        final float scaleValue = 0.625f + (1.5f * (value - 0.5f) * (value - 0.5f));

        if(value <= 0.5f){
            this.mFrontView.setRotationY(180 * value);
            this.mFrontView.setScaleX(scaleValue);
            this.mFrontView.setScaleY(scaleValue);
            if(mFlipped){
                setStateFlipped(false);
            }
        } else {
            this.mBackView.setRotationY(-180 * (1f- value));
            this.mBackView.setScaleX(scaleValue);
            this.mBackView.setScaleY(scaleValue);
            if(!mFlipped){
                setStateFlipped(true);
            }
        }
    }

    private void setStateFlipped(boolean flipped) {
        mFlipped = flipped;
        this.mFrontView.setVisibility(flipped ? View.GONE : View.VISIBLE);
        this.mBackView.setVisibility(flipped ? View.VISIBLE : View.GONE);
    }
}

2. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:background="#45a39c">


    <RelativeLayout
        android:id="@+id/icon_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/icon_back"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:src="@drawable/card_back" />

        <ImageView
            android:id="@+id/icon_front"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:src="@drawable/card_front" />

    </RelativeLayout>
</LinearLayout>

3. MianActivity.java

import android.animation.ValueAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.ream.inex.test.FlipListener;

public class MainActivity extends Activity implements View.OnClickListener{

    ValueAnimator mFlipAnimator;
    private boolean is_front = true;

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

        RelativeLayout icon_container = (RelativeLayout) findViewById(R.id.icon_container);
        ImageView icon_front = (ImageView) findViewById(R.id.icon_front);
        ImageView icon_back = (ImageView) findViewById(R.id.icon_back);

        mFlipAnimator = ValueAnimator.ofFloat(0f, 1f);
        mFlipAnimator.addUpdateListener(new FlipListener(icon_front, icon_back));

        icon_container.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (is_front) {
            mFlipAnimator.start();
        } else {
            mFlipAnimator.reverse();
        }
        is_front =! is_front;
    }

}


EmoticonEmoticon