android动画（二）

上一篇android动画（一）我们介绍了补间动画与逐帧动画，今天我们介绍android的属性动画。
android属性动画大约会使用到如下类

  • ValueAnimator
  • ObjectAnimator
  • AnimatorSet
  • AnimatorInflater
  • TypeEvaluator
  • TimeInterpolate

ValueAnimator

是属性动画中的核心类，只需要传入初始值与结束值就可以了，ValueAnimator自己会通过某种机制实现动画的过渡。

1
2
3
ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);  
anim.setDuration(300);  
anim.start();

这样就实现了动画经过3s从0变化到1，当然我们可以通过监听器监听动画

1
2
3
4
5
6
7
8
9
10
ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);  
anim.setDuration(300);  
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  
    @Override  
    public void onAnimationUpdate(ValueAnimator animation) {  
        float currentValue = (float) animation.getAnimatedValue();  
        Log.d("TAG", "cuurent value is " + currentValue);  
    }  
});  
anim.start();

这里我们通过打印log的形式来查看动画的执行情况，实际使用中可能是具体的操作如移动、渐变、旋转、缩放等等。

ValueAnimator除了提供offFloat还提供了其他的方法

  • ValueAnimator ofFloat(float… values)：接收一系列的float类型的值,对应TypeEvaluator为FloatEvaluator
  • ValueAnimator ofInt(int… values)：ofInt方法与ofFloat方法很类似，只不过ofInt方法接收int类型的值，对应TypeEvaluator为IntEvaluator
  • ValueAnimator ofArgb(int… values) ：api21引入，该方法接收一些列代表了颜色的int值，对应TypeEvaluator为ArgbEvaluator
  • ValueAnimator ofObject(TypeEvaluator evaluator, Object… values)：除了上述那些，我们还可以通过ofObject实现任意的动画。

我们出了使用setDuration设置动画时间外，还可以动画的延迟时间setStartDelay，循环播放次数setRepeatCount和循环播放的模式setRepeatMode。

ObjectAnimator

相对于ValueAnimator也许我们更常用的是它，它可以直接对任意对象的任意属性进行动画操作。不过查看ObjectAnimator源码发现其实它俩是继承关系，ObjectAnimator是继承ValueAnimator来的。因此在用法上比较类似。

1
2
3
ObjectAnimator animator = ObjectAnimator.ofFloat(textView, "alpha", 1f, 0f, 1f);  
animator.setDuration(5000);  
animator.start();

上述代码便能实现textView在5s内的透明度从1——>0——>1。
比较我们我们发现参数发生了些许变化，需要接受一个对象和属性。

  • ObjectAnimator ofFloat(Object target, String propertyName, float… values)
  • ObjectAnimator ofInt(Object target, String propertyName, int… values)
  • ObjectAnimator ofArgb(Object target, String propertyName, int… values)
  • ObjectAnimator ofObject(Object target, String propertyName, TypeEvaluator evaluator, Object… values)

我们用一个例子对比一下ValueAnimator与ObjectAnimator的区别
ValueAnimator实现平移

1
2
3
4
5
6
7
8
9
10
ValueAnimator anim = ValueAnimator.ofFloat(0, 500);  
anim.setDuration(500);  
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  
    @Override  
    public void onAnimationUpdate(ValueAnimator animation) {  
	  float currentValue = (float) animation.getAnimatedValue();  
       textView.setTranslationX(currentValue)
    }  
});  
anim.start();

ObjectAnimator实现平移

1
2
3
ObjectAnimator animator = ObjectAnimator.ofFloat(textView, "translationX", 0,500);  
animator.setDuration(500);  
animator.start();

区别就在于ObjectAnimator多了object与propertyName两个参数，如果需要更新对象中属性，那么该对象必须具有set、get属性的方法。当只填入一个值时该值会作为终止值，那么需要调用get方法获取属性值作为初始值。通过查看View的源码发现补间动画的相应属性都有，因此ObjectAnimator可以用来实现。

  • translationX：x轴平移
  • translationY：y轴平移
  • alpha：透明度
  • scaleX：x轴缩放
  • scaleY：y轴缩放
  • rotation：旋转

当然我们也可自定义属性，不过要相应属性的set与get方法，这样便可以通过
ObjectAnimator实现对应的动画操作。

AnimatorSet

现实生活中单一动画的操作毕竟比较少，一般都是很多动画同时或顺序执行，来达到我们想要的效果，这时候就需要AnimatorSet类来实现组合动画。
主要有如下几个方法

  • AnimatorSet.Builder play(Animator anim)：执行动画
  • void playTogether(Animator… items)：同时执行动画
  • void playTogether(Collection items)：同时执行动画
  • void playSequentially(Animator… items)：顺序执行动画
  • void playSequentially(List items)：顺序执行动画

通过play()方法返回一个AnimatorSet.Builder的实例，该类包括以下方法

  • AnimatorSet.Builder with(Animator anim)：将现有动画和传入的动画同时执行
  • AnimatorSet.Builder before(Animator anim)：将现有动画插入到传入的动画之前执行
  • AnimatorSet.Builder after(Animator anim)：将现有动画插入到传入的动画之后执行
  • AnimatorSet.Builder after(long delay)：将现有动画延迟指定毫秒后执行

那么我们现在就实现一组动画，比如先旋转再放大，放大的同时淡入淡出。

1
2
3
4
5
6
7
8
ObjectAnimator rotale = ObjectAnimator.ofFloat(image, "rotation", 0, 360f);  
ObjectAnimator scaleX = ObjectAnimator.ofFloat(image, "scaleX", 1f, 3f, 1f); 
ObjectAnimator scaleY = ObjectAnimator.ofFloat(image, "scaleY", 1f, 3f, 1f); 
ObjectAnimator alpha = ObjectAnimator.ofFloat(textview, "alpha", 1f, 0f, 1f);  
AnimatorSet animSet = new AnimatorSet();  
animSet.play(scaleX).with(scaleY).with(alpha).after(rotale);  
animSet.setDuration(5000);
animSet.start();

对于动画的执行我们可以设置监听器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
anim.addListener(new AnimatorListener() {  
    @Override  
    public void onAnimationStart(Animator animation) {  
	//动画开始
    }  
  
    @Override  
    public void onAnimationRepeat(Animator animation) {  
	//动画循环
    }  
  
    @Override  
    public void onAnimationEnd(Animator animation) {  
	//动画完成
    }  
  
    @Override  
    public void onAnimationCancel(Animator animation) { 
	//动画取消
    }  
});

由于AnimatorListener是接口因此你可能觉得实现起来太繁琐，android为我们提供了一个抽象类AnimatorListenerAdapter，我们只需要重写我们想要的部分就可以了。

AnimatorInflater

属性动画除了通过代码实现以外，还可以像补间动画一样通过xml来实现一些常用的动画效果。
首先我们需要在res目录下新建animator文件夹，用于存放所有的属性动画。
常使用的标签主要有如下：

  • animator：对应代码中的ValueAnimator
  • objectAnimator：对应代码中的ObjectAnimator
  • set：对应代码中的AnimatorSet

例如我们要实现一个过渡动画

1
2
3
4
<animator xmlns:android="http://schemas.android.com/apk/res/android"  
    android:valueFrom="0"  
    android:valueTo="100"  
    android:valueType="floatType"/>

valueType用于指定TypeEvaluator，因此
floatType：对于ofFloat
intType：对应ofInt
colorType：对应ofArgb
如果我们要实现实现补间动画的效果则可以通过如下

1
2
3
4
5
<objectAnimator  xmlns:android="http://schemas.android.com/apk/res/android"
  android:valueFrom="0"
  android:valueTo="0"
  android:valueType="floatType"
  android:propertyName="alpha"/>

这样就实现了透明度的渐变
当然我们可以指定如下view的属性

  • translationX：x轴平移
  • translationY：y轴平移
  • alpha：透明度
  • scaleX：x轴缩放
  • scaleY：y轴缩放
  • rotation：旋转

当然我么可以通过set标签来实现组合动画，如先旋转再放大，放大的同时淡入淡出。

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
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <objectAnimator
        android:duration="1000"
        android:propertyName="rotation"
        android:valueFrom="0"
        android:valueTo="360"
        android:valueType="floatType" />
    <set android:ordering="together">
        <set android:ordering="together">
            <objectAnimator
                android:duration="2000"
                android:propertyName="scaleX"
                android:valueFrom="1.0f"
                android:valueTo="3.0f"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="2000"
                android:propertyName="scaleY"
                android:valueFrom="1.0f"
                android:valueTo="3.0f"
                android:valueType="floatType" />
        </set>
        <set android:ordering="sequentially">
            <objectAnimator
                android:duration="1000"
                android:propertyName="alpha"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="1000"
                android:propertyName="alpha"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType" />
        </set>
    </set>
</set>

旋转时还有基点pivotX与pivotY，默认是中心点，rotationX与rotationY则是立体的旋转。
感觉写起来是不是没有代码方便呢，若是经常使用的动画建议使用xml，否则还是代码写起来方便。
动画写好了还只是一半，我们还要通过加载执行动画

1
2
3
Animator animator=AnimatorInflater.loadAnimator(context, R.animator.anim_file);
animator.setTarget(view);
animtor.start();

通过AnimatorInflater加载布局xml动画，setTarget知道对象，stat启动动画。

ViewPropertyAnimator

ViewPropertyAnimator是android3.1新增的功能，是专门为view提供的一种便捷用法。对比ObjectAnimator使用起来更加简洁。调用对应属性方法传一个属性值就可以自动实现动画。每个属性方法都有两种调用形式，例如 alpha(float value) 和alphaBy(float value)，前者是变化到多少，后者是变化多少。
总结起来就是：

  • 这个类操作View对象的
  • 提供链式调用设置多个属性动画，这些动画同时进行的
  • 更好的性能，多个属性动画是一次同时变化，只执行一次UI刷新。
  • 每个属性提供两种类型方法设置。
  • 这个类只能通过View的animate()获取引用进行动画设置。

使用形式

1
2
3
4
5
imageView.animate()
          .setDuration(4000)
          .rotationY(45f)
          .translationX(imageView.getWidth())
          .alpha(0f);

ObjectAnimator等价形式

1
2
3
4
5
AnimatorSet animSet = new AnimatorSet();  
animSet.playTogether(
      ObjectAnimator.ofFloat(imageView, "translationX", imageView.getWidth()),
      ObjectAnimator.ofFloat(imageView, "alpha", 0),
      ObjectAnimator.ofFloat(imageView, "rotationY", 45f));

对比起来，使用ViewPropertyAnimator更加简洁。

最后

TypeEvaluator与TimeInterpolate是属性动画的高级部分，我们放到下期再讲，顺便把遗漏的ofObject进行分析。

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

董庆&lt;/br&gt;2014年毕业&lt;</br&gt>;Android程序猿一枚。