Android属性动画简单剖析

运行效果图:

技术分享

先看布局文件吧,activity_main.xml:

 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 tools:context="com.example.administrator.animatordemo.MainActivity"> 7  8 <ImageView 9 android:id="@+id/iv_icon"10 android:layout_width="wrap_content"11 android:layout_height="wrap_content"12 android:layout_marginLeft="10dp"13 android:layout_marginTop="10dp"14 android:scaleType="centerCrop"15 android:src="@mipmap/ic_launcher_round" />16 17 <LinearLayout18 android:layout_width="wrap_content"19 android:layout_height="wrap_content"20 android:layout_alignParentBottom="true"21 android:layout_centerHorizontal="true"22 android:orientation="vertical">23 24 <Button25 android:id="@+id/btn_click1"26 android:layout_width="wrap_content"27 android:layout_height="wrap_content"28 android:layout_centerInParent="true"29 android:layout_gravity="center"30 android:text="startAnimator1" />31 32 <Button33 android:id="@+id/btn_click2"34 android:layout_width="wrap_content"35 android:layout_height="wrap_content"36 android:layout_centerInParent="true"37 android:layout_gravity="center"38 android:text="startAnimator2" />39 40 <Button41 android:id="@+id/btn_click3"42 android:layout_width="wrap_content"43 android:layout_height="wrap_content"44 android:layout_centerInParent="true"45 android:layout_gravity="center"46 android:text="startAnimator3" />47 48 </LinearLayout>49 50 </RelativeLayout>

然后看JAVA代码,MainActivity.java:

 1 package com.example.administrator.animatordemo; 2  3 import android.animation.AnimatorSet; 4 import android.animation.ObjectAnimator; 5 import android.animation.PropertyValuesHolder; 6 import android.os.Bundle; 7 import android.support.v7.app.AppCompatActivity; 8 import android.view.View; 9 import android.widget.Button;10 import android.widget.ImageView;11 12 public class MainActivity extends AppCompatActivity implements View.OnClickListener {13 14 private Button btn_click1;15 private Button btn_click2;16 private Button btn_click3;17 private ImageView iv_icon;18 19  @Override20 protected void onCreate(Bundle savedInstanceState) {21 super.onCreate(savedInstanceState);22  setContentView(R.layout.activity_main);23  initView();24  }25 26 private void initView() {27 iv_icon = (ImageView) findViewById(R.id.iv_icon);28 btn_click1 = (Button) findViewById(R.id.btn_click1);29 btn_click1.setOnClickListener(this);30 btn_click2 = (Button) findViewById(R.id.btn_click2);31 btn_click2.setOnClickListener(this);32 btn_click3 = (Button) findViewById(R.id.btn_click3);33 btn_click3.setOnClickListener(this);34  }35 36  @Override37 public void onClick(View v) {38 switch (v.getId()) {39 case R.id.btn_click1:40 startAnimator1();//这样写,三个动画会同时执行41 break;42 case R.id.btn_click2:43 startAnimator2();//效果同startAnimator1()一致,要是和第一种相比较,更推荐此方法44 break;45 case R.id.btn_click3:46  startAnimator3();47 break;48  }49  }50 51 /**52  * 旋转动画:rotation53  * 水平动画:translationX54  * 垂直动画:translationY55 */56 private void startAnimator1() {57 ObjectAnimator.ofFloat(iv_icon, "rotation", 0F, 200F).setDuration(1000).start();58 ObjectAnimator.ofFloat(iv_icon, "translationX", 0F, 200F).setDuration(1000).start();59 ObjectAnimator.ofFloat(iv_icon, "translationY", 0F, 200F).setDuration(1000).start();60  }61 62 private void startAnimator2() {63 PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("rotation", 0F, 200F);64 PropertyValuesHolder p2 = PropertyValuesHolder.ofFloat("translationX", 0F, 200F);65 PropertyValuesHolder p3 = PropertyValuesHolder.ofFloat("translationY", 0F, 200F);66 ObjectAnimator.ofPropertyValuesHolder(iv_icon, p1, p2, p3).setDuration(1000).start();//第一个参数是控件对象,后面参数是可变长数组67  }68 69 private void startAnimator3() {70 ObjectAnimator animator1 = ObjectAnimator.ofFloat(iv_icon, "rotation", 0F, 200F);71 ObjectAnimator animator2 = ObjectAnimator.ofFloat(iv_icon, "translationX", 0F, 200F);72 ObjectAnimator animator3 = ObjectAnimator.ofFloat(iv_icon, "translationY", 0F, 200F);73 AnimatorSet set = new AnimatorSet();74 // set.playTogether(animator1, animator2, animator3);//三个动画同时执行75 set.playSequentially(animator1, animator2, animator3);//三个动画按顺序执行76 set.setDuration(1000);77  set.start();78  }79 }

说明一下,在startAnimator3()这个方法当中,AnimatorSet集合除了playTogether和playSequentially两个方法外,还有play方法。比如它可以这样使用:

set.paly(animator2).with(animator3);set.play(animator1).after(animator2);

这种效果的话,则是会先进行“水平动画和垂直动画”同时执行,然后再执行旋转动画。通过with(),after(),甚至还有before()方法这样一些方法,我们就可以做到这样一个属性集合详细的顺序处理。

是不是强大的功能呢?这种方式,也是属性动画里面使用最多的一种方式。

相关文章