Android动画-Property Animation(一)

本章内容

在之前 《Android动画-概述》中，我大概说了下Android Property Animation的由来，这里就不做多介绍了，Property Animation 肯定不是一章就能讲的完的，接下来的几章都是建立在代码、效果图的基础上，介绍Property Animation的用法。

本章主要讲的是 ObjectAnimator ，包括代码生成动画，XML加载动画。


简述：在给出一大堆代码之前，先通过效果图来看看一些有趣的动画，通过一个简单有趣的动画逐步展开:

这绝对是一个非常有趣的动画，包含了 alpha、translationX、translationY、rotationX、rotationY、scaleX、scaleY , 一堆 Animation 名词，在详细看这个效果的代码之前，先了解一些重要的东西，有个印象就行，毕竟之后会很详细的说明，担心后面大家看的一头雾水：

View Animation 和 Property Animation

alpha 依然不变

translate 分成了 translationX 和 translationY, 要想X轴、Y轴两个一起变化就需要将 translationX 和 translationY 组合使用

rotate 分成了 rotation、rotationX、 rotationY，其中 rotation 和 rotate基本一致，都是围绕某一个中心旋转，而 rotationX 和 rotationY 则应该算 Property Animation 带来的新的效果，这两种动画分别表示着 X轴的立体动画和Y轴的立体动画。

scale 则分成了 scaleX 和 scaleY，和 translationX/Y 一样，要想X轴、Y轴都有变化就必须一起使用

共同点:

duration 动画时间

repeatCount 动画重复次数

repeatMode 动画重复模式

Interpolator 插值器

接下来，还需要看看3.0之后，View的变化

aplha：透明度，1是完全不透明，0是完全透明，这个也没什么好说的。

setTranslationX(floatX)、setTranslationY(floatY) 这两个API的作用是对控件的位置进行调整，floatX 和 floatY 是一个相对值，相对于控件左上角原点的一个位移值。

setRotationX(floatX) 和 setRotationY(floatY) ，这两个API分别代表着 改变与X轴平面的角度、改变与Y轴平面的角度，这话说的非常抽象，事实上这两个API的效果也非常抽象，举个栗子：把X轴、Y轴看成两个垂直的平面，现在有一个ImageView 在画面上，这个ImageView 现在肯定是与Y轴的平面平行，与X轴的平面垂直，如果我设置了 setRotationX(45)，这个45代表的就是一个正45度角，那么这个ImageView 就会变成一个底部向屏幕内延伸，倾斜的角度与X轴平面的角度成45度角，小角对着你。(感觉说完还是很抽象，下面会有效果，一会儿大家看看吧，事实上开发中，我基本没有用到过，好奇葩的API)

setScaleX(floatX) 、setScaleY(floatY) 这个就简单了，代表着 X轴方向的缩放，Y轴方向的缩放

setPivotX(floatX) 和 setPivotY(floatY)：旋转的轴点和缩放的基准点，默认是View的中心点。和View Animation 不一样，Property Animation 提供的API和XML这两种创建动画的途径中，都没有额外的位置设置中心点，所以不管是 代码还是加载XML ，最后的中心点都是动画控件本身在代码里面去设置的。

setX(floatX) set(floatY) : 这个API是设置控件在屏幕上的绝对位置，这里 floatX 和 floatY都是 绝对坐标点


看完新的API，先贴一下上面那个 Set 动画的代码，仅仅只是看上去，很多代码，其实就是一个方法：

public void set1(View view) {
        AnimatorSet set = new AnimatorSet();
        set.setDuration(3000);
        set.playTogether(
                ObjectAnimator.ofFloat(imageView, "alpha", 0.3f, 1f),
                ObjectAnimator.ofFloat(imageView, "scaleY", 0.1f, 1f),
                ObjectAnimator.ofFloat(imageView, "scaleX", 0.1f, 1f),
                ObjectAnimator.ofFloat(imageView, "rotationX", 0f, 360f),
                ObjectAnimator.ofFloat(imageView, "rotationY", 0f, 360f),
                ObjectAnimator.ofFloat(imageView, "translationY", 0f, -400f, 0f),
                ObjectAnimator.ofFloat(imageView, "translationX", 0f, -400f, 0f));
        set.start();
    }

AnimatorSet 作为 Property Animation 中的动画集合，提供了多种动画API，这里用了

public void playTogether(Animator... items)

从方法名就可以看出这是一个一起动画的API，参数是可变数组，类型是 Animator，这是一个抽象类，所以我们要使用它的子类，ObjectAnimator的父类是ValueAnimator(Property Animation核心类，本章先不介绍它)，ValueAnimator继承于Animator，在 Property Animation 中做一些简单的动画，我一般都是用ObjectAnimator。

普通动画APIpublic static ObjectAnimator ofFloat(Object target, String propertyName, float... values)，tartget 毫无疑问是动画控件，propertyName从上面的代码中可以看出，这个给定了你要制定的动画类型，最后一个参数是一个可变数组。这里就可以看出Property Animation对于普通动画，它需要的只是结果，也即是也想要这个动画经历什么值，直接告诉API，然后其中实现、过渡这些都是不需要管的。

Alpha

这个是用代码实现的：

public void alpha(View view) {
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "alpha", 1f,
                0.1f, 1f, 0.5f, 1f);
        anim.setDuration(5000);
        anim.start();
    }

这是一个最基本的透明渐变的动画，我希望我的ImageView在5秒内的透明度 1f-0.1f-1f-0.5f-1f，然后接下来就和我没有关系了。

接下来，让我们来XML定义一个动画，xml 定义路径：res/animator

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">

    <objectAnimator
        android:duration="1400"
        android:propertyName="alpha"
        android:valueFrom="0.3"
        android:valueTo="1"
        android:valueType="floatType" />

    <objectAnimator
        android:duration="2000"
        android:propertyName="alpha"
        android:valueFrom="1"
        android:valueTo="0.1"
        android:valueType="floatType" />

    <objectAnimator
        android:duration="1400"
        android:propertyName="alpha"
        android:valueFrom="0.1"
        android:valueTo="0.8"
        android:valueType="floatType" />

</set>

很明显一个objectAnimator节点是无法承载多个动画的，必须使用set，在set下还需要指明它的子节点动画是一起执行，还是按照XML顺序依次执行。这里android:ordering="sequentially"我规定是按照顺序依次执行。还有一个值，规定一起执行的：android:ordering="together"。

XML中 定义：第一，执行动画的类型 android:propertyName，和 View Animation不一样，View Animation 中一种动画会有对应的节点，而Property Animation中所有基本动画的节点都是objectAnimator，区别动画的类型则是一个属性：android:propertyName。比如 alpha :android:propertyName=”alpha”。第二，在Property Animation的XML中只有android:valueFrom=”0.1” 和 android:valueTo=”0.8” 这两个动画值得存在，不存在规定 scale动画基点的属性，以及规定 rotation 中心的属性，这些都得去到java中调用对应控件的API去设置才成：setPivotX(floatX) 和 setPivotY(floatY)。

动态加载XML：

public void alpha(View view) {
//        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.base_alpha_animator); // 简单的透明动画
        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.base_set_alpha); // 复杂的透明动画
        animator.setTarget(imageView);
        animator.start();
    }

这里AnimatorInflater，就是一个用于动态加载的类。

scale

代码动画：

public void scale(View view) {
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "scaleX", 0.1f, 1f, 0.3f, 0.7f, 0.5f);
        imageView.setScaleY(2);
//        imageView.setScaleX(2);
        anim.setDuration(3000);
        anim.setRepeatCount(1);
        anim.setRepeatMode(ObjectAnimator.REVERSE);
        anim.start();
    }

这里设置了repeatCount和repaeatMode给大家看看效果，顺便测试了了一个View.setScaleY,效果很明显 动画顺序反着又播了一遍，并且控件高度变成2倍。

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:ordering="together">

    <set android:ordering="sequentially">
        <objectAnimator
            android:propertyName="scaleX"
            android:valueFrom="1"
            android:valueTo="1.5"
            android:valueType="floatType" />

        <objectAnimator
            android:propertyName="scaleX"
            android:valueFrom="1.5"
            android:valueTo="0.1"
            android:valueType="floatType" />
    </set>

    <set android:ordering="sequentially">
        <objectAnimator
            android:propertyName="scaleY"
            android:valueFrom="1"
            android:valueTo="0.1"
            android:valueType="floatType" />

        <objectAnimator
            android:propertyName="scaleY"
            android:valueFrom="0.1"
            android:valueTo="1.5"
            android:valueType="floatType" />
    </set>

</set>

正如之前说的，在Property Animation中如果想要X轴、Y轴一起变化，就需要同时使用scaleX、scaleY，在这个XML中我得想法是 把X轴的变化作为一个set，Y轴的变化是另一个set，它们的运行规定是依次运行，之后再把这两个set一起运行。也就是 together下包含着两个sequentially。其实另一种写法可以是sequentially包含着两个together，就是把某一阶段X/Y轴的变化看成是一体的，然后一阶段一阶段的进行。

rotation

先看个最简单的平面动画

 public void rotate(View view) {
//        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotationY", 0f, 360f, 200f, 315f, 225f, 269f);  这是个逗逼的动画
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotationY", 0f, 720f);
//        imageView.setRotationX(-45);
//        imageView.setRotationY(-30);
        imageView.setPivotX(-100f);
        imageView.setPivotY(-100f);
        anim.setDuration(5000);
        anim.setInterpolator(new AccelerateInterpolator());
        anim.start();
    }

这是一个非常简单的动画，其实就是在模拟View Animation 中的rotate，这里如果不设置imageView.setPivotX(-100f); imageView.setPivotY(-100f);那么它的默认旋转中心就是ImageView本身的中心点，并且这里使用了 加速 的插值器。

3D动画

    public void rotate(View view) {
//        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotationY", 0f, 360f, 200f, 315f, 225f, 269f);  这是个逗逼的动画
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotationY", 0f, 720f);
//        imageView.setRotationX(-45);
//        imageView.setRotationY(-30);
        imageView.setPivotX(-100f);
        imageView.setPivotY(-100f);
        anim.setDuration(5000);
        anim.setInterpolator(new AccelerateInterpolator());
        anim.start();
    }

rotationY就是围绕中心点做的Y轴方向的3D动画，如果你想看X轴方向，换成rotationX就OK了。

倾斜旋转动画

    public void rotate(View view) {
//        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotationY", 0f, 360f, 200f, 315f, 225f, 269f);  这是个逗逼的动画
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 720f);
        imageView.setRotationX(-45);
//        imageView.setRotationY(-30);
//        imageView.setPivotX(-100f);
//        imageView.setPivotY(-100f);
        anim.setDuration(5000);
        anim.setInterpolator(new AccelerateInterpolator());
        anim.start();
    }

imageView.setRotationX(-45) 这个API表示着，ImageView底部向屏幕内侧倾斜45°，也就是ImageVIew和X轴平面的相交，角度从90°，变成45°，就变成上图中的效果。

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">

    <objectAnimator
        android:duration="1500"
        android:propertyName="rotation"
        android:valueFrom="0"
        android:valueTo="28"
        android:valueType="floatType" />

    <objectAnimator
        android:duration="1500"
        android:propertyName="rotationX"
        android:valueFrom="0"
        android:valueTo="360"
        android:valueType="floatType" />

</set>

   public void rotate(View view) {
//        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.base_rotation_animator); //简单的旋转动画
        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.base_set_rotate);
        animator.setTarget(imageView);
        imageView.setPivotX(imageView_height);
        imageView.setPivotY(0);
        animator.start();
    }

这个旋转动画是先正方向旋转28°，将对角线与X轴平行，然后在代码里面将对角线上的点作为中心点旋转，其实也就是绕着对角线旋转

translation

public void translate(View view) {
        imageView.setTranslationX(-200);
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "translationY", 0f, -400f, 0f);
        anim.setDuration(3000);
        anim.start();
    }

以控件左上角为原点位移-200px imageView.setTranslationX(-200)，然后translationY，从0位移-400，最后在回到Y轴的原点。

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:ordering="together">

    <set android:ordering="sequentially">

        <objectAnimator
            android:propertyName="translationX"
            android:valueFrom="-150"
            android:valueTo="0" />

    </set>

    <set android:ordering="sequentially">

        <objectAnimator
            android:propertyName="translationY"
            android:valueFrom="-200"
            android:valueTo="0" />

        <objectAnimator
            android:interpolator="@android:anim/bounce_interpolator"
            android:propertyName="translationY"
            android:valueFrom="0"
            android:valueTo="100" />

    </set>

</set>

回弹的效果看不到也是没辙。

抛物线

private float setX = 0;

    public void setXY(View view) {
        imageView.setScaleX(0.1f);
        imageView.setScaleY(0.1f);
        setX = 0;
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "cjh", 0f, 1f);
        anim.setDuration(3000);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (Float) animation.getAnimatedValue();//得到动画变化的属性值
                setX = 400 * value;
                float setY = -1 / 75 * setX * setX + 4 * setX;
                imageView.setX(setX);
                imageView.setY(setY);
            }
        });
        anim.start();
    }

事实上，Property Animation 是可以拿到时间值然后自定义动画效果，代码中，我定义我要从 0 - 1，但是具体做什么我随便写的，然后在刷新监听里面，调用了抛物线的公式，然后 setX setY，不断更新ImageView的位置


至此，关于 Proerty Animation 的基本使用都讲完了，主要是详细的讲了 ObjectAnimator 的使用和XML的写法，接下来就是更为重要的动画了。

源码下载

时间： 2024-08-25 10:49:11

Android动画-Property Animation(一)的相关文章

android动画-Property Animation

Property Animation 属性动画,这个是在Android 3.0中才引进的. Property Animation其改变的是对象属性对应的值,应用于任何对象,而Tween Animation更改的是绘画的效果,其属性值是没有变化的. ObjectAnimator:更改对象的属性值 使用方法: ObjectAnimator translationRight = ObjectAnimator.ofFloat(m_tv, "X",width); translationRight

Android属性动画Property Animation系列三之LayoutTransition（布局容器动画）

在上一篇中我们学习了属性动画的ObjectAnimator使用,不了解的可以看看 Android属性动画Property Animation系列一之ObjectAnimator.这一篇我们来学点新的东西.做项目的时候应该碰到这种问题:根据不同条件显示或者隐藏一个控件或者布局,我们能想到的第一个方法就是 调用View.setVisibility()方法.虽然实现了显示隐藏效果,但是总感觉这样的显示隐藏过程很僵硬,让人不是很舒服,那么有没有办法能让这种显示隐藏有个过渡的动画效果呢?答案是肯定的,不言

Android属性动画Property Animation系列一之ValueAnimator

Android动画分类 市面上的很多APP都用到动画效果,动画效果用的好可以提升用户的体验度.那么Android系统都有哪些机制的动画呢? 1.逐帧动画(frame-by-frame animation).逐帧动画的工作原理很简单,其实就是将一个完整的动画拆分成一张张单独的图片,然后再将它们连贯起来进行播放,类似于动画片的工作原理. 2.补间动画(tweened animation)则是可以对View进行一系列的动画操作,包括淡入淡出.缩放.平移.旋转四种. 3.属性动画Property Ani

Android 动画详解之属性动画(Property Animation)（下）

Hello,大家好,最近好长时间没有写博客了,因为我决定辞职了. 废话不多说,我们还是来看属性动画在上一篇Android 动画详解之属性动画(Property Animation)中我们简单的介绍了一下属性动画的用法,其实属性动画还有更多有趣的用法. 1,在xml中使用 在eclipse中我们右键新建xml可以选择新建属性动画,如图 我们选择objectAnimator,然后我们就会看到熟悉的一幕 然后我们用智能提示就可以看到更熟悉的 没错,这下我们应该知道怎么用xml布局来写属性动画了吧 <s

Android属性动画Property Animation系列一之ObjectAnimator

转载请注明出处 http://blog.csdn.net/feiduclear_up/article/details/45915377 前面一篇博客解读了Android属性动画Property Animation系列一之ValueAnimator的相关知识点以及怎么使用.这篇博客继续解读Android 属性动画 ObjectAnimator 类的使用. ObjectAnimator 相比ValueAnimator类,ObjectAnimator更加实用,因为它真正可以作用在一个对象上.不过Obj

属性动画-Property Animation之ViewPropertyAnimator 你应该知道的一切

转载请注明出处(万分感谢!): http://blog.csdn.net/javazejian/article/details/52381558 出自[zejian的博客] 关联文章: 走进绚烂多彩的属性动画-Property Animation(上篇) 走进绚烂多彩的属性动画-Property Animation之Interpolator和TypeEvaluator(下篇) ??原本打算这篇作为属性动画的完结篇,但目前情况来看,估计无法完结,前两天研究了一下ViewPropertyAnimat

（四）Android动画开发---Animation动画效果详解

Android 使用Animation的具体操作方法我们将会在这篇文章中做一个详细的介绍.大家可以通过这里举出的代码进行解读,并从中了解到相关操作技巧,方便我们将来开发应用,并且加深对这一操作系统的理解程度. 在Android中,分别可以在xml中定义Animation,也可以在程序代码中定义. 动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转

android 动画属性Animation

Animation 在android 程序当中很多时候要用到动画效果,而动画效果主要是Animation来实现的,API给出的解释: 其中包含4种动画效果 AlphaAnimation 渐变透明度 RotateAnimation 画面旋转 ScaleAnimation 渐变尺寸缩放 TranslateAnimation 位置移动 但如果你想把这些动画效果联合起来就需要用到一个类AnimationSet  动画集. 下面就对这几个类进行一个简单的解释: AlphaAnimation 的例子: 1

Android学习之 属性动画&lt;Property Animation&gt;

property 动画系统是相当健壮的框架,它几乎可以动画显示任何对象. 你可以定义一个动画来定时改变任何对象的属性值,不论该对象是否在屏幕上显示. property 动画将以一定的时间间隔修改属性值(对象中的字段值). 要实现动画显示,你须指定对象的相应属性(比如对象的屏幕位置),以及动画时长.动画时间间隔. property 动画系统能让你设定以下动画要素: 1.持续时间:指定动画的持续显示时间.默认的时长是300毫秒. 2.插值因子:指定属性值的变化方式,表示为关于动画已显示时间的函数.