Android动画基础详析 | 属性动画基础及ValueAnimator

简介: Android动画基础详析 | 属性动画基础及ValueAnimator

为什么要引入属性动画

  • 逐帧动画主要是用来实现动画的,

而补间动画才能实现控件的渐入渐出、移动、旋转和缩放效果;
属性动画是在Android 3.0时才引入的,之前是没有的。

既然补间动画和逐帧动画已经很全了,为什么还要引入属性动画呢?

  • 假设:如何利用补间动画来将一个控件的背景色在1分钟内从绿色变为红色

这个效果是没办法仅仅通过改变控件的渐入渐出、移动、旋转和缩放来实现的,
但却可以通过属性动画完美地实现。
**这就是要引入属性动画的第一个原因:
属性动画是为了弥补视图动画的不足而设计的,
能够实现补间动画无法实现的功能。**

  • 补间动画逐帧动画统称为视图动画

字面意思中可以看出,
两个动画只能对派生自View类控件实例起作用

属性动画
名字中可看出它作用于控件属性
正因为属性动画能够只针对控件某一个属性来做动画,
所以造就了它能单独改变控件某一个属性的,比如颜色
这就是属性动画能实现补间动画无法实现的功能的最重要的原因。

  • **视图动画仅能对指定的View实例控件做动画,

属性动画是通过改变控件某一属性值来做动画的。**

我们准备一个button和一个TextView,
首先给TextView控件添加了单击响应事件,
当单击该TextView时,会弹出Toast提示;
然后,
在单击按钮的时候,TextView控件开始向右下角移动。
从结果中可以看出,
**在移动前,单击TextView控件是可以弹出Toast提示的;
而在移动后,单击TextView控件则没有响应,
相反,单击TextView控件原来所在的区域会弹出Toast提示。
这就说明补间动画虽然能对控件做动画,
但是并没有改变控件内部的属性值。**

视图动画与属性动画的区别

  • 1.操作对象

    • 视图动画只能操作视图对象(各种组件、各种View、ViewGroup);
    • 属性动画可以操作任意对象(除了View,还可以是基本类型数据等);

      • 动画系统本质:给定一个初始值和一个终止值,

令对象从初始值到终止值做一个平滑的变化(变化过程可以变速、匀速、不规则速度)

    1. 属性的改变
    • 视图动画没有对属性做真正的改变,只是做出动画效果而已;

(位移动画后View的响应区没有改变;缩放动画结束后获取View的长宽其值亦没有改变)

- 属性动画能够做真正的属性改变;
    - 视图动画实现的效果,属性动画都能实现;

**从直观上来看,视图动画与属性动画有如下三点不同。
(1)引入时间不同:View Animation是在API Level 1时引入的;而Property Animation是在API Level 11时引入的,即从Android 3.0才开始有与Property Animation相关的API。
(2)所在包名不同:View Animation API在android.view.animation 包中,而Property Animation API在android.animation包中。
(3)动画类的命名不同:View Animation中的动画类命名都是XXXXAnimation,而Property Animation中的动画类命名都是XXXXAnimator。**


动画属性

  • 1 时长
  • 2 时间插值器
  • 3 重复次数以及重复模式
  • 4 动画集
  • 5 延迟

    • 属性动画干的事情,就是在一段时间内让属性值不断地做变化;

(变化过程可以变速、匀速、不规则速度),
一系列的属性改变即成就了一个动画;

  • 属性动画相关的类,

都被定义在了android.animation包当中,
包中有一个抽象类Animator,
它包含了以上提到的五个属性的相关方法;

  • 动画对象都是可悲开始、可被暂停、可被监听的;
  • Animator的子类

    • ValueAnimator 控制值的变化;

属性动画干的事情,就是在一段时间内让属性值不断地做变化;
ValueAnimator 就是令这个属性值不断地做变化的驱动;


ValueAnimator

在上篇博客Android动画基础详析 | 概述、逐帧动画、视图动画(附诸多实际运行效果动图)的基础上我们新建一个property包和一个PropertyActivity:

activity_property.xml:

<?xml version="1.0" encoding="utf-8"?>
<RealativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".property.PropertyActivity">

    <Button
        android:id="@+id/btnValueAnimator"
        android:text="Go"
        android:onClick="onClick"
        android:layout_width = "match_parent"
        android:layout_height= "wrap_content"/> 

</RealativeLayout>

PropertyActivity.java:

public class PropertyActivity extends AppCompatActivity {

    private static final String TAG = "PropertyActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_property);
    }

    public void onClick(View view){
        switch (view.getId()){
            case R.id.btnValueAnimator:
                ValueAnimator valueAnimator = ValueAnimator.ofInt(0,100);//ValueAnimator的正态方法ofInt,驱动整型数值
                valueAnimator.setDuration(100);//设置时长
                //设置属性刷新监听器
                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        //通过animation对象可以获取诸多动画相关属性

                        //获取当前的动画变化完成度,范围 0.0 - 1.0,0.0表示刚开始, 1.0表示完成
                        float animatedFracion = animation.getAnimatedFraction();
                        //获取当前状态基于正态方法的始末参数间的插值,强制转换的类型就看正态方法的数据类型;
                        int animatedValue = (int)animation.getAnimatedValue();
                        //打印这两个参数,其中%.3f即保留小数点后三位
                        Log.d(TAG, "onAnimationUpdate: "
                                + String.format("%.3f %d", animatedFracion,animatedValue));
                    }
                });
                valueAnimator.start();//开始动画
                break;
        }
    }
}

运行代码:

第一列数据是动画变化完成度,第二列数据是插值,
我们可以看到打印出来的值并不是线性的,???
因为ValueAnimator默认的插值器不是匀速的;???
下面给ValueAnimator设置插值器即可:

...
valueAnimator.setDuration(100);//设置时长
                valueAnimator.setInterpolator(new LinearInterpolator());//设置插值器
                //设置属性刷新监听器
...


ValueAnimator的简单使用案例

  • ValueAnimator.ofFloat(0f,400f,50f,300f)

构造了一个比较复杂的动画渐变,
值从0变到400,再回到50,最后变成300,
通过getAnimatedValue()函数来获取当前运动点的值,
在得到当前运动点的值以后,
通过layout()函数将TextView移动到指定位置即可

  • **ValueAnimator只负责对指定值区间进行动画运算;

我们需要对运算过程进行监听,然后自己对控件执行动画操作。**

  • **ofInt()与ofFloat()的唯一区别就是传入的数值类型不一样,ofInt()函数需要传入Integer类型的参数,而ofFloat()函数则需要传入Float类型的参数。

它们的参数类型都是可变长参数,所以我们可以传入任何数量的值;
传进去的值列表就表示动画时的变化范围,
比如ofInt(2,90,45)就表示从数字2变化到数字90再变化到数字45,
所以我们传进去的数字越多,
动画变化就越复杂。**


  • 为什么通过getAnimatedValue()函数来获取当前valueAnimator产生的值的时候,需要转换成Integer/Float类型?
getAnimatedValue()函数的声明 Object getAnimatedValue();
它返回的是Object原始类型,
那我们怎么知道要将它转换成什么类型呢?

注意,
如果我们在设定动画初始值时使用的是 ofFloat()函数,
则每个值的类型必定是 Float类型,
我们获取到的类型也必然是 Float类型。

同样,如果我们使用 ofInt()函数设定动画初始值,
那么通过 getAnimatedValue()函数获取到的值
就应该转换为 Integer类型。



常用函数汇总
  • setRepeatCount(int value)函数用于设置动画循环次数,

设置为0表示不循环,
设置为ValueAnimation.INFINITE表示无限循环。

  • cancel()函数用于取消动画。
  • setRepeatMode(int value)函数用于设置循环模式,

当取值为ValueAnimation.RESTART时,表示正序重新开始;
当取值为ValueAnimation.REVERSE时,表示倒序重新开始。

  • **注意:重复次数为INFINITE(无限循环)的动画,

当Activity结束的时候,必须调用cancel()函数取消动画,
否则动画将无限循环,从而导致View无法释放,
进一步导致整个Activity无法释放,最终引起内存泄漏。**

监听器
  • animator.addUpdateListener,用于监听动画过程中值的实时变化。

其实在ValueAnimator中,共有两个监听器:

  • 当动画开始时,会通过onAnimationStart()函数返回;

在每一次重复时,都会调用一次onAnimationRepeat()函数;
在调用cancel()函数取消动画时,会通过onAnimationCancel()函数返回;
在动画终止时,会调用onAnimationEnd()函数通知用户;

移除监听器
  • removeListener(AnimatorListener listener)函数

用于在Animator中移除指定的监听器;

  • removeAllListeners()函数

用于移除Animator中所有的监听器。

其他函数

  • setStartDelay(long startDelay)函数非常容易理解,就是设置延时多久后动画开始。
  • clone()函数就是复制出来一个完全一样的新的ValueAnimator实例,

对原来的ValueAnimator是怎么处理的,
在这个新的实例中也采用相同的处理方式;

**至此,补充一个实战:
自定义View实战 | 弹跳的loading效果
一个主要是由ValueAnimator实现的自定义View**








相关文章
|
7月前
|
Android开发 开发者
Android利用SVG实现动画效果
本文介绍了如何在Android中利用SVG实现动画效果。首先通过定义`pathData`参数(如M、L、Z等)绘制一个简单的三角形SVG图形,然后借助`objectAnimator`实现动态的线条绘制动画。文章详细讲解了从配置`build.gradle`支持VectorDrawable,到创建动画文件、关联SVG与动画,最后在Activity中启动动画的完整流程。此外,还提供了SVG绘制原理及工具推荐,帮助开发者更好地理解和应用SVG动画技术。
355 30
|
7月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
549 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
7月前
|
API Android开发 开发者
Android颜色渐变动画效果的实现
本文介绍了在Android中实现颜色渐变动画效果的方法,重点讲解了插值器(TypeEvaluator)的使用与自定义。通过Android自带的颜色插值器ArgbEvaluator,可以轻松实现背景色的渐变动画。文章详细分析了ArgbEvaluator的核心代码,并演示了如何利用Color.colorToHSV和Color.HSVToColor方法自定义颜色插值器MyColorEvaluator。最后提供了完整的源码示例,包括ColorGradient视图类和MyColorEvaluator类,帮助开发者更好地理解和应用颜色渐变动画技术。
253 3
|
7月前
|
Android开发 开发者
Android SVG动画详细例子
本文详细讲解了在Android中利用SVG实现动画效果的方法,通过具体例子帮助开发者更好地理解和应用SVG动画。文章首先展示了动画的实现效果,接着回顾了之前的文章链接及常见问题(如属性名大小写错误)。核心内容包括:1) 使用阿里图库获取SVG图形;2) 借助工具将SVG转换为VectorDrawable;3) 为每个路径添加动画绑定属性;4) 创建动画文件并关联SVG;5) 在ImageView中引用动画文件;6) 在Activity中启动动画。文末还提供了完整的代码示例和源码下载链接,方便读者实践操作。
364 65
|
7月前
|
XML Java Maven
Android线条等待动画JMWorkProgress(可添加依赖直接使用)
这是一篇关于Android线条等待动画JMWorkProgress的教程文章,作者计蒙将其代码开源至GitHub,提升可读性。文章介绍了如何通过添加依赖库使用该动画,并详细讲解了XML与Java中的配置方法,包括改变线条颜色、宽度、添加文字等自定义属性。项目已支持直接依赖集成(`implementation &#39;com.github.Yufseven:JMWorkProgress:v1.0&#39;`),开发者可以快速上手实现炫酷的等待动画效果。文末附有GitHub项目地址,欢迎访问并点赞支持!
235 26
|
7月前
|
Android开发 开发者
Android自定义view之围棋动画(化繁为简)
本文介绍了Android自定义View的动画实现,通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画,借助布尔值控制动画流程。第二个案例以围棋动画为例,从简单的小球直线运动到双向变速运动,最终实现循环动画效果。代码结构清晰,逻辑简明,展示了如何化繁为简实现复杂动画,帮助读者拓展动态效果设计思路。文末提供完整源码,适合初学者和进阶开发者学习参考。
145 0
Android自定义view之围棋动画(化繁为简)
|
7月前
|
Java Android开发 开发者
Android自定义view之围棋动画
本文详细介绍了在Android中自定义View实现围棋动画的过程。从测量宽高、绘制棋盘背景,到创建固定棋子及动态棋子,最后通过属性动画实现棋子的移动效果。文章还讲解了如何通过自定义属性调整棋子和棋盘的颜色及动画时长,并优化视觉效果,如添加渐变色让白子更明显。最终效果既可作为围棋动画展示,也可用作加载等待动画。代码完整,适合进阶开发者学习参考。
164 0
|
2月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
323 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
2月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
295 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
2月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
677 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡