Android 正反面视图动画切换

2017-06-12 本文已影响238人 Super_圣代

今天做到一个模块，需要做一个控件，能够正反面都有视图，点击就能翻转切换的那种（对对对，就是你想的那种！）。

好好思考了一下，应该不怎么难，于是便开始动手自己写一个简易的。

大体思路

两个叠加在一起的视图，一个可见，一个不可见，分别设置动画效果（绕Y轴旋转），正面视图从0-90度旋转，旋转结束后，隐藏正面视图，显示背面视图，然后背面视图从-90-0度旋转，形成了一个完整的动画流程。（具体可见下面效果图）

1.首先需要两个视图。

<?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="com.sundae.FrontAndBackAnimator.MainActivity">
    

    <RelativeLayout
        android:id="@+id/card_back"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="102dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:visibility="gone">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="你好世界！"
            android:textSize="30sp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignEnd="@+id/textView"
            android:layout_alignStart="@+id/textView"
            android:layout_below="@+id/textView"
            android:layout_marginTop="12dp"
            android:text="Button" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/card_face"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="102dp"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center"
        android:visibility="visible">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Hello World！"
            android:textSize="30sp"
            android:textStyle="bold" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignStart="@+id/textView2"
            android:layout_below="@+id/textView2"
            android:layout_marginTop="12dp"
            android:ems="10"
            android:hint="请输入。。。"
            android:inputType="textPersonName" />
    </RelativeLayout>


</RelativeLayout>

得到如下效果

QQ20170612-100003@2x.png

这其实是两个视图叠加在一起的，位置和宽高相同，一个在下层，一个在上层。

2.接下来需要实现翻转的动画效果

使用ObjectAnimator，需要设置这几个属性

        toBackObjectAnimator = new ObjectAnimator();
        toBackObjectAnimator.setFloatValues(0f , 90f);    
        ///动画更新值的范围(设置为0-90度)
        toBackObjectAnimator.setDuration(duration);  ///动画的时长
        toBackObjectAnimator.setPropertyName("rotationY");    
        ///所更改的object属性  这里是y轴角度
        toBackObjectAnimator.setTarget(faceView);
        ///设置需要应用的视图

toBackObjectAnimator.addUpdateListener()可以添加动画更新的监听器
然后就可以使用toBackObjectAnimator.start()开始动画了

3.动画流程

（1）正面视图设置动画从0-90度旋转。
（2）旋转结束后，隐藏正面视图，显示背面视图。
（3）背面视图开始旋转，从-90-0度旋转。
（4）结束
这是一个流程。

4.动画显示距离的问题

这时你运行一下后会发现这样的问题

未命名1.gif

(｡ì _ í｡)我去，动画怎么就糊脸上了呢。
这是绕Y轴旋转的时候会出现的现象，需要调整视距。(初始化的时候调用一次即可，设置需要设置的view)

    /**
     * rotationY属性变换时需要调整相机距离，否则会影响用户体验
     */
    private void setCameraDistance() {
        int distance = 16000;
        float scale = context.getResources().getDisplayMetrics().density * distance;
        view.setCameraDistance(scale);    //设置相机视距距离
        view1.setCameraDistance(scale);   //需要设置的都设置一下
    }

5.一个线性动画的问题

当你这样写好后还会发现一个问题，动画update的值并不是一个线性的
而是以一种类似S型曲线的值来变幻，

这样的减速-加速-减速的曲线。
而我需要的是线性的动画效果（速度一致）
这时就需要用到一个叫插值器（TimeInterpolator）的神奇的东西。

    /**
     * 线性值插值器
     */
    class LinearAnim implements TimeInterpolator{

        @Override
        public float getInterpolation(float input) {
            //Log.e("TAG", "getInterpolation: input : " + input );
            return input;
        }
    }

写一个类使用TimeInterpolator接口
实现getInterpolation方法。

可以Log看一下input的值，实现线性效果的话直接return input就可以了。

写好想要的效果后对ObjectAnimator设置一下就行了
toBackObjectAnimator.setInterpolator(new LinearAnim());

后续会对TimeInterpolator进行一些详细的学习，挺好玩的一个东西，能够实现很多效果。

6.上面的工作完成后能够实现如下效果（GIF没有实际流畅）

anim.gif

OK，基本的功能就搞定了，剩下的就是一些逻辑性的问题了

我已经做好了一个工具类可以参考或直接调用
FrontAndBackView.java

调用方法如下：

faceAndBackView = new FrontAndBackView(getApplicationContext() , frontView, backView);
//faceAndBackView.setDuration(2000);    设置时常

添加点击监听器调用toggle方法。

@Override
    public void onClick(View v) {
        if(v.getId() == R.id.front_view || v.getId() == R.id.back_view)
            faceAndBackView.toggle();
    }

这样就可以直接使用了，可以循环哦。

ps：只是一个初步版本，后续有机会还会继续完善，如果发现有bug或者有什么建议请联系我哦😂，一起学习。
948820549@qq.com