Anroid动画总结一:属性动画(Property)简单应用

最新推荐文章于 2023-02-03 11:30:03 发布

逆风Lee

最新推荐文章于 2023-02-03 11:30:03 发布

阅读量145

点赞数

分类专栏：动画文章标签： android 动画

动画专栏收录该内容

3 篇文章 0 订阅

订阅专栏

转载自：http://www.jianshu.com/p/d23f58f4368d

前言

Android目前有以下几种动画模式：

帧动画(Frame by Frame)
把动画拆为一帧一帧，然后把它们连起来连贯的播放。
特点: 帧动画由于是一帧一帧的，所以需要图片多。会增大apk的大小，但是这种动画可以实现一些比较难的效果，比如说等待的环形进度
补间动画(Tween)
对View进行移动、缩放、旋转、淡入淡出的操作
特点: 相对也比较简单，页面切换的动画多用这个来做。缺点，视觉上
上变化，并不是真正的位置上的变化。

例如:
1.屏幕左上角有一个Button，使用补间动画将其移动到右下角，此刻你去点击右下角的Button，它是绝对不会响应点击事件的，因此其作用区域依然还在左上角。只不过是补间动画将其绘制在右下角而已。补间动画虽能对控件做动画，但并没有改变控件内部的属性值。而Property Animator则是恰恰相反，Property Animator是通过改变控件内部的属性值来达到动画效果的

2.如何利用补间动画来将一个控件的背景色在一分钟内从绿色变为红色，这个效果想必没办法仅仅通过改变控件的渐入渐出、移动、旋转和缩放来实现吧

3.补间动画和逐帧动画统称为View Animation，View Animation仅能对指定的控件做动画，而Property Animator是通过改变控件某一属性值来做动画的。
属性动画(Property)
Android 3.0引入了属性动画，通过控制属性来实现动画
特点: 最为强大的动画，弥补了补间动画的缺点，实现位置+视觉的变化。并且可以自定义插值器，实现各种效果

属性动画

我想，与其看文字介绍还不如直接看效果和代码。先来个组合的动画效果：
这里写图片描述
虽然不是很炫酷，不过这个效果包含多个基本动画。老规矩，从基础的开始一点一点来。
这里主要介绍ObjectAnimator的用法。

代码实现

1.透明度

刚刚演示的效果中，一开始有个变透明的过程，来看看单纯的变透明怎么写。

透明度由0～1表示。0表示完全透明，1表示不透明

例子：在1s内，将imageView的透明度从1变成0。

//透明度起始为1，结束时为0
ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f);
animator.setDuration(1000);//时间1s
animator.start();

ofFloat中的参数：

imageView：执行动画的View;
alpha：表示透明动画；
1f：起始透明度；
0f：动画结束后的透明度；
还可以省略1f，写成下面这样
（注：只有执行一次动画的时候才可以这么写。这么说还可以执行多次？不急，往下看～～）

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 0f);

效果：
这里写图片描述

从效果可以看出，动画完成后，imageView就直接变透明了，回都回不来。从这也能猜出，属性动画直接改变了视图的属性。
除了把透明度从1变成0，ObjectAnimator还支持多个动画。

例子：在2s内，将imageView的透明度从1变成0然后再变成1。

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f, 1f);
animator.setDuration(2000);
animator.start();

这里只要多加个参数，表示下一次动画。
效果：

这里写图片描述
这里执行了两次动画，可以看出，2s的时间平均分配给了这两次动画。
如果你想执行三次、四次…动画，只要在后面多加几个参数就可以了。这也适用于其他的几个动画效果：旋转、移动、缩放

如果你想让它一直重复的话，可以使用ObjectAnimator提供的setRepeatCount(int count)。count为重复次数，-1表示一直重复。

animator.setRepeatCount(-1);

2.旋转

例子：在2s内，顺时针旋转360度，然后再逆时针旋转360度。

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 360f, 0f);
animator.setDuration(2000);
animator.start();

效果：

这里写图片描述

注：
下个度数大于上个度数，顺时针旋转；下个度数小于上个度数，逆时针旋转。
如：0f -> 360f ，顺时针； 360f -> 0f，逆时针。

3.移动

例子：在2s内，沿x轴左移300个像素，然后再右移300个像素

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "translationX", 0f, -300f, 0f);
animator.setDuration(2000);
animator.start();

效果：

这里写图片描述
这里的移动分为沿x、y轴移动，沿x轴时使用translationX，沿y轴移动使用translationY。
注：
translationX：下个位置大于上个上个位置时，向右移动，反之向左移动；
translationY：下个位置大于上个上个位置时，向下移动，反之向上移动。
如：
translationX：0f-> -300f，向左；-300f-> 0f，向右。

4.缩放

例子：在2s内，沿x轴放大成原来的两倍，然后缩小会原样。

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "scaleX", 1f, 2f, 1f);
animator.setDuration(2000);
animator.start();

效果：
这里写图片描述
缩放和移动相似，也分为沿x、y轴来放缩。沿x轴缩放使用scaleX，沿y轴缩放使用scaleY。
注：
后面的参数表示倍数，1f表示原来的大小，以此推类：2f表示两倍、3f表示三倍
如：1f-> 2f，放大成原来的两倍；2f-> 1f，从两倍变为原样。

5.组合动画

如果只有这些基本动画是无法满足我们实际的应用的，所以还有个类AnimatorSet，专门来组合这些动画。
AnimatorSet：这个类提供了一个play()方法，调用后将会返回一个AnimatorSet.Builder的实例，AnimatorSet.Builder中包括以下四个方法：
• after(Animator anim) ：将现有动画插入到传入的动画之后执行
• after(long delay) ：将现有动画延迟指定毫秒后执行
• before(Animator anim)：将现有动画插入到传入的动画之前执行
• with(Animator anim) ：将现有动画和传入的动画同时执行

接下来看看应该怎么使用。
例子：在3s内，沿x、y轴同时放大，然后缩小，在缩放的同时还要改变透明度。然后再完成3s的左右移动

//沿x轴放大
ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(imageView, "scaleX", 1f, 2f, 1f); 
//沿y轴放大 
ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(imageView, "scaleY", 1f, 2f, 1f); 
//移动 
ObjectAnimator translationXAnimator = ObjectAnimator.ofFloat(imageView, "translationX", 0f, 200f, 0f); 
//透明动画 
ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f, 1f); 
AnimatorSet set = new AnimatorSet(); 
//同时沿X,Y轴放大，且改变透明度，然后移动 
set.play(scaleXAnimator).with(scaleYAnimator).with(animator).before(translationXAnimator); 
//都设置3s，也可以为每个单独设置 
set.setDuration(3000); 
set.start();

效果：
这里写图片描述
也可以设置延迟执行

animator.setStartDelay(1000);//延迟1000ms后执行,需要在start()前调用

6.监听事件

在动画执行前，还可以为动画添加监听事件。


//添加监听事件 
set.addListener(new Animator.AnimatorListener() 
{ 
    @Override
    public void onAnimationStart(Animator animation) 
    { 
        //动画开始的时候调用 
    } 
    @Override 
    public void onAnimationEnd(Animator animation) 
    { 
        //画结束的时候调用 
    } 
    @Override 
    public void onAnimationCancel(Animator animation) 
    { 
        //动画被取消的时候调用 
    } 
    @Override public void onAnimationRepeat(Animator animation) 
    { 
        //动画重复执行的时候调用 
    } });

这样是不是太费事了？有时候，我们只想监听其中的某个事件，其他的我们并不关心。官方还是很人性化得为我们提供了另一个类：AnimatorListenerAdapter，在这个类中，只要重写我们想要的监听事件就可以了。

//另一种设置监听的方式，里面的监听方法可以选择性重写 
set.addListener(new AnimatorListenerAdapter() 
{ 
    @Override 
    public void onAnimationStart(Animator animation) { } 
});

XML实现

不仅可以在Java代码中实现属性动画，属性动画和过去的补间动画一样，都可以在XML中编写。在XML中编写好，在某些情况下还能重用。
首先要在res下创建一个animator文件夹

注意：是animator，不是anim
在XML中：
ObjectAnimator 对应< objectAnimator >
AnimatorSet 对应 < set >

1.透明度

例子：2s内，透明度从0.5f变为1f，且一直重复动画，重复模式为reverse

在animator文件夹下，创建alpha.xml文件：


<?xml version="1.0" encoding="utf-8"?> 
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 
    android:duration="2000" 
    android:propertyName="alpha" 
    android:repeatCount="-1" 
    android:repeatMode="reverse" 
    android:valueFrom="0.5" 
    android:valueTo="1" 
    android:valueType="floatType" />

android:duration：动画持续时间；
android:propertyName：动画类型，即对象的seter；
android:repeatCount：重复次数，值为infinite或具体数值，infinite或者-1都为一直重复；
android:repeatMode：重复模式：reverse（动画倒着执行）， restart（从新开始）；
android:valueFrom：起始值；
android:valueTo：结束值。
android:valueType：值类型

在Java中调用：

Animator animator = AnimatorInflater.loadAnimator(this, R.animator.alpha);
animator.setTarget(imageView);
animator.start();

这样就能实现之前的透明效果，图片我就不贴了

2.旋转

例子：在2s内，顺时针旋转360度

在animator文件夹下，创建rotation.xml文件：


<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 
    android:valueFrom="0" 
    android:valueTo="360" 
    android:duration="2000" 
    android:propertyName="rotation" 
    android:valueType="floatType"/>

这里就将android:propertyName的值改为rotation

在Java中的调用跟上面的相似。

3.移动

例子：在2s内，沿x轴向右移动200px

在animator文件夹下，创建translation_x.xml文件：

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 
    android:duration="2000" 
    android:propertyName="translationX" 
    android:repeatCount="-1" 
    android:repeatMode="reverse" 
    android:valueFrom="0" 
    android:valueTo="200" 
    android:valueType="floatType"/>

这里就将android:propertyName的值改为translationX，若沿y轴，使用translationY即可。

在Java中的调用跟上面的相似。

4.缩放

例子：在2s内，沿x轴放大成1.5倍

在animator文件夹下，创建scale_x.xml文件：

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 
    android:duration="2000" 
    android:propertyName="scaleX" 
    android:valueFrom="1" 
    android:valueTo="1.5" 
    android:valueType="floatType" />

这里就将android:propertyName的值改为scaleX，若沿y轴，使用scaleY即可。

在Java中的调用跟上面的相似。

5.组合动画

例子：完成这样的移动动画效果：向左移动并旋转，然后回到原来的位置，接着向右移动并旋转，然后回到原来的位置。效果如下：

<?xml version="1.0" encoding="utf-8"?> 
    <set xmlns:android="http://schemas.android.com/apk/res/android" 
        android:ordering="sequentially"> 
        <set> 
            <objectAnimator 
                android:duration="4000" 
                android:propertyName="rotation" 
                android:repeatMode="reverse" 
                android:valueFrom="0" 
                android:valueTo="360" /> 
            <set 
                android:ordering="sequentially"> 
                <objectAnimator 
                    android:duration="2000" 
                    android:propertyName="translationX" 
                    android:repeatMode="reverse" 
                    android:valueFrom="0" 
                    android:valueTo="200" /> 
                <objectAnimator 
                    android:duration="2000" 
                    android:propertyName="translationX" 
                    android:repeatMode="reverse" 
                    android:valueFrom="200" 
                    android:valueTo="0" /> 
            </set> 
        </set> 
        <set > 
            <objectAnimator 
                android:duration="4000" 
                android:propertyName="rotation"
                android:repeatMode="reverse"
                android:valueFrom="0" 
                android:valueTo="360" /> 
            <set android:ordering="sequentially"> 
                <objectAnimator 
                    android:duration="2000"
                    android:propertyName="translationX"
                    android:repeatMode="reverse"
                    android:valueFrom="0" 
                    android:valueTo="-200" /> 
                <objectAnimator 
                    android:duration="2000"

                    android:propertyName="translationX"
                    android:repeatMode="reverse" 

                android:valueFrom="-200" 
                    android:valueTo="0" /> 
            </set> 
        </set> 
    </set>

这里需要说下set中的属性android:ordering：规定了这个set中的动画的执行顺序，包括：
together（默认）：set中的动画同时执行
sequentially：set中的动画按顺序执行
最后看看效果：

这里写图片描述
不多说了，ObjectAnimator用法基本都介绍完了。去给自己的APP添加炫酷的动画吧。

逆风Lee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Anroid动画总结一:属性动画(Property)简单应用

转载自：http://www.jianshu.com/p/d23f58f4368d前言Android目前有的有以下几种动画模式：帧动画(Frame by Frame) 把动画拆为一帧一帧，然后把它们连起来连贯的播放。特点: 帧动画由于是一帧一帧的，所以需要图片多。会增大apk的大小，但是这种动画可以实现一些比较难的效果，比如说等待的环形进度补间动画(Tween) 对View进行移动、缩
复制链接

扫一扫