Android中Property Animation属性动画编写的实例教程

1、概述
Android提供了几种动画类型:View Animation 、Drawable Animation 、Property Animation 。View Animation相当简单,不过只能支持简单的缩放、平移、旋转、透明度基本的动画,且有一定的局限性。比如:你希望View有一个颜色的切换动画;你希望可以使用3D旋转动画;你希望当动画停止时,View的位置就是当前的位置;这些View Animation都无法做到。这就是Property Animation产生的原因,本篇则来详细介绍Property Animation的用法。
property 动画系统是相当健壮的框架,它几乎可以动画显示任何对象。 你可以定义一个动画来定时改变任何对象的属性值,不论该对象是否在屏幕上显示。 property 动画将以一定的时间间隔修改属性值(对象中的字段值)。 要实现动画显示,你须指定对象的相应属性(比如对象的屏幕位置),以及动画时长、动画时间间隔。
property 动画系统能让你设定以下动画要素:
(1)持续时间:指定动画的持续显示时间。默认的时长是300毫秒。
(2)图像插值方式:指定属性值的变化方式,表示为关于动画已显示时间的函数。
(3)重复次数和方式:指定动画是否循环播放,以及重复的次数。还可以指定动画是否反向播放。可以设为先正向播放再反向回放,如此往复直至达到设定的重复次数。
(4)动画集合:你可以把动画分为多个逻辑组,以便实现同时播放、顺序播放或间隔一段时间再播放。
(5)帧刷新间隔:指定动画帧的刷新频率。默认是每 10 ms刷新一次,但应用程序实际可执行的刷新频率取决于系统整体的繁忙程度,以及系统对定时器的支持程度。

2、相关API
Property Animation故名思议就是通过动画的方式改变对象的属性了,我们首先需要了解几个属性:
(1)Duration动画的持续时间,默认300ms。
(2)Time interpolation:时间差值,乍一看不知道是什么,但是我说LinearInterpolator、AccelerateDecelerateInterpolator,大家一定知道是干嘛的了,定义动画的变化率。
(3)Repeat count and behavior:重复次数、以及重复模式;可以定义重复多少次;重复时从头开始,还是反向。
(4)Animator sets: 动画集合,你可以定义一组动画,一起执行或者顺序执行。
(5)Frame refresh delay:帧刷新延迟,对于你的动画,多久刷新一次帧;默认为10ms,但最终依赖系统的当前状态;基本不用管。
相关的类:
(1)ObjectAnimator  动画的执行类,后面详细介绍
(2)ValueAnimator 动画的执行类,后面详细介绍
(3)AnimatorSet 用于控制一组动画的执行:线性,一起,每个动画的先后执行等。
(4)AnimatorInflater 用户加载属性动画的xml文件
(5)TypeEvaluator  类型估值,主要用于设置动画操作属性的值。
(6)TimeInterpolator 时间插值,上面已经介绍。
总的来说,属性动画就是,动画的执行类来设置动画操作的对象的属性、持续时间,开始和结束的属性值,时间差值等,然后系统会根据设置的参数动态的变化对象的属性。

3、ObjectAnimator实现动画
之所以选择ObjectAnimator为第一个~~是因为,这个实现最简单~~一行代码,秒秒钟实现动画,下面看个例子:
布局文件:

<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"
  android:id="@+id/id_container" > 

  <ImageView
    android:id="@+id/id_ball"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/mv"
    android:scaleType="centerCrop"
    android:onClick="rotateyAnimRun"
    /> 

</RelativeLayout>

很简单,就一张妹子图片~
Activity代码:

package com.example.zhy_property_animation; 

import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View; 

public class ObjectAnimActivity extends Activity
{
  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.xml_for_anim);
  } 

  public void rotateyAnimRun(View view)
  {
     ObjectAnimator//
     .ofFloat(view, "rotationX", 0.0F, 360.0F)//
     .setDuration(500)//
     .start();
  } 

}

效果:

是不是一行代码就能实现简单的动画~~
对于ObjectAnimator:
(1)提供了ofInt、ofFloat、ofObject,这几个方法都是设置动画作用的元素、作用的属性、动画开始、结束、以及中间的任意个属性值。
当对于属性值,只设置一个的时候,会认为当然对象该属性的值为开始(getPropName反射获取),然后设置的值为终点。如果设置两个,则一个为开始、一个为结束~~~ 
动画更新的过程中,会不断调用setPropName更新元素的属性,所有使用ObjectAnimator更新某个属性,必须得有getter(设置一个属性值的时候)和setter方法~
(2)如果你操作对象的该属性方法里面,比如上例的setRotationX如果内部没有调用view的重绘,则你需要自己按照下面方式手动调用。

anim.addUpdateListener(new AnimatorUpdateListener()
    {
      @Override
      public void onAnimationUpdate(ValueAnimator animation)
      {
//       view.postInvalidate();
//       view.invalidate();
      }
    });

(3)看了上面的例子,因为设置的操作的属性只有一个,那么如果我希望一个动画能够让View既可以缩小、又能够淡出(3个属性scaleX,scaleY,alpha),只使用ObjectAnimator咋弄?
想法是不是很不错,可能会说使用AnimatorSet啊,这一看就是一堆动画塞一起执行,但是我偏偏要用一个ObjectAnimator实例实现呢~下面看代码:

public void rotateyAnimRun(final View view)
{
  ObjectAnimator anim = ObjectAnimator//
      .ofFloat(view, "zhy", 1.0F, 0.0F)//
      .setDuration(500);//
  anim.start();
  anim.addUpdateListener(new AnimatorUpdateListener()
  {
    @Override
    public void onAnimationUpdate(ValueAnimator animation)
    {
      float cVal = (Float) animation.getAnimatedValue();
      view.setAlpha(cVal);
      view.setScaleX(cVal);
      view.setScaleY(cVal);
    }
  });
}

把设置属性的那个字符串,随便写一个该对象没有的属性,就是不管~~咱们只需要它按照时间插值和持续时间计算的那个值,我们自己手动调用~
效果:

这个例子就是想说明一下,有时候换个思路不要被API所约束,利用部分API提供的功能也能实现好玩的效果~~~
比如:你想实现抛物线的效果,水平方向100px/s,垂直方向加速度200px/s*s ,咋实现呢~~可以自己用ObjectAnimator试试~
(4)其实还有更简单的方式,实现一个动画更改多个效果:使用propertyValuesHolder

public void propertyValuesHolder(View view)
  {
    PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("alpha", 1f,
        0f, 1f);
    PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("scaleX", 1f,
        0, 1f);
    PropertyValuesHolder pvhZ = PropertyValuesHolder.ofFloat("scaleY", 1f,
        0, 1f);
    ObjectAnimator.ofPropertyValuesHolder(view, pvhX, pvhY,pvhZ).setDuration(1000).start();
  }


 4、ValueAnimator实现动画
和ObjectAnimator用法很类似,简单看一下用view垂直移动的动画代码:

public void verticalRun(View view)
  {
    ValueAnimator animator = ValueAnimator.ofFloat(0, mScreenHeight
        - mBlueBall.getHeight());
    animator.setTarget(mBlueBall);
    animator.setDuration(1000).start();
  }

给你的感觉是不是,坑爹啊,这和ValueAnimator有毛线区别~但是仔细看,你看会发现,没有设置操作的属性~~也就是说,上述代码是没有任何效果的,没有指定属性~
这就是和ValueAnimator的区别之处:ValueAnimator并没有在属性上做操作,你可能会问这样有啥好处?我岂不是还得手动设置?
好处:不需要操作的对象的属性一定要有getter和setter方法,你可以自己根据当前动画的计算值,来操作任何属性,记得上例的那个【我希望一个动画能够让View既可以缩小、又能够淡出(3个属性scaleX,scaleY,alpha)】吗?其实就是这么个用法~
实例:
布局文件:

<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"
  android:id="@+id/id_container" 

  > 

  <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="verticalRun"
      android:text="垂直" /> 

    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="paowuxian"
      android:text="抛物线" /> 

  </LinearLayout> 

</RelativeLayout>

左上角一个小球,底部两个按钮~我们先看一个自由落体的代码:

/**
   * 自由落体
   * @param view
   */
  public void verticalRun( View view)
  {
    ValueAnimator animator = ValueAnimator.ofFloat(0, mScreenHeight
        - mBlueBall.getHeight());
    animator.setTarget(mBlueBall);
    animator.setDuration(1000).start();
//   animator.setInterpolator(value)
    animator.addUpdateListener(new AnimatorUpdateListener()
    {
      @Override
      public void onAnimationUpdate(ValueAnimator animation)
      {
        mBlueBall.setTranslationY((Float) animation.getAnimatedValue());
      }
    });
  }

与ObjectAnimator不同的就是我们自己设置元素属性的更新~虽然多了几行代码,但是貌似提高灵活性~
下面再来一个例子,如果我希望小球抛物线运动【实现抛物线的效果,水平方向100px/s,垂直方向加速度200px/s*s 】,分析一下,貌似只和时间有关系,但是根据时间的变化,横向和纵向的移动速率是不同的,我们该咋实现呢?此时就要重写TypeValue的时候了,因为我们在时间变化的同时,需要返回给对象两个值,x当前位置,y当前位置:
代码:

/**
   * 抛物线
   * @param view
   */
  public void paowuxian(View view)
  { 

    ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setDuration(3000);
    valueAnimator.setObjectValues(new PointF(0, 0));
    valueAnimator.setInterpolator(new LinearInterpolator());
    valueAnimator.setEvaluator(new TypeEvaluator<PointF>()
    {
      // fraction = t / duration
      @Override
      public PointF evaluate(float fraction, PointF startValue,
          PointF endValue)
      {
        Log.e(TAG, fraction * 3 + "");
        // x方向200px/s ,则y方向0.5 * 10 * t
        PointF point = new PointF();
        point.x = 200 * fraction * 3;
        point.y = 0.5f * 200 * (fraction * 3) * (fraction * 3);
        return point;
      }
    }); 

    valueAnimator.start();
    valueAnimator.addUpdateListener(new AnimatorUpdateListener()
    {
      @Override
      public void onAnimationUpdate(ValueAnimator animation)
      {
        PointF point = (PointF) animation.getAnimatedValue();
        mBlueBall.setX(point.x);
        mBlueBall.setY(point.y); 

      }
    });
  }

可以看到,因为ofInt,ofFloat等无法使用,我们自定义了一个TypeValue,每次根据当前时间返回一个PointF对象,(PointF和Point的区别就是x,y的单位一个是float,一个是int;RectF,Rect也是)PointF中包含了x,y的当前位置~然后我们在监听器中获取,动态设置属性:
效果图:

有木有两个铁球同时落地的感觉~~对,我应该搞两个球~~ps:物理公式要是错了,就当没看见哈
自定义TypeEvaluator传入的泛型可以根据自己的需求,自己设计个Bean。
好了,我们已经分别讲解了ValueAnimator和ObjectAnimator实现动画;二者区别;如何利用部分API,自己更新属性实现效果;自定义TypeEvaluator实现我们的需求;但是我们并没有讲如何设计插值,其实我觉得把,这个插值默认的那一串实现类够用了~~很少,会自己去设计个超级变态的~嗯~所以:略。
5、监听动画的事件
对于动画,一般都是一些辅助效果,比如我要删除个元素,我可能希望是个淡出的效果,但是最终还是要删掉,并不是你透明度没有了,还占着位置,所以我们需要知道动画如何结束。
所以我们可以添加一个动画的监听:

public void fadeOut(View view)
  {
    ObjectAnimator anim = ObjectAnimator.ofFloat(mBlueBall, "alpha", 0.5f); 

    anim.addListener(new AnimatorListener()
    { 

      @Override
      public void onAnimationStart(Animator animation)
      {
        Log.e(TAG, "onAnimationStart");
      } 

      @Override
      public void onAnimationRepeat(Animator animation)
      {
        // TODO Auto-generated method stub
        Log.e(TAG, "onAnimationRepeat");
      } 

      @Override
      public void onAnimationEnd(Animator animation)
      {
        Log.e(TAG, "onAnimationEnd");
        ViewGroup parent = (ViewGroup) mBlueBall.getParent();
        if (parent != null)
          parent.removeView(mBlueBall);
      } 

      @Override
      public void onAnimationCancel(Animator animation)
      {
        // TODO Auto-generated method stub
        Log.e(TAG, "onAnimationCancel");
      }
    });
    anim.start();
  }

这样就可以监听动画的开始、结束、被取消、重复等事件~但是有时候会觉得,我只要知道结束就行了,这么长的代码我不能接收,那你可以使用AnimatorListenerAdapter

anim.addListener(new AnimatorListenerAdapter()
{
  @Override
  public void onAnimationEnd(Animator animation)
  {
    Log.e(TAG, "onAnimationEnd");
    ViewGroup parent = (ViewGroup) mBlueBall.getParent();
    if (parent != null)
      parent.removeView(mBlueBall);
  }
});

AnimatorListenerAdapter继承了AnimatorListener接口,然后空实现了所有的方法~
效果图:

animator还有cancel()和end()方法:cancel动画立即停止,停在当前的位置;end动画直接到最终状态。
6、AnimatorSet的使用
实例:
布局文件:

<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"
  android:id="@+id/id_container" 

  > 

  <ImageView
    android:id="@+id/id_ball"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    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="togetherRun"
      android:text="简单的多动画Together" /> 

    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="playWithAfter"
      android:text="多动画按次序执行" /> 

  </LinearLayout> 

</RelativeLayout>

继续玩球~
代码:

package com.example.zhy_property_animation; 

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView; 

public class AnimatorSetActivity extends Activity
{
  private ImageView mBlueBall; 

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

    mBlueBall = (ImageView) findViewById(R.id.id_ball); 

  } 

  public void togetherRun(View view)
  {
    ObjectAnimator anim1 = ObjectAnimator.ofFloat(mBlueBall, "scaleX",
        1.0f, 2f);
    ObjectAnimator anim2 = ObjectAnimator.ofFloat(mBlueBall, "scaleY",
        1.0f, 2f);
    AnimatorSet animSet = new AnimatorSet();
    animSet.setDuration(2000);
    animSet.setInterpolator(new LinearInterpolator());
    //两个动画同时执行
    animSet.playTogether(anim1, anim2);
    animSet.start();
  } 

  public void playWithAfter(View view)
  {
    float cx = mBlueBall.getX(); 

    ObjectAnimator anim1 = ObjectAnimator.ofFloat(mBlueBall, "scaleX",
        1.0f, 2f);
    ObjectAnimator anim2 = ObjectAnimator.ofFloat(mBlueBall, "scaleY",
        1.0f, 2f);
    ObjectAnimator anim3 = ObjectAnimator.ofFloat(mBlueBall,
        "x", cx , 0f);
    ObjectAnimator anim4 = ObjectAnimator.ofFloat(mBlueBall,
        "x", cx); 

    /**
     * anim1,anim2,anim3同时执行
     * anim4接着执行
     */
    AnimatorSet animSet = new AnimatorSet();
    animSet.play(anim1).with(anim2);
    animSet.play(anim2).with(anim3);
    animSet.play(anim4).after(anim3);
    animSet.setDuration(1000);
    animSet.start();
  }
}

这里写了两个效果:
第一:使用playTogether两个动画同时执行,当然还有playSequentially依次执行~~
第二:如果我们有一堆动画,如何使用代码控制顺序,比如1,2同时;3在2后面;4在1之前等~就是效果2了
有一点注意:animSet.play().with();也是支持链式编程的,但是不要想着狂点,比如 animSet.play(anim1).with(anim2).before(anim3).before(anim5); 这样是不行的,系统不会根据你写的这一长串来决定先后的顺序,所以麻烦你按照上面例子的写法,多写几行:
效果图:

(0)

相关推荐

  • Android中编写属性动画PropertyAnimation的进阶实例

    0.基础回顾 PropertyAnimation,属性动画,顾名思义就是利用对象的属性变化形成动画的效果.属性动画的类可以用Animator这个抽象类来表示,通常使用它的子类:AnimatorSet和ValueAnimator,同时ValueAnimator有两个子类分别是ObjectAniamtor和TimeAnimator. 定义属性动画的XML资源的时候通常可以是如下三个元素之一作为根元素: <set>元素:该资源元素代表的是AniamtorSet类,这个类可以包含<set>

  • Android中播放Gif动画取巧的办法

    由于做的项目,要有个动画的等待效果,第一时间想到的就是Gif(懒,省事),但是试了好多据说能播放Gif的控件,也写过,但是放到魅族手机上就是不能播放,所有就想了个招,既然Gif能在浏览器上播放,那android 的 WebView 也能播放,写了个Demo,果然能播放. 1.将gif的文件放到android的资源文件夹里面 2.写个html,将android的gif源放到WebView里面去加载 <RelativeLayout xmlns:android="http://schemas.a

  • Android编程之简单逐帧动画Frame的实现方法

    本文实例讲述了Android编程之简单逐帧动画Frame的实现方法.分享给大家供大家参考,具体如下: 1.逐帧动画 即是通过播放预先排序好的图片来实现动态的画面,感觉像是放电影. 2.实现步骤: ① 在工程里面导入要播放的图片.此简单例子中为start_icon1,2,3. ② 在工程res文件目录下新建一个anim文件夹,在里面新建一个start_animation.xml格式文件,此文件用来定义动画播放图片的顺序及每一张图片显示停留时间. 代码如下: <?xml version="1.

  • 基于JS实现Android,iOS一个手势动画效果

    废话不多说了,先给大家展示下效果图: 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果,还支持声音效果. 下面是主要的代码 //index.ui.js var do_Animator1 = mm("do_Animator"); do_Animator1.append(500, { y: -1334, curve:

  • Android编程中Tween动画和Frame动画实例分析

    本文实例讲述了Android编程中Tween动画和Frame动画实现方法.分享给大家供大家参考,具体如下: Animation主要有两种动画模式:Tween动画和Frame动画 Tween动画由四种类型组成 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 res目录下新建anim创建Tween.xml <?xml version="1.0" encoding="utf-8

  • Android模仿知乎的回答详情页的动画效果

    废话不多说,咱们第一篇文章就是模仿"知乎"的回答详情页的动画效果,先上个原版的效果图,咱们就是要做出这个效果 在实现之前,我们先根据上面的动画效果,研究下需求,因为gif帧数有限,所以不是很连贯,推荐你直接下载一个知乎,找到这个界面自己玩玩 ☞当文章往上移动到一定位置之后,最上面的标题栏Bar和问题布局Title是会隐藏的,回答者Author布局不会隐藏 ☞当文章往下移动移动到一定位置之后,原先隐藏的标题栏Bar和问题布局Title会下降显示 ☞当文章往上移动的时候,下部隐藏的Tool

  • 实例解析如何在Android应用中实现弹幕动画效果

    在B站或者其他视频网站看视频时,常常会打开弹幕效果,边看节目边看大家的吐槽.弹幕看起来很有意思,今天我们就来实现一个简单的弹幕效果. 从直观上,弹幕效果就是在一个ViewGroup上增加一些View,然后让这些View移动起来.所以,整体的实现思路大概是这样的: 1.定义一个RelativeLayout,在里面动态添加TextView. 2.这些TextView的字体大小.颜色.移动速度.初始位置都是随机的. 3.将TextView添加到RelativeLayout的右边缘,每隔一段时间添加一个

  • Android开发之Animations动画用法实例详解

    本文实例讲述了Android开发之Animations动画用法.分享给大家供大家参考,具体如下: 一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 Java Code代码中 AlphaAnimation 渐变透明度动画效果 ScaleAnimation 渐变尺寸

  • 第三方开源Android TickPlusDrawable状态可以通过动画切换的按钮

    先给大家展示下效果图,对第三方开源 android tickplusdrawable相关知识感兴趣的朋友一起学习吧. Android tickplusdrawable(TickPlusDrawable)是一个状态可以通过动画切换的按钮,Android tickplusdrawable(TickPlusDrawable)在github上的项目主页是:https://github.com/flavienlaurent/tickplusdrawable 测试代码: 布局: <FrameLayout x

  • Android自定义加载控件实现数据加载动画

    本文实例为大家分享了Android自定义加载控件,第一次小人跑动的加载效果眼前一亮,相比传统的PrograssBar高大上不止一点,于是走起,自定义了控件LoadingView去实现动态效果,可直接在xml中使用,具体实现如下 package com.*****.*****.widget; import android.content.Context; import android.graphics.drawable.AnimationDrawable; import android.util.

  • Android App中使用SurfaceView制作多线程动画的实例讲解

    1. SurfaceView的定义 通常情况程序的View和用户响应都是在同一个线程中处理的,这也是为什么处理长时间事件(例如访问网络)需要放到另外的线程中去(防止阻塞当前UI线程的操作和绘制).但是在其他线程中却不能修改UI元素,例如用后台线程更新自定义View(调用View的在自定义View中的onDraw函数)是不允许的. 如果需要在另外的线程绘制界面.需要迅速的更新界面或则渲染UI界面需要较长的时间,这种情况就要使用SurfaceView了.SurfaceView中包含一个Surface

  • 详解Android Material Design自定义动画的编写

    新的动画Api,让你在UI控件里能创建触摸反馈,改变View的状态,切换activity的一系列自定义动画 具体有: 响应View的touch事件的触摸反馈动画 隐藏和显示View的循环展示动画 两个Activity间的切换动画 更自然的曲线运动的动画 使用View的状态更改动画,能改变一个或多个View的属性 在View的状态更改时显示状态列表动画 这些new animations Api,已内置在标准Widget中,如Button.在自定义view时也可使用这些api 动画在Material

随机推荐