Android 属性动画（二）

2022-11-28 08:08:45

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

1、如何使用xml文件来创建属性动画

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

首先在res下建立animator文件夹，然后建立res/animator/scalex.xml

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

代码：

  1. public void scaleX(View view)
  2. {
  3. // 加载动画
  4. Animator anim = AnimatorInflater.loadAnimator(this, R.animator.scalex);
  5. anim.setTarget(mMv);
  6. anim.start();
  7. }

使用AnimatorInflater加载动画的资源文件，然后设置目标，就ok~~是不是很简单，这只是单纯横向的放大一倍~

如果我希望纵向与横向同时缩放呢？则可以怎么定义属性文件：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:ordering="together" >
  4. <objectAnimator
  5. android:duration="1000"
  6. android:propertyName="scaleX"
  7. android:valueFrom="1"
  8. android:valueTo="0.5" >
  9. </objectAnimator>
  10. <objectAnimator
  11. android:duration="1000"
  12. android:propertyName="scaleY"
  13. android:valueFrom="1"
  14. android:valueTo="0.5" >
  15. </objectAnimator>
  16. </set>

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

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

代码：

  1. // 加载动画
  2. Animator anim = AnimatorInflater.loadAnimator(this, R.animator.scale);
  3. mMv.setPivotX(0);
  4. mMv.setPivotY(0);
  5. //显示的调用invalidate
  6. mMv.invalidate();
  7. anim.setTarget(mMv);
  8. anim.start();

很简单，直接给View设置pivotX和pivotY，然后调用一下invalidate，就ok了。

下面看效果图：

Android 属性动画（二）

好了，通过写xml声明动画，使用set嵌套set，结合orderring属性，也基本可以实现任何动画~~上面也演示了pivot的设置。

2、布局动画（Layout Animations）

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

基本代码为：

  1. LayoutTransition transition = new LayoutTransition();
  2. transition.setAnimator(LayoutTransition.CHANGE_APPEARING,
  3. transition.getAnimator(LayoutTransition.CHANGE_APPEARING));
  4. transition.setAnimator(LayoutTransition.APPEARING,
  5. null);
  6. transition.setAnimator(LayoutTransition.DISAPPEARING,
  7. null);
  8. transition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING,
  9. null);
  10. 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. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@+id/id_container"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="vertical" >
  7. <Button
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:onClick="addBtn"
  11. android:text="addBtns" />
  12. <CheckBox
  13. android:id="@+id/id_appear"
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:checked="true"
  17. android:text="APPEARING" />
  18. <CheckBox
  19. android:id="@+id/id_change_appear"
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:checked="true"
  23. android:text="CHANGE_APPEARING" />
  24. <CheckBox
  25. android:id="@+id/id_disappear"
  26. android:layout_width="wrap_content"
  27. android:layout_height="wrap_content"
  28. android:checked="true"
  29. android:text="DISAPPEARING" />
  30. <CheckBox
  31. android:id="@+id/id_change_disappear"
  32. android:layout_width="wrap_content"
  33. android:layout_height="wrap_content"
  34. android:checked="true"
  35. android:text="CHANGE_DISAPPEARING " />
  36. </LinearLayout>

代码：

  1. package com.example.zhy_property_animation;
  2. import android.animation.LayoutTransition;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.view.View.OnClickListener;
  7. import android.view.ViewGroup;
  8. import android.widget.Button;
  9. import android.widget.CheckBox;
  10. import android.widget.CompoundButton;
  11. import android.widget.CompoundButton.OnCheckedChangeListener;
  12. import android.widget.GridLayout;
  13. public class LayoutAnimaActivity extends Activity implements
  14. OnCheckedChangeListener
  15. {
  16. private ViewGroup viewGroup;
  17. private GridLayout mGridLayout;
  18. private int mVal;
  19. private LayoutTransition mTransition;
  20. private CheckBox mAppear, mChangeAppear, mDisAppear, mChangeDisAppear;
  21. @Override
  22. public void onCreate(Bundle savedInstanceState)
  23. {
  24. super.onCreate(savedInstanceState);
  25. setContentView(R.layout.layout_animator);
  26. viewGroup = (ViewGroup) findViewById(R.id.id_container);
  27. mAppear = (CheckBox) findViewById(R.id.id_appear);
  28. mChangeAppear = (CheckBox) findViewById(R.id.id_change_appear);
  29. mDisAppear = (CheckBox) findViewById(R.id.id_disappear);
  30. mChangeDisAppear = (CheckBox) findViewById(R.id.id_change_disappear);
  31. mAppear.setOnCheckedChangeListener(this);
  32. mChangeAppear.setOnCheckedChangeListener(this);
  33. mDisAppear.setOnCheckedChangeListener(this);
  34. mChangeDisAppear.setOnCheckedChangeListener(this);
  35. // 创建一个GridLayout
  36. mGridLayout = new GridLayout(this);
  37. // 设置每列5个按钮
  38. mGridLayout.setColumnCount(5);
  39. // 添加到布局中
  40. viewGroup.addView(mGridLayout);
  41. //默认动画全部开启
  42. mTransition = new LayoutTransition();
  43. mGridLayout.setLayoutTransition(mTransition);
  44. }
  45. /**
  46. * 添加按钮
  47. *
  48. * @param view
  49. */
  50. public void addBtn(View view)
  51. {
  52. final Button button = new Button(this);
  53. button.setText((++mVal) + "");
  54. mGridLayout.addView(button, Math.min(1, mGridLayout.getChildCount()));
  55. button.setOnClickListener(new OnClickListener()
  56. {
  57. @Override
  58. public void onClick(View v)
  59. {
  60. mGridLayout.removeView(button);
  61. }
  62. });
  63. }
  64. @Override
  65. public void onCheckedChanged(CompoundButton buttonView, boolean isChecked)
  66. {
  67. mTransition = new LayoutTransition();
  68. mTransition.setAnimator(
  69. LayoutTransition.APPEARING,
  70. (mAppear.isChecked() ? mTransition
  71. .getAnimator(LayoutTransition.APPEARING) : null));
  72. mTransition
  73. .setAnimator(
  74. LayoutTransition.CHANGE_APPEARING,
  75. (mChangeAppear.isChecked() ? mTransition
  76. .getAnimator(LayoutTransition.CHANGE_APPEARING)
  77. : null));
  78. mTransition.setAnimator(
  79. LayoutTransition.DISAPPEARING,
  80. (mDisAppear.isChecked() ? mTransition
  81. .getAnimator(LayoutTransition.DISAPPEARING) : null));
  82. mTransition.setAnimator(
  83. LayoutTransition.CHANGE_DISAPPEARING,
  84. (mChangeDisAppear.isChecked() ? mTransition
  85. .getAnimator(LayoutTransition.CHANGE_DISAPPEARING)
  86. : null));
  87. mGridLayout.setLayoutTransition(mTransition);
  88. }
  89. }

效果图：

Android 属性动画（二）

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

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

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

则效果为：

Android 属性动画（二）

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

3、View的anim方法

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

布局文件：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. >
  6. <ImageView
  7. android:id="@+id/id_ball"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:src="@drawable/bol_blue" />
  11. <LinearLayout
  12. android:layout_width="fill_parent"
  13. android:layout_height="wrap_content"
  14. android:layout_alignParentBottom="true"
  15. android:orientation="horizontal" >
  16. <Button
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:onClick="viewAnim"
  20. android:text="View Anim" />
  21. <Button
  22. android:layout_width="wrap_content"
  23. android:layout_height="wrap_content"
  24. android:onClick="propertyValuesHolder"
  25. android:text="PropertyValuesHolder " />
  26. </LinearLayout>
  27. </RelativeLayout>

代码：

  1. package com.example.zhy_property_animation;
  2. import android.animation.ObjectAnimator;
  3. import android.animation.PropertyValuesHolder;
  4. import android.app.Activity;
  5. import android.os.Bundle;
  6. import android.util.DisplayMetrics;
  7. import android.util.Log;
  8. import android.view.View;
  9. import android.widget.ImageView;
  10. public class ViewAnimateActivity extends Activity
  11. {
  12. protected static final String TAG = "ViewAnimateActivity";
  13. private ImageView mBlueBall;
  14. private float mScreenHeight;
  15. @Override
  16. protected void onCreate(Bundle savedInstanceState)
  17. {
  18. super.onCreate(savedInstanceState);
  19. setContentView(R.layout.view_animator);
  20. DisplayMetrics outMetrics = new DisplayMetrics();
  21. getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
  22. mScreenHeight = outMetrics.heightPixels;
  23. mBlueBall = (ImageView) findViewById(R.id.id_ball);
  24. }
  25. public void viewAnim(View view)
  26. {
  27. // need API12
  28. mBlueBall.animate()//
  29. .alpha(0)//
  30. .y(mScreenHeight / 2).setDuration(1000)
  31. // need API 12
  32. .withStartAction(new Runnable()
  33. {
  34. @Override
  35. public void run()
  36. {
  37. Log.e(TAG, "START");
  38. }
  39. // need API 16
  40. }).withEndAction(new Runnable()
  41. {
  42. @Override
  43. public void run()
  44. {
  45. Log.e(TAG, "END");
  46. runOnUiThread(new Runnable()
  47. {
  48. @Override
  49. public void run()
  50. {
  51. mBlueBall.setY(0);
  52. mBlueBall.setAlpha(1.0f);
  53. }
  54. });
  55. }
  56. }).start();
  57. }                                                                                                                                                  }

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

使用ObjectAnimator实现上面的变化，我们可以使用：PropertyValueHolder

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

效果与上面一样。

运行结果：

Android 属性动画（二）

好了，关于属性动画基本所有的用法到此结束~~~~

源码下载地址： http://download.csdn.net/detail/hongheqq/8524443

上一篇：java 判断两个时间相差的天数


下一篇：Android流行界面结构——Fragment通过ViewPager（带指示器）嵌套Fragment结构的创建方法详解