Android属性动画基础篇

1、什么是属性动画

  • 简单来说就是通过改变对象属性而形成的动画效果。

2、为什么使用属性动画

我们知道,在属性动画之前,Android 提供了视图动画(view Animation),而视图动画又分为帧动画(Frame Animation)和补间动画(Tween Animation)。帧动画就像我们看的影片一样,是一系列图片连贯起来播放形成的动画;补间动画是在针对 view 的一些操作,比如:平移、透明度、旋转、缩放。既然有了视图动画,我们为什么还要使用属性动画?原因很简单,因为它牛逼啊。为什么说它牛逼,因为它突破了视图动画的种种局限性。下面我们来看看视图动画都有哪些局限性?

  • 视图动画的作用对象是 view。也就是说,我们只能对view对象做动画。
  • 视图动画效果只有上面说到的平移、透明度、旋转、缩放效果。
  • 视图动画只有视觉效果,无法改变对象的属性。

首先,视图动画只对 view 对象起作用,比如 Button。虽然我们平时能看到的都是界面都是 view 组成的,但是背后可能需要改变的是非 view 对象的属性。比如一个圆的圆心坐标对象。然后,视图动画的效果有限,如果我们想实现复杂的效果,可能就无能为力了。比如,我们想让一个对象的颜色由红色渐渐变为黄色,这中间是一个动画过程,视图动画是帮我们实现不了的。最后,视图动画只有视觉效果,无法改变对象属性,这会使我们在开发中出现很多麻烦。比如,我们移动了一个按钮,按钮位置的移动只是视觉上的,实际上按钮还在原来的位置,这个时候我们点它移动后的位置,点击事件是不生效的。上面的种种局限性导致了属性动画的诞生。Android 在3.0之后提供了属性动画。

3、属性动画内容

  • 基本用法:ViewPropertyAnimator、ValueAnimator、ObjectAnimator等核心类用法。
  • 高级用法:插值器和估值器

4、基本用法

4.1、ViewPropertyAnimator

ViewPropertyAnimator 是属性动画中专门针对 view 的类,使用起来也很简单,一行代码基本可以搞定。因为简单,所以,我们从它开始。现在我们简单写个demo:布局很简单,一个图片一个按钮,点击按钮,图片执行动画。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="100dp"
        android:src="@drawable/monkey"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
     />

    <Button
        android:text="ViewPropertyAnimator平移"
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
     />
</android.support.constraint.ConstraintLayout>

代码更简单,我们依次执行了平移、旋转、缩小、透明度,每个动画一行搞定:

@OnClick(R.id.button)
public void onViewClicked() {
    button.setText("ViewPropertyAnimator平移");
    switch (count) {
        case 0:
            image.animate().translationX(300).setDuration(1000);
            button.setText("ViewPropertyAnimator旋转");
            break;
        case 1:
            image.animate().rotation(180);
            button.setText("ViewPropertyAnimator缩小");
            break;
        case 2:
            image.animate().scaleX(0.5f).scaleY(0.5f);
            button.setText("ViewPropertyAnimator透明度");
            break;
        case 3:
            image.animate().alpha(0.5f);
            break;
        default:

            break;
    }
    count++;
}
20180211153304.gif

可以看出我们先用 image.animate()方法获取 ViewPropertyAnimator 对象,然后执行具体的动画方法。我们看看 ViewPropertyAnimator 类都提供了哪些方法,分别又对应 view 中的哪些方法:


ViewPropertyAnimator.jpg

可以看到,每个动画 ViewPropertyAnimator 都提供了两个方法,其中一个都带有 -By 后缀。这两个方法有什么区别呢?
带有-By后缀的都是增加的意思,比如说:translationX(100)是把 translationX 的值渐变为100,而 translationXBy(100)是把 translationX 的值渐渐增加100。这样就容易理解了。另外我们可以使用setListener()方法设置监听动画的开始、结束、重复、取消操作;也可以通过setUpdateListener()方法获取动画过程中的每个对象。这点和后面要说的 ObjectAnimator 和 ValueAnimator 不太一样。当我们只是对view对象做一些简单的动画的时候,我们可以选择 ViewPropertyAnimator 类。

4.2、ValuetAnimator

valueAnimator 可以说是动画机制的核心类,后面的 ObjectAnimator 也是它的子类。属性动画是改变一个属性值,从一个初始值变化到一个结果值。ValueAnimator 控制了这个过程,而且根据整个过程的时间比例,不同的时间点赋给对象不同的属性值。ValueAnimator 主要有三个方法:

  • ofInt(int... values)
  • ofFloat(float... values)
  • ofObject(TypeEvaluator evaluator, Object... values)

用法也简单:

ValueAnimator animator = ValueAnimator.ofInt(0,10);
animator.setDuration(300);
animator.start();
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            Log.d("tag","ValueAnimator value:" + animation.getAnimatedValue());
        }
    });

这三个方法都是静态方法,可以直接调用,传入我们的参数值,注意,这个参数值是一个数组,就是我们可以传入多个对象。这里我们调用ofInt方法,传入0和10,就是值从0到10的变化过程。我们可以通过addUpdateListener()方法获取整个变化过程,打印出变化过程中的值:

ValueLog.jpg

可以看出,这是一个从0到10的变化过程。当然,我们可以传入多个值,这样就是一个依次变化的过程。另外两个方法和这个方法使用类似,其中ofObject(TypeEvaluator evaluator, Object... values)方法用到了估值器,我们放到后面单独总结,这里先说基础用法。

4.3、ObjectAnimator

ValueAnimator是动画机制最核心的类,但却不是我们使用最多的类,和我们打交道最多的是ObjectAniamtor。它是ValueAnimator的子类,但是提供了更丰富的功能。我们可以使用它对任意对象的任意属性进行操作。我们看看它的ofFloat()方法怎么使用:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="100dp"
        android:src="@drawable/monkey"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    />

    <Button
        android:text="点我啊"
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
    />
</android.support.constraint.ConstraintLayout>

布局文件同上面一样,一个按钮,一个图片,点击按钮,图片执行动画。按钮的点击事件如下:

@OnClick(R.id.button)
public void onViewClicked() {
    switch (count) {
        case 0:
            button.setText("透明度变化");
            ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(image,"alpha",1f,0f,1f);
            objectAnimator.setDuration(3000);
            objectAnimator.start();
            break;
        case 1:
            button.setText("平移");
            ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(image,"translationX",0,500,0);
            objectAnimator2.setDuration(5000);
            objectAnimator2.start();
            break;
    }
    count++;
}

ObjectAnimator类的ofFloat()方法和 ValueAnimator不一样,第一个参数是我们要操作的对象,第二个参数是对象的属性,后面是一个数组,是这个属性的变化过程。首先,我们让图片的透明度从1到0再到1;然后让图片平移500像素再平移回来:


ObjectAnimator.gif

这里我们做的动画还是view常见的透明度和平移操作。这些动画好像没体现出来属性动画比视图动画的优势,我们自定义一个view,看看ObjectAnimator类对于对象属性的操作。

public class CircleView extends View {
    private float angle;
    private float strokeWidth = 30;
    private RectF rectF = new RectF();
    private float radius = 200;
    private Paint paint;
    
    public float getAngle() {
        return angle;
    }

    public void setAngle(float angle) {
        this.angle = angle;
        invalidate();
    }

    public CircleView(Context context) {
        this(context,null);
    }

    public CircleView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CircleView(Context context, AttributeSet attrs, int       defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float centerX = getWidth() / 2;
        float centerY = getHeight() / 2;
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(strokeWidth);
        canvas.drawCircle(centerX,centerY,200,paint);

        paint.setColor(Color.RED);
        paint.setStrokeCap(Paint.Cap.ROUND);
        rectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
        canvas.drawArc(rectF, 180, angle, false, paint);
    }
}

我们定义了一个类CircleView,这个view先画了一个黑色的圆环,再根据一个属性angle画一个红色的圆弧,我们使用ObjectAnimator动态控制angle值,不断重绘,形成一个动画效果:

@OnClick(R.id.button)
public void changeRadius() {
    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(circleView,"angle",0,270,0);
    objectAnimator.setDuration(5000);
    objectAnimator.start();
    objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            Log.d("tag","ValueAnimator: " + animation.getAnimatedValue());
        }
    });
}

这是我们ObjectAnimator类相关的操作。ofFloat()方法传入了一个CircleView对象,传入angle参数,弧度从0到270再到0度。我们看看效果:


CircleView.gif

我们通过不断修改angle的属性值,形成了一个简单的动画。这里的属性可以传入对象的任意属性,前提是这个属性有get()方法。因为ObjectAnimator类是通过get()方法获取到属性并操作的。所以,当我们想通过ObjectAnimator类改变一个属性的时候,我们需要给这个属性提供get()方法。

使用xml定义动画

属性动画和补间动画一样,也可以通过xml定义动画。使用xml定义动画,比直接写在代码里麻烦一点,但更方便我们重用。首先,我们在res文件夹下建立animator文件夹,我们定义的xml放在这个文件夹下。有三种标签:

  • animator
  • objectAnimator
  • set
<set android:ordering="sequentially" >  
    <objectAnimator  
        android:duration="1500"  
        android:propertyName="alpha"  
        android:valueFrom="1"  
        android:valueTo="0"  
        android:valueType="floatType" >  
    </objectAnimator>  
    <objectAnimator  
        android:duration="1500"  
        android:propertyName="alpha"  
        android:valueFrom="0"  
        android:valueTo="1"  
        android:valueType="floatType" >  
    </objectAnimator>  
</set> 

参数值我们都能看明白是什么意思,然后我们在代码中调用:

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

4.4、AnimatorSet组合动画

组合动画就是几个动画组合起来使用,我们使用AnimatorSet类来实现。系统提供了几个方法控制动画执行顺序:

  • after(Animator animator)现有动画在传入动画后执行
  • before(Animator animator) 现有动画在传入动画前执行
  • with(Animator animator) 两个动画同时执行

这篇文章介绍了属性动画的基础用法,后面我们将说说属性动画的高级用法:插值器和估值器。当我们想实现酷炫细致的动画时,它们会给我们很大的帮助。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,099评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,828评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,540评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,848评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,971评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,132评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,193评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,934评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,376评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,687评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,846评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,537评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,175评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,887评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,134评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,674评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,741评论 2 351

推荐阅读更多精彩内容

  • 【Android 动画】 动画分类补间动画(Tween动画)帧动画(Frame 动画)属性动画(Property ...
    Rtia阅读 6,121评论 1 38
  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,699评论 0 10
  • 动画基础概念 动画分类 Android 中动画分为两种,一种是 Tween 动画、还有一种是 Frame 动画。 ...
    Rtia阅读 1,223评论 0 6
  • 死亡的离奇,生存的离谱。 愿我死后永坠地狱,不受轮回之苦。 人间道是一个不屈的史诗,我的不屑是苦于生活的痛和苦。 ...
    藏剑之杀阅读 159评论 0 1