专栏首页老欧说安卓Android开发笔记(一百四十五)仿应用宝的垃圾清理动画

Android开发笔记(一百四十五)仿应用宝的垃圾清理动画

除了动画监听器,动画组合也是各类动画常见的用法,比如把几个补间动画组合起来,就形成了集合动画AnimationSet;把几个属性动画组合起来,就形成了属性动画组合AnimatorSet。那么能否把几个矢量动画在时间上并行组合起来,也形成一种矢量动画组合呢? 比如应用宝的垃圾清理动画,它的初始画面由三个深红色的月牙环绕组成,效果如下图所示:

然后在垃圾清理的过程中,这三个月牙一边转,填充色也一边渐变,月牙转圈动画结束之时,其内部的颜色也从深红色变成了亮绿色,效果下图所示:

只看静态截图还有点抽象,还是观看具体的动画方便理解,下面的动图展示了月牙转动之时、颜色也随之改变的完整过程。

我们知道矢量动画AnimatedVectorDrawable只能由xml文件定义,以支付成功动画的xml描述文件为例,根节点是animated-vector,下级节点是target,完整的xml文件内容如下所示:

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_pay_circle_white">
    <target
        android:name="circle"
        android:animation="@anim/anim_pay" />
</animated-vector>

一般animated-vector下面只有一个target节点,那么如果下面挂了好几个target节点会怎么样呢?接下来就来探讨探讨这么做会产生什么反应。 首先对垃圾清理动画进行分解,一方面是月牙的旋转动画,另一方面是月牙填充色的渐变动画。旋转角度和填充颜色其实都属于矢量图形的属性,按照属性动画的做法,只要指定这些属性的起始数值和终止数值,即可让系统自动实现动画的渲染过程。所以垃圾清理动画看起来是由这两个动画组合而成:月牙的旋转动画,以及月牙填充色的渐变动画。 在矢量图形描述中,旋转角度由group节点的rotation参数定义,填充色由path节点的fillColor参数定义,因此接着就要在月牙矢量图形描述中分别定义group节点和path节点。为节约篇幅,下面只给出了第一个月牙图形的矢量定义,第二个和第三个月牙的矢量定义与之类似,仅在pathData的路径数据上有所区别。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100"
    android:width="100dp" >
    <group
        android:name="clearGroupOne"
        android:pivotX="50"
        android:pivotY="50"
        android:rotation="0" >
        <path
            android:name="clearPathOne"
            android:fillColor="#ff0000"
            android:pathData="
            M 10,50
            A 40 40 60 0 1 50 10
            A 40 40 60 0 0 25 55
            A 10 10 60 0 1 10 50"
            android:strokeAlpha="1"
            android:strokeColor="@color/transparent"
            android:strokeLineCap="round"
            android:strokeWidth="1" />
    </group>
    <!--此处省略第二个和第三个月牙的矢量描述-->
</vector>

然后依据前面的分析,构造两个属性动画的行为描述,下面是月牙旋转动画的xml描述(改变rotation属性的数值):

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:interpolator/linear"
    android:propertyName="rotation"
    android:valueFrom="90"
    android:valueTo="1080"
    android:valueType="floatType" />

下面是月牙填充色渐变动画的xml描述(改变fillColor属性的数值):

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:interpolator/linear"
    android:propertyName="fillColor"
    android:valueFrom="#aa0000"
    android:valueTo="#66ff66"
    android:valueType="colorType" />

接着在矢量动画的xml描述文件中加入各个动画单位的目标,每个月牙都有旋转和颜色渐变两个动画单位,整个垃圾清理界面有三个月牙,那么总共就需要六个动画单位,于是animated-vector节点下面得补充六个target节点,完整的矢量动画描述如下所示:

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_rubbish_clear">
    <target
        android:name="clearGroupOne"
        android:animation="@anim/anim_clear_group" />
    <target
        android:name="clearPathOne"
        android:animation="@anim/anim_clear_path" />
    <target
        android:name="clearGroupTwo"
        android:animation="@anim/anim_clear_group" />
    <target
        android:name="clearPathTwo"
        android:animation="@anim/anim_clear_path" />
    <target
        android:name="clearGroupThree"
        android:animation="@anim/anim_clear_group" />
    <target
        android:name="clearPathThree"
        android:animation="@anim/anim_clear_path" />
</animated-vector>

最后由代码控制矢量动画的播放,点击播放按钮时执行下列代码,即可看到文章开头的垃圾清理动画效果了。

	iv_clear.setImageResource(R.drawable.animated_rubbish_clear);
	Drawable drawable = iv_clear.getDrawable();
	if (drawable instanceof AnimatedVectorDrawable) {
		((AnimatedVectorDrawable) drawable).start();
	}

点此查看Android开发笔记的完整目录

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android开发笔记(一百二十七)活用提示窗Toast和Snackbar

    大家平时都经常用Toast,可是你是否发现,系统默认的Toast样式太过单调乏味呢?其实Toast的界面也允许开发者自行定制,只要定义好提示窗的布局文件,即...

    用户4464237
  • Android开发笔记(一百三十二)矢量图形与矢量动画

    与水波图形RippleDrawable一样,矢量图形VectorDrawable也是Android5.0之后新增的图形类。矢量图不同于一般的图形,它是由一系...

    用户4464237
  • Android开发笔记(一百三十三)导航视图NavigationView

    很多App都有个人中心的侧滑菜单,通常在页面左侧边缘右拉时,即可弹出个人中心的菜单页面。对于Android来说,侧滑功能用到了抽屉布局DrawerLayout...

    用户4464237
  • Android 基础动画之 scale 渐变缩放

    和尚最近在学习 ViewPager 的小动画,说来惭愧,工作这么久了一直没有认真了解过动画这部分,今天特意学习一下 Android 的基本动画。

    阿策
  • 创建一个Android项目

    Generate Layout File勾选的话会默认创一个默认的布局,launcher Activity只的是把当前的类当做主活动

    Dream城堡
  • Android开发(35) 使用android_serialport_api 操作串口斑马打印机

    使用安卓设备操作串口的问题。 我找到一个框架:android_serialport_api,这个框架被托管在:

    zhangyunfeiVir
  • 第一个Android应用Android应用界面开发

    给项目取名First Application 主界面命名FirstAty,xml文件命名就自动使用activity_first_aty吧。

    爱因斯坦福
  • 实现Activity滑动退出

    很多应用在二级详情页面加入了滑动退出activity的效果,很方便,心血来潮,想着自己也来实现这个效果,就当做练手吧。

    三好码农
  • 安卓下滑渐显标题栏

    第一步:导入自定义ScrollView的类 ObservableScrollView.Java

    用户4458175
  • Material Design整理(六)——SearchView及FlexboxLayout

    蜻蜓队长

扫码关注云+社区

领取腾讯云代金券