Android动画效果之初识Property Animation(属性动画)(三)

前言:

前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画)、Frame Animation(逐帧动画)Android动画效果之Frame Animation(逐帧动画)(二),其实总结前两个的根本目的就是为了学习今天的主角Property Animation(属性动画)。其实在Android最早期只提供了前两种动画方式,在Android 3.0才引入了属性动画,谷歌为何要引入属性动画呢?今天我们来总结学习一下。

Property Animation产生的背景:

由于Tween Animation(补间动画)只能实现简单的四种的动画(alpha、scale、rotate、translate),要想实现比较复杂的动画就难以满足需求,而且补间动画只是改变了View对象绘制的位置,而没有改变View对象本身,比如View形状的变换,如大小的缩放,透明度的改变,位置的改变,其实本身并没有改变,举个例子就好比孙悟空灵魂出窍一样,虽然已经上天入地,其实肉体还在那里一动不动,我们开发过程中的经常遇见的就是translate之后事件还在原地。如果要实现既要有动画效果又要使得View本身得到真正改变,那就要借助属性动画了,这也是属性动画引入的原因。它能够更加灵活的实现各种效果,不仅限于类似补间动画实现的哪几种效果。

Property Animation相关类

属性动画,根据字面理解可以通过修改物件的属性值以达到动画效果。

类名 用途
ValueAnimator 属性动画主要的计时器,也计算动画后的属性的值,动画的执行类
ObjectAnimator   ValueAnimator的一个子类,允许你设置一个目标对象和对象的属性进行动画,动画的执行类
AnimatorSet 提供组织动画的结构,使它们能相关联得运行,用于控制一组动画的执行
AnimatorInflater  用户加载属性动画的xml文件
Evaluators  属性动画计算器,告诉了属性动画系统如何计算给出属性的值
Interpolators 动画插入器,定义动画的变化率

上面几个重要类之间的关系如下图所示:

今天先通过最简单最容易理解的ObjectAnimator来学习总结。

ObjectAnimator:

ValueAnimator的一个子类,允许你设置一个目标对象和对象的属性进行动画。当这个类计算好一个动画的新值后,相应的会更新其属性。大多数时候你都会想用ObjectAnimator,因为它使得动画值到目标对象的处理更简单了。

1.)以实现一个View透明渐变效果为例进行说明

xml实现方式:

这里需要注意是的属性动画文件存放目录为res/animator

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

duration 表示动画执行的时间

propertyName 表示修改的物件的哪个属性值,这里是透明度

valueFrom 表示从哪个状态值开始动画

valueTo 表示到哪个状态值结束动画

valueType 类型估值,主要用于设置动画操作属性的值

repeatMode 表示重复的模式 reverse表示

repeatCount 动画重复的计数,动画将会执行该值+1次

repeatMode 动画重复的模式,reverse为反向,当第偶次执行时,动画方向会相反。restart为重新执行,方向不变

startOffset, 动画多次执行的间隔时间,如果只执行一次,执行前会暂停这段时间,单位毫秒

interpolator 指定动画插入器

通过上面的xml属性可以看出和补间动画基本上一致,然后通过AnimatorInflater 来加载xml中的动画

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

当然也可以通过纯Java代码的方式实现

ObjectAnimator alphaAnimation = ObjectAnimator.ofFloat(imageView, "alpha", 0f, 1f);
    alphaAnimation.setDuration(500);
    alphaAnimation.setRepeatCount(0);
    alphaAnimation.setRepeatMode(ValueAnimator.REVERSE);
    alphaAnimation.setStartDelay(200);
    alphaAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
    alphaAnimation.start();

对于java代码实现,ObjectAnimator 提供了以下几个方法:ofFloat(),ofInt(),ofObject(),ofArgb(),ofPropertyValuesHolder()这几个方法都是设置动画作用的元素、作用的属性、动画开始、结束、以及中间的任意个属性值。

其他举例:

缩放动画:

xml:

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

java代码:

 ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(imageView, "scaleX", 1f, 1.5f);
   scaleXAnimator.setDuration(500);
   scaleXAnimator.setRepeatCount(1);
   scaleXAnimator.setRepeatMode(ValueAnimator.REVERSE);
   scaleXAnimator.start();
旋转动画:

xml:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:propertyName="rotation"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:valueFrom="0"
    android:valueTo="360"
    android:valueType="floatType" />

java代码:

 ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 360f);
    objectAnimator.setDuration(500);
    objectAnimator.setRepeatCount(1);
    objectAnimator.setRepeatMode(ValueAnimator.REVERSE);
    objectAnimator.start();
平移动画:

xml:

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

java代码:

 ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView, "translationX", 0f, 100f);
    objectAnimator.setDuration(500);
    objectAnimator.setRepeatCount(1);
    objectAnimator.setRepeatMode(ValueAnimator.REVERSE);
    objectAnimator.start();

2.)如何实现一个组合动画

举例我们同时对一个控件进行宽高两个维度的缩放

方式一:使用AnimatorSet
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">
    <objectAnimator
        android:duration="500"
        android:propertyName="scaleX"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:valueFrom="1.0"
        android:valueTo="1.5"
        android:valueType="floatType" />
    <objectAnimator
        android:duration="500"
        android:propertyName="scaleY"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:valueFrom="1.0"
        android:valueTo="1.5"
        android:valueType="floatType" />

</set>

加载xml动画

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

纯Java代码实现:

AnimatorSet animatorSet = new AnimatorSet();

    ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(imageView, "scaleX", 1f, 1.5f);
    scaleXAnimator.setDuration(500);
    scaleXAnimator.setRepeatCount(1);
    scaleXAnimator.setRepeatMode(ValueAnimator.REVERSE);
    scaleXAnimator.start();

    ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(imageView, "scaleY", 1f, 1.5f);
    scaleYAnimator.setDuration(500);
    scaleYAnimator.setRepeatCount(1);
    scaleYAnimator.setRepeatMode(ValueAnimator.REVERSE);

    animatorSet.playTogether(scaleXAnimator, scaleYAnimator);
    animatorSet.start();

上述代码通过playTogether函数实现两个动画同时执行,如果不想同时执行,也可以调用play函数返回AnimatorSet.Builder实例,AnimatorSet.Builder提供了如下几个函数用于实现动画组合:

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

也可以调用playSequentially函数实现分布执行动画。

方式二:使用PropertyValuesHolder
PropertyValuesHolder scaleXValuesHolder = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 1.5f);
PropertyValuesHolder scaleYValuesHolder = PropertyValuesHolder.ofFloat("scaleY", 1.0f, 1.5f);
ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(imageView, scaleXValuesHolder, scaleYValuesHolder);
    objectAnimator.setDuration(500);
    objectAnimator.setRepeatCount(1);
    objectAnimator.setRepeatMode(ValueAnimator.REVERSE);
    objectAnimator.start();

通过这种方式只能实现同时执行的动画组合相比AnimatorSet就没那么丰富了,PropertyValuesHolder 提供的函数方法有如下几种:ofInt()、ofFloat()、ofObject()、ofKeyframe()。

方式三:使用ViewPropertyAnimator
 ViewPropertyAnimator viewPropertyAnimator=imageView.animate();
 viewPropertyAnimator.scaleXBy(1.0f).scaleX(1.5f).scaleYBy(1.0f).scaleY(1.5f).setDuration(500).start();

多属性动画,作用于View,能够实现的动画相对单一,只能实现比如缩放,透明度改变,平移、旋转等,具体函数名字:平移 translationX,translationY, X,Y,缩放 scaleX,scaleY, 旋转 rotationX, rotationY,透明度 alpha

3.)设置动画监听器

有时候我们可能要在某一个动画执行之前 或者动画结束之后进行一些其他的操作,这个时候就要借助动画监听器了。

    objectAnimator.addListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {
        //TODO 动画开始前的操作
    }

    @Override
    public void onAnimationEnd(Animator animation) {
        //TODO 动画结束的操作
    }

    @Override
    public void onAnimationCancel(Animator animation) {
       //TODO 动画取消的操作
    }

    @Override
    public void onAnimationRepeat(Animator animation) {
        //TODO 动画重复的操作
    }
    });

如果我们需要简单动画执行过程中的变化可以使用AnimatorUpdateListener

 objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float value = (float) animation.getAnimatedValue();
        //可以根据自己的需要来获取动画更新值。
        Log.e("AnimatorUpdateListener", "the animation value is " + value);
    }
    });

总结:

本篇主要先简单认识一下属性动画,以及利用属性动画实现补间动画。后续会对属性动画进行进一步的学习。

时间: 2024-10-13 23:31:44

Android动画效果之初识Property Animation(属性动画)(三)的相关文章

(转)Android Property Animation 属性动画

版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/jjwwmlp456/article/details/38518657 目录(?)[-] Property Animation介绍 3.0以后新增了一些View的属性 ObjectAnimator 对象动画 ObjectAnimator的xml实现 xml定义动画 代码加载 动画xml AnimatorSet 动画集 xml定义动画集 代码加载 动画集的xml PropertyValuesHolder

Android(java)学习笔记264:Android下的属性动画高级用法(Property Animation)

1. 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画进行了很大幅度的改进,之前补间动画可以做到的属性动画也能做到,补间动画做不到的现在属性动画也可以做到了.因此,今天我们就来学习一下属性动画的高级用法,看看如何实现一些补间动画所无法实现的功能. 2. ValueAnimator的高级用法: 在上篇文章中介绍补间动画缺点的时候有提到过,补间动画是只能对

【Property Animator 属性动画】

1.  为什么要使用属性动画? Google在3.0以后推出了属性动画,之所以会出属性动画,是因为传统动画在对象交互方面存在缺陷. 可以通过一个很经典的例子来发现属性动画和传统动画的区别. 先来看一个现象: 可以观察到: 传统动画播放完毕后,点击显示的view是没有响应产生的.说明view的属性并没有因为动画的变化而变化. 属性动画播放完毕后,点击显示的view是有响应产生的.说明view的属性跟随动画的变化改变了. 上述效果的实现的实现关键代码: //传统动画 TranslateAnimati

JavaScript之jQuery-5 jQuery 动画效果(隐藏和显示、自定义动画、并发与排列效果)

一.jQuery 隐藏和显示 基本显示.隐藏效果 - show() / hide() - 作用: 通过同时改变元素的宽度和高度来实现显示或隐藏 - 用法: $obj.show(执行时间,回调函数); 执行时间:slow,normal,fast或毫秒数 回调函数:动画执行完毕之后要执行的函数 滑动式动画效果 - slideDown() / slideUp() - 作用: 通过改变高度来实现显示或者隐藏的效果 - 用法同 show() / hidden() 淡入淡出式动画效果 - fadeIn()

动画效果(一)-渐变动画

第1节 概述 在安卓系统中,为了界面或者其中的组件在切换.改变的时候显得自然生动.具有流动性的美感,就给它们添加了动画的效果. 例如图片切换的时候,前一张图片淡出,后一张图片淡入. 动画分了三类: frame动画(逐帧动画). property动画(属性动画). tween动画(渐变动画). 逐帧动画有点像播放电影,它把很多图片串起来,按照顺序一张一张显示,通过播放形成动画效果: 属性动画是对控件某个属性使用的动画,例如一个按钮的宽度要从窄设置到宽,而我们希望它的宽度调整的时候,能看到它从窄到宽

jQuery事件机制,动画效果,工具和其他操作(三)

jQuery事件机制 1 事件操作 1.1 页面载入事件 $(document).ready(function(){ // 在这里写你的代码... }); 或者 $(function($) { // 你可以在这里继续使用$作为别名... }); 1.2 事件绑定 on(eve,[sel],[data],fn) 1.7+ 在选择元素上绑定一个或多个事件的事件处理函数 bind(type,[data],fn) 3.0- 请使用on() one(type,[data],fn) 为每一个匹配元素的特定事

从零开始学android&lt;数据存储(1)SharedPreferences属性文件.三十五.&gt;

在android中有五种保存数据的方法,分别是: Shared Preferences Store private primitive data in key-value pairs. 对应属性的键值对属性文件存储 Internal Storage Store private data on the device memory. 设备内存存储 External Storage Store public data on the shared external storage. 外部存储器存储,如内

动画效果 详情请看 jQuery api 动画收放 slideUp slideDown 通过id class 来设置 jQuery实现效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #boss{ margin:auto ; width: 500px; background-color:#C48698; border: 2px; } #bos

Android动画效果之Frame Animation(逐帧动画)

前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame Animation(逐帧动画). 其他几种动画效果: Android动画效果之Tween Animation(补间动画) Android动画效果之Frame Animation(逐帧动画) Android动画效果之初识Property Animation(属性动画) Android动画效果之Prop