Android 动画分析（二）

上一篇 Android动画分析（一）介绍了 Android 常见的 3 种动画：视图动画、逐帧动画、属性动画，不熟悉的同学可以去上一篇看看。这篇开始介绍 Android 的布局动画、自定义动画、矢量动画机制等知识。

1. Android 的布局动画

所谓的布局动画是作用在 ViewGroup上的，当 ViewGroup 添加 子View 的时候，子View会按照 ViewGroup 设置的动画实现顺序、逆序或者随机的动画播放效果，实现 ViewGroup 添加 子View的过渡效果。

最简单的布局动画是在 ViewGroup 的XML中，添加允许布局变化播放动画的属性：

android:animateLayoutChanges="true"

通过设置这个属性，当 ViewGroup添加子View的时候，子View会呈现逐渐显示的过渡效果，这个效果是 Android 默认的，不能自定义改变如果想自定义 ViewGroup 的布局动画，就要使用 java 代码方式实现。

举个栗子

定义视图动画的 XML 文件（R.anim.view_animation）代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/accelerate_decelerate_interpolator"
     android:shareInterpolator="true"
    android:duration="3000"
    android:fillAfter="true">

    <alpha
        android:fromAlpha="0.3"
        android:toAlpha="1" />

    <scale
        android:fromXScale="0.5"
        android:toXScale="1"
        android:fromYScale="0.5"
        android:toYScale="1"/>

    <translate
        android:fromXDelta="0"
        android:toXDelta="10%"
        android:fromYDelta="0"
        android:toYDelta="10%" />

    <rotate
        android:fromDegrees="0"
        android:toDegrees="15"
        android:pivotX="0"
        android:pivotY="0" />
</set>

在 Activity 中使用

layout = (RelativeLayout)findViewById(R.id.activity_property_animation);

//设置一连串动画
Animation a = AnimationUtils.loadAnimation(PropertyAnimationActivity.this,R.anim.view_animation);
//设置布局动画的显示属性
LayoutAnimationController controller = new LayoutAnimationController(a,0.5f);
//子View的显示顺序
controller.setOrder(LayoutAnimationController.ORDER_NORMAL);

// 为ViewGroup设置布局动画
layout.setLayoutAnimation(controller);

也可以为 LayoutAnimationController 设置单个动画：平移、旋转、缩放、透明度动画。

布局动画.gif

2. 自定义动画

自定义动画只需要继承 android.view.animation.Animation 类，重写 public void initialize(int width, int height, int parentWidth, int parentHeight) 方法和 protected void applyTransformation(float interpolatedTime, Transformation t) 方法即可。

举个栗子

下面是一个实现绕 Y 轴旋转的自定义动画 Demo

自定义的旋转动画

/**
 * Android SDK Demo
 *
 * An animation that rotates the view on the Y axis between two specified angles.
 * This animation also adds a translation on the Z axis (depth) to improve the effect.
 *
 * 自定义一个绕着Y轴旋转且在Z轴有平移的动画
 */
public class RotateAnimation extends Animation {
  private final float mFromDegrees;
  private final float mToDegrees;
  private final float mCenterX;
  private final float mCenterY;
  private final float mDepthZ;
  private final boolean mReverse;  //控制Z轴移动方向，达到视觉远近移动导致的视图放大缩小效果。
  private Camera mCamera;

  /**
   * 构造方法
   *
   * @param fromDegrees 3D旋转的起始角度
   * @param toDegrees SD旋转后的角度
   * @param centerX 旋转中心X
   * @param centerY 旋转中心Y
   * @param reverse true 反转, false 返回
   */
  public RotateAnimation(float fromDegrees, float toDegrees,
                           float centerX, float centerY, float depthZ, boolean reverse) {
    mFromDegrees = fromDegrees;
    mToDegrees = toDegrees;
    mCenterX = centerX;
    mCenterY = centerY;
    mDepthZ = depthZ;
    mReverse = reverse;
  }

  @Override
  public void initialize(int width, int height, int parentWidth, int parentHeight) {
    super.initialize(width, height, parentWidth, parentHeight);
    mCamera = new Camera();
  }

  @Override
  protected void applyTransformation(float interpolatedTime, Transformation t) {
    final float fromDegrees = mFromDegrees;
    float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);

    final float centerX = mCenterX;
    final float centerY = mCenterY;
    final Camera camera = mCamera;

    final Matrix matrix = t.getMatrix();

    Log.i("interpolatedTime", interpolatedTime+"");
    camera.save();

    if (mReverse) {  //近————>远
      camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
    } else {    //远————>近
      camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
    }

    //沿着Y轴旋转
    camera.rotateY(degrees);
    // 将旋转变换作用到matrix上
    camera.getMatrix(matrix);
    camera.restore();

    // 通过pre方法设置矩阵作用前的偏移量来改变旋转中心
    matrix.preTranslate(-centerX, -centerY);
    matrix.postTranslate(centerX, centerY);
  }
}

界面布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/activity_custom_animation"
    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="com.cn21.innovator.animationtest.CustomAnimationActivity">

    <Button
        android:id="@+id/reverse"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="打开名片"/>

    <RelativeLayout
        android:id="@+id/rl_content"
        android:layout_width="match_parent"
        android:layout_height="270dp"
        android:layout_below="@+id/reverse"
        android:layout_marginTop="10dp"
        android:background="@android:color/black">

        <ImageView
            android:id="@+id/iv_logo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@null"
            android:src="@drawable/b"
            android:scaleType="fitXY"/>

        <TextView
            android:id="@+id/tv_desc"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp"
            android:text="能成就大事的绝不是靠一个人，背后肯定有一个独一无二的团队\n\n简书号：innovatorCL\n\n怀揣技术的梦想，乘着大浪，扬帆起航。"
            android:textColor="@android:color/white"
            android:gravity="center"
            android:textSize="18sp"
            android:visibility="gone"/>
    </RelativeLayout>


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="250dp"
        android:layout_height="200dp"
        android:src="@drawable/a"
        android:layout_below="@+id/rl_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"/>

</RelativeLayout>

在Activity中调用

public class CustomAnimationActivity extends AppCompatActivity {

  private RelativeLayout mContentRl;
  private ImageView mScene;
  private ImageView mImageView;
  private TextView mDescTv;

  private Button mReverseButton;

  private int centerX;
  private int centerY;
  private int depthZ = 400;
  private int duration = 600;
  private RotateAnimation openAnimation;
  private RotateAnimation closeAnimation;

  private boolean isOpen = true;  //打开文字


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

    mScene = (ImageView)findViewById(R.id.iv_logo);
    mDescTv = (TextView)findViewById(R.id.tv_desc);
    mImageView = (ImageView)findViewById(R.id.imageView);
    mContentRl = (RelativeLayout)findViewById(R.id.rl_content);
    mReverseButton = (Button)findViewById(R.id.reverse);

    mReverseButton.postDelayed(new Runnable() {
      @Override
      public void run() {
        //onCreate()中视图还没绘好，获取的宽高为0，所以要延迟获取，以旋转对象的中心点为旋转中心点
        centerX = mContentRl.getWidth()/2;
        centerY = mContentRl.getHeight()/2;
      }
    },50);


    mReverseButton.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {



        if(openAnimation == null){
          initOpenAnimation();
          initCloseAnimation();
        }

        //动画正在进行
        if(openAnimation.hasStarted() && !openAnimation.hasEnded()){
          return;
        }
        if(closeAnimation.hasStarted() && !closeAnimation.hasEnded()){
          return;
        }

        if(isOpen){
          mContentRl.startAnimation(openAnimation);  //打开文字
        }else {
          mContentRl.startAnimation(closeAnimation);
        }

        isOpen = !isOpen;
        mReverseButton.setText(isOpen ? "关闭文字" : "打开文字");
      }
    });



    //模拟电视关闭效果
    mImageView.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
      }
    });


  }

  private void initOpenAnimation(){
    //近————> 远
    //从0到90度，顺时针旋转视图，此时reverse参数为true，达到90度时动画结束时风景图变得不可见
    openAnimation = new RotateAnimation(0,90,centerX,centerY,depthZ,true);
    openAnimation.setDuration(duration);
    openAnimation.setFillAfter(true);
    openAnimation.setInterpolator(new AccelerateInterpolator());  //加速因子
    openAnimation.setAnimationListener(new Animation.AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {
      }

      @Override
      public void onAnimationEnd(Animation animation) {
        mScene.setVisibility(View.GONE);
        mDescTv.setVisibility(View.VISIBLE);

        //远————>近
        //从270到360度，顺时针旋转视图，此时reverse参数为false，达到360度动画结束时文字变得可见
        RotateAnimation rotateAnimation = new RotateAnimation(270,360,centerX,centerY,depthZ,false);
        rotateAnimation.setDuration(duration);
        rotateAnimation.setFillAfter(true);
        rotateAnimation.setInterpolator(new DecelerateInterpolator());  //减速因子
        mContentRl.startAnimation(rotateAnimation);
      }

      @Override
      public void onAnimationRepeat(Animation animation) {
      }
    });
  }

  private void initCloseAnimation(){
    //近————> 远
    //反转图片效果
    closeAnimation = new RotateAnimation(360,270,centerX,centerY,depthZ,true);
    closeAnimation.setDuration(duration);
    closeAnimation.setFillAfter(true);
    closeAnimation.setInterpolator(new AccelerateInterpolator());
    closeAnimation.setAnimationListener(new Animation.AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {
      }

      @Override
      public void onAnimationEnd(Animation animation) {
        mScene.setVisibility(View.VISIBLE);
        mDescTv.setVisibility(View.GONE);

        //远————>近
        RotateAnimation rotateAnimation = new RotateAnimation(90,0,centerX,centerY,depthZ,false);
        rotateAnimation.setDuration(duration);
        rotateAnimation.setFillAfter(true);
        rotateAnimation.setInterpolator(new DecelerateInterpolator());
        mContentRl.startAnimation(rotateAnimation);
      }

      @Override
      public void onAnimationRepeat(Animation animation) {
      }
    });
  }

效果

动画效果

参考资料

Android 利用Camera实现中轴3D卡牌翻转效果

Android 动画分析（二）

1. Android 的布局动画

2. 自定义动画

参考资料

推荐阅读更多精彩内容