Android物业动画研究（Property Animation）彻底解决具体解释



前Android物业动画研究（Property Animation）全然解析具体解释上已经基本展示了属性动画的核心使用方法：

ObjectAnimator实现动画，ValueAnimator实现动画，AnimatorSet的使用等~

当然了属性动画另一部分的知识点，也能做出非常不错的效果，将在本篇博客为您展示~

1、怎样使用xml文件来创建属性动画

大家肯定都清楚，View Animator 、Drawable Animator都能够在anim目录下创建动画，然后在程序中使用，甚至在Theme中设置为属性值。当然了。属性动画事实上也能够在文件里声明：

首先在res下建立animator目录。然后建立res/animator/scalex.xml

1 2 3 4 5 6 7 8

<? xml version = "1.0" encoding = "utf-8" ? > < objectAnimator xmlns : android = "http://schemas.android.com/apk/res/android"      android : duration = "1000"      android : propertyName = "scaleX"      android : valueFrom = "1.0"      android : valueTo = "2.0"      android : valueType = "floatType" > < / objectAnimator >

代码：

1 2 3 4 5 6 7

public void scaleX ( View view )      {          // 载入动画          Animator anim = AnimatorInflater . loadAnimator ( this , R . animator . scalex ) ;          anim . setTarget ( mMv ) ;          anim . start ( ) ;      }

使用AnimatorInflater载入动画的资源文件，然后设置目标，就ok~~是不是非常easy，这仅仅是单纯横向的放大一倍~

假设我希望纵向与横向同一时候缩放呢？则能够怎么定义属性文件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<? xml version = "1.0" encoding = "utf-8" ? > < set xmlns : android = "http://schemas.android.com/apk/res/android"      android : ordering = "together" >        < objectAnimator          android : duration = "1000"          android : propertyName = "scaleX"          android : valueFrom = "1"          android : valueTo = "0.5" >      < / objectAnimator >      < objectAnimator          android : duration = "1000"          android : propertyName = "scaleY"          android : valueFrom = "1"          android : valueTo = "0.5" >      < / objectAnimator >   < / set >

使用set标签，有一个orderring属性设置为together,【还有还有一个值：sequentially（表示一个接一个运行）】。

上篇博客中忽略了一个效果。就是缩放、反转等都有中心点或者轴，默认中心缩放，和中间对称线为反转线。所以我决定这个横向，纵向缩小以左上角为中心点：

代码：

1 2 3 4 5 6 7 8

// 载入动画          Animator anim = AnimatorInflater . loadAnimator ( this , R . animator . scale ) ;          mMv . setPivotX ( 0 ) ;          mMv . setPivotY ( 0 ) ;          //显示的调用invalidate          mMv . invalidate ( ) ;          anim . setTarget ( mMv ) ;          anim . start ( ) ;

非常easy。直接给View设置pivotX和pivotY，然后调用一下invalidate，就ok了。

以下看效果图：

好了，通过写xml声明动画，使用set嵌套set。结合orderring属性，也基本能够实现不论什么动画~~上面也演示了pivot的设置。

2、布局动画（Layout Animations）

主要使用LayoutTransition为布局的容器设置动画。当容器中的视图层次发生变化时存在过渡的动画效果。

基本代码为：

1 2 3 4 5 6 7 8 9 10

LayoutTransition transition = new LayoutTransition ( ) ;          transition . setAnimator ( LayoutTransition . CHANGE_APPEARING ,                  transition . getAnimator ( LayoutTransition . CHANGE_APPEARING ) ) ;          transition . setAnimator ( LayoutTransition . APPEARING ,                  null ) ;          transition . setAnimator ( LayoutTransition . DISAPPEARING ,                  null ) ;          transition . setAnimator ( LayoutTransition . CHANGE_DISAPPEARING ,                  null ) ;          mGridLayout . setLayoutTransition ( transition ) ;

 

过渡的类型一共同拥有四种：

LayoutTransition.APPEARING 当一个View在ViewGroup中出现时。对此View设置的动画

LayoutTransition.CHANGE_APPEARING 当一个View在ViewGroup中出现时。对此View对其它View位置造成影响。对其它View设置的动画

LayoutTransition.DISAPPEARING  当一个View在ViewGroup中消失时，对此View设置的动画

LayoutTransition.CHANGE_DISAPPEARING 当一个View在ViewGroup中消失时，对此View对其它View位置造成影响，对其它View设置的动画

LayoutTransition.CHANGE 不是因为View出现或消失造成对其它View位置造成影响，然后对其它View设置的动画。

注意动画究竟设置在谁身上，此View还是其它View。

好了以下看一个综合的样例：

布局文件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

< LinearLayout xmlns : android = "http://schemas.android.com/apk/res/android"      xmlns : tools = "http://schemas.android.com/tools"      android : id = "@+id/id_container"      android : layout_width = "match_parent"      android : layout_height = "match_parent"      android : orientation = "vertical" >        < Button          android : layout_width = "wrap_content"          android : layout_height = "wrap_content"          android : onClick = "addBtn"          android : text = "addBtns" / >        < CheckBox          android : id = "@+id/id_appear"          android : layout_width = "wrap_content"          android : layout_height = "wrap_content"          android : checked = "true"          android : text = "APPEARING" / >        < CheckBox          android : id = "@+id/id_change_appear"          android : layout_width = "wrap_content"          android : layout_height = "wrap_content"          android : checked = "true"          android : text = "CHANGE_APPEARING" / >        < CheckBox          android : id = "@+id/id_disappear"          android : layout_width = "wrap_content"          android : layout_height = "wrap_content"          android : checked = "true"          android : text = "DISAPPEARING" / >        < CheckBox            android : id = "@+id/id_change_disappear"          android : layout_width = "wrap_content"          android : layout_height = "wrap_content"          android : checked = "true"          android : text = "CHANGE_DISAPPEARING " / >   < / LinearLayout >

代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

package com . example . zhy_property_animation ;   import android . animation . LayoutTransition ; import android . app . Activity ; import android . os . Bundle ; import android . view . View ; import android . view . View . OnClickListener ; import android . view . ViewGroup ; import android . widget . Button ; import android . widget . CheckBox ; import android . widget . CompoundButton ; import android . widget . CompoundButton . OnCheckedChangeListener ; import android . widget . GridLayout ;   public class LayoutAnimaActivity extends Activity implements          OnCheckedChangeListener {      private ViewGroup viewGroup ;      private GridLayout mGridLayout ;      private int mVal ;      private LayoutTransition mTransition ;        private CheckBox mAppear , mChangeAppear , mDisAppear , mChangeDisAppear ;        @ Override      public void onCreate ( Bundle savedInstanceState )      {          super . onCreate ( savedInstanceState ) ;          setContentView ( R . layout . layout_animator ) ;          viewGroup = ( ViewGroup ) findViewById ( R . id . id_container ) ;            mAppear = ( CheckBox ) findViewById ( R . id . id_appear ) ;          mChangeAppear = ( CheckBox ) findViewById ( R . id . id_change_appear ) ;          mDisAppear = ( CheckBox ) findViewById ( R . id . id_disappear ) ;          mChangeDisAppear = ( CheckBox ) findViewById ( R . id . id_change_disappear ) ;            mAppear . setOnCheckedChangeListener ( this ) ;          mChangeAppear . setOnCheckedChangeListener ( this ) ;          mDisAppear . setOnCheckedChangeListener ( this ) ;          mChangeDisAppear . setOnCheckedChangeListener ( this ) ;            // 创建一个GridLayout          mGridLayout = new GridLayout ( this ) ;          // 设置每列5个button          mGridLayout . setColumnCount ( 5 ) ;          // 加入到布局中          viewGroup . addView ( mGridLayout ) ;          //默认动画所有开启          mTransition = new LayoutTransition ( ) ;          mGridLayout . setLayoutTransition ( mTransition ) ;        }        /**      * 加入button      *      * @param view      */      public void addBtn ( View view )      {          final Button button = new Button ( this ) ;          button . setText ( ( ++ mVal ) + "" ) ;          mGridLayout . addView ( button , Math . min ( 1 , mGridLayout . getChildCount ( ) ) ) ;          button . setOnClickListener ( new OnClickListener ( )          {                @ Override              public void onClick ( View v )              {                  mGridLayout . removeView ( button ) ;              }          } ) ;      }        @ Override      public void onCheckedChanged ( CompoundButton buttonView , boolean isChecked )      {          mTransition = new LayoutTransition ( ) ;          mTransition . setAnimator (                  LayoutTransition . APPEARING ,                  ( mAppear . isChecked ( ) ? mTransition                          . getAnimator ( LayoutTransition . APPEARING ) : null ) ) ;          mTransition                  . setAnimator (                          LayoutTransition . CHANGE_APPEARING ,                          ( mChangeAppear . isChecked ( ) ? mTransition                                  . getAnimator ( LayoutTransition . CHANGE_APPEARING )                                  : null ) ) ;          mTransition . setAnimator (                  LayoutTransition . DISAPPEARING ,                  ( mDisAppear . isChecked ( ) ? mTransition                          . getAnimator ( LayoutTransition . DISAPPEARING ) : null ) ) ;          mTransition . setAnimator (                  LayoutTransition . CHANGE_DISAPPEARING ,                  ( mChangeDisAppear . isChecked ( ) ? mTransition                          . getAnimator ( LayoutTransition . CHANGE_DISAPPEARING )                          : null ) ) ;          mGridLayout . setLayoutTransition ( mTransition ) ;      } }

效果图：

动画有点长，耐心点看，一定要注意，是对当前View还是其它Views设置的动画。

当然了动画支持自己定义，还支持设置时间，比方我们改动下，加入的动画为：

1 2 3

mTransition . setAnimator ( LayoutTransition . APPEARING , ( mAppear                  . isChecked ( ) ? ObjectAnimator.ofFloat(this, "scaleX", 0, 1)                  : null ) ) ;

则效果为：

原本的淡入，变成了宽度从中间放大的效果~~是不是还不错~~

3、View的anim方法

在SDK11的时候。给View加入了animate方法，更加方便的实现动画效果。

布局文件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

< RelativeLayout 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"      >        < ImageView          android : id = "@+id/id_ball"          android : layout_width = "wrap_content"          android : layout_height = "wrap_content"          android : src = "@drawable/bol_blue" / >        < LinearLayout          android : layout_width = "fill_parent"          android : layout_height = "wrap_content"          android : layout_alignParentBottom = "true"          android : orientation = "horizontal" >            < Button              android : layout_width = "wrap_content"              android : layout_height = "wrap_content"              android : onClick = "viewAnim"              android : text = "View Anim" / >            < Button              android : layout_width = "wrap_content"              android : layout_height = "wrap_content"              android : onClick = "propertyValuesHolder"              android : text = "PropertyValuesHolder " / >                 < / LinearLayout >   < / RelativeLayout >

代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

package com . example . zhy_property_animation ;   import android . animation . ObjectAnimator ; import android . animation . PropertyValuesHolder ; import android . app . Activity ; import android . os . Bundle ; import android . util . DisplayMetrics ; import android . util . Log ; import android . view . View ; import android . widget . ImageView ;   public class ViewAnimateActivity extends Activity {      protected static final String TAG = "ViewAnimateActivity" ;        private ImageView mBlueBall ;      private float mScreenHeight ;        @ Override      protected void onCreate ( Bundle savedInstanceState )      {          super . onCreate ( savedInstanceState ) ;          setContentView ( R . layout . view_animator ) ;            DisplayMetrics outMetrics = new DisplayMetrics ( ) ;          getWindowManager ( ) . getDefaultDisplay ( ) . getMetrics ( outMetrics ) ;          mScreenHeight = outMetrics . heightPixels ;          mBlueBall = ( ImageView ) findViewById ( R . id . id_ball ) ;        }        public void viewAnim ( View view )      {          // need API12          mBlueBall . animate ( ) //                  . alpha ( 0 ) //                  . y ( mScreenHeight / 2 ) . setDuration ( 1000 )                  // need API 12                  . withStartAction ( new Runnable ( )                  {                      @ Override                      public void run ( )                      {                          Log . e ( TAG , "START" ) ;                      }                      // need API 16                  } ) . withEndAction ( new Runnable ( )                  {                        @ Override                      public void run ( )                      {                          Log . e ( TAG , "END" ) ;                          runOnUiThread ( new Runnable ( )                          {                              @ Override                              public void run ( )                              {                                  mBlueBall . setY ( 0 ) ;                                  mBlueBall . setAlpha ( 1.0f ) ;                              }                          } ) ;                      }                  } ) . start ( ) ;      }                                                                                                                                                    }

简单的使用mBlueBall.animate().alpha(0).y(mScreenHeight / 2).setDuration(1000).start()就能实现动画~~只是须要SDK11，此后在SDK12，SDK16又分别加入了withStartAction和withEndAction用于在动画前。和动画后运行一些操作。当然也能够.setListener(listener)等操作。

使用ObjectAnimator实现上面的变化，我们能够使用：PropertyValueHolder

1 2 3 4 5

PropertyValuesHolder pvhX = PropertyValuesHolder . ofFloat ( "alpha" , 1f ,                  0f , 1f ) ;          PropertyValuesHolder pvhY = PropertyValuesHolder . ofFloat ( "y" , 0 ,                  mScreenHeight / 2 , 0 ) ;          ObjectAnimator . ofPropertyValuesHolder ( mBlueBall , pvhX , pvhY ) . setDuration ( 1000 ) . start ( ) ;

效果与上面一样。

执行结果：

好了，关于属性动画基本全部的使用方法到此结束~~~~欢迎大家一起学习，一起进步。

源代码下载：zhy_property_animation

版权声明：本文博客原创文章，博客，未经同意，不得转载。