This is the 11th day of my participation in the August More Text Challenge. For details, see:August is more challenging

preface

Recently, my friend asked me about flipping animations. I happened to take notes when I watched the Android Api Demo in my sophomore year and wrote an article about it.

demand

The right swipe on the screen event triggers the card flip effect. For convenience, change the right swipe event to a button click event in this example

As usual, there is the source code at the end

First, introduce three interpolators

LinearInterpolator() at a constant rate, AccelerateInterpolator() at a slower rate, ateinterpolator () at a faster rate, decelerate

Second, implementation steps

1. The rendering

2. Layout

One button, two TextViews (layout file in source section)

3. Logical judgment (hidden or not)

        final TextView visibletext;
        final TextView invisibletext;
        // Logical judgment
        if (textview1.getVisibility() == View.GONE) {
            visibletext = textview2;
            invisibletext = textview1;
        } else {
            invisibletext = textview2;
            visibletext = textview1;
        }
Copy the code

4. Flip animation

 LinearInterpolator() interpolator at a constant rate
        ObjectAnimator visToInvis = ObjectAnimator.ofFloat(visibletext, "rotationY".0f.90f);
        visToInvis.setDuration(500);
        //AccelerateInterpolator() at a slow rate at first, interpolator at second
        visToInvis.setInterpolator(new AccelerateInterpolator());
        final ObjectAnimator invisToVis = ObjectAnimator.ofFloat(invisibletext, "rotationY".-90f.0f);
        invisToVis.setDuration(500);
        Activity, activity interpolator () will start at a faster rate and then decelerate
        invisToVis.setInterpolator(new DecelerateInterpolator());
        visToInvis.addListener(new AnimatorListenerAdapter() {
            @Override
            public voidonAnimationEnd(Animator anim) { visibletext.setVisibility(View.GONE); invisToVis.start(); invisibletext.setVisibility(View.VISIBLE); }}); visToInvis.start();Copy the code

5. The bug

Found a bug on the first click after implementation

6. The bug is solved

After the control is found, the y Angle is set by default

textview2.setRotationY(-90f);
Copy the code

Three, the source code

MainActivity.java

public class MainActivity extends Activity {

    private TextView textview1;
    private TextView textview2;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        / / bug is solved
        textview2.setRotationY(-90f);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public voidonClick(View v) { flipAnimation(); }}); }private void initView(a) {
        textview1 = (TextView) findViewById(R.id.textview1);
        textview2 = (TextView) findViewById(R.id.textview2);
        button = (Button) findViewById(R.id.button);
    }

    private void flipAnimation(a) {
        final TextView visibletext;
        final TextView invisibletext;
        // Logical judgment
        if (textview1.getVisibility() == View.GONE) {
            visibletext = textview2;
            invisibletext = textview1;
        } else {
            invisibletext = textview2;
            visibletext = textview1;
        }
        LinearInterpolator() interpolator at a constant rate
        ObjectAnimator visToInvis = ObjectAnimator.ofFloat(visibletext, "rotationY".0f.90f);
        visToInvis.setDuration(500);
        //AccelerateInterpolator() at a slow rate at first, interpolator at second
        visToInvis.setInterpolator(new AccelerateInterpolator());
        final ObjectAnimator invisToVis = ObjectAnimator.ofFloat(invisibletext, "rotationY".-90f.0f);
        invisToVis.setDuration(500);
        Activity, activity interpolator () will start at a faster rate and then decelerate
        invisToVis.setInterpolator(new DecelerateInterpolator());
        visToInvis.addListener(new AnimatorListenerAdapter() {
            @Override
            public voidonAnimationEnd(Animator anim) { visibletext.setVisibility(View.GONE); invisToVis.start(); invisibletext.setVisibility(View.VISIBLE); }}); visToInvis.start(); }}Copy the code

activity_main.xml

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

<TextView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="#35B9F4"
    android:id="@+id/textview1"
    android:layout_centerInParent="true"
    />
<TextView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="#03DAC5"
    android:layout_centerInParent="true"
    android:id="@+id/textview2"/>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/button"
    android:text="Click to flip"/>
</RelativeLayout>
Copy the code

Four,

Finally, change the button click event to the screen listener event. Hope to help you, welcome to leave a message. If you have any questions, please contact Ji Meng.