专栏首页HLQ_StruggleAnimatedVectorDrawable学习以及使用

AnimatedVectorDrawable学习以及使用

前言

上一篇,我们了解了SVG以及静态Vector图像使用,坐标地址如下:

聊聊有关SVG那些事儿

而今天,我们了解一下有关使用动态Vector使用的那点事儿。

PS:主要注意的是,动态Vector图像只能在Api 21以上使用,So,如果想要低版本也使用的话,必须做兼容,否则直接奔溃了~

So,一起来看本文目标。

本文目标

通过举例说明如何使用动态Vector图像以及如何兼容低版本,从而让你不经意间学会使用要领。

实现效果

Come on,baby~

首先,我们生成一个原图,也就是我们的小星星,我们设置宽高按照400等份平分,其次,设置我们中心点坐标为200,也就是正好一半,而动画的执行也就是从图像的中心点进行运动,而具体动画又可以具体到某个Path,也就是说,假设我们的静态Vector图像是由俩个Path组成,我们可以根据设置不同的name去区别对待(设置不同的动画效果),具体代码如下:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="300px"
    android:height="300px"
    android:viewportHeight="400"
    android:viewportWidth="400">

    <group
        android:name="star_group"
        android:pivotX="200" // 由于宽度按照400等比例平分,设置一半大小也就意味着从中心进行动画效果
        android:pivotY="200"
        android:scaleX="1.0"
        android:scaleY="1.0">

        <path
            android:name="star"
            android:fillColor="#FF00FF"
            android:pathData="M 200.30535,69.729172
            C 205.21044,69.729172 236.50709,141.52218 240.4754,144.40532
            C 244.4437,147.28846 322.39411,154.86809 323.90987,159.53312
            C 325.42562,164.19814 266.81761,216.14828 265.30186,220.81331
            C 263.7861,225.47833 280.66544,301.9558 276.69714,304.83894
            C 272.72883,307.72209 205.21044,268.03603 200.30534,268.03603
            C 195.40025,268.03603 127.88185,307.72208 123.91355,304.83894
            C 119.94524,301.9558 136.82459,225.47832 135.30883,220.8133
            C 133.79307,216.14828 75.185066,164.19813 76.700824,159.53311
            C 78.216581,154.86809 156.16699,147.28846 160.13529,144.40532
            C 164.1036,141.52218 195.40025,69.729172 200.30535,69.729172 z" />
    </group>
</vector>

接下来,我们着手实现我们的动画效果。需要在res下创建animator目录。

我们看效果图,可以很清晰的看到,首先动画的轨迹为:

星星 ---> 勺子 再由 勺子 ---> 星星

也就是切换动画,而这个动画会具有俩个属性:

  • 从A到B,从B到A,动画的执行有个先后顺序;
  • 仔细观察,变换的过程中,会有一点点加速的效果,考虑添加插值器

具体如下:star_shap.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:ordering="sequentially"
    android:shareInterpolator="true">
    <!-- 如果俩个SVG进行动画,则俩个节点需要一致 -->
    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:valueFrom="@string/svgStarStr"
        android:valueTo="@string/svgFoodStr"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:valueFrom="@string/svgFoodStr"
        android:valueTo="@string/svgStarStr"
        android:valueType="pathType" />
</set>

接下来,在执行的过程中除了俩个图像的交替,其中还掺杂着俩种动画:

  • 缩放:x,y轴同时进行;
  • 旋转

这里需要注意这俩个动画的执行同样也是有着顺序。

关键代码如下:star_ratate.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <set android:ordering="together">
        <objectAnimator
            android:duration="300"
            android:propertyName="scaleX"
            android:valueFrom="0.0"
            android:valueTo="1.0" />
        <objectAnimator
            android:duration="300"
            android:propertyName="scaleY"
            android:valueFrom="0.0"
            android:valueTo="1.0" />
    </set>
    <objectAnimator
        android:duration="500"
        android:propertyName="rotation"
        android:valueFrom="0"
        android:valueTo="360" />
</set>

接下来,我们要为我们的星星添加动画,让它动起来~

底图就是我们的星星,还记得我们一开始添加的name么,一个是给path,一个是group,分别设置即可。

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vd_star">

    <target
        android:name="star_group"
        android:animation="@animator/star_rotate" />

    <target
        android:name="star"
        android:animation="@animator/star_shape" />

</animated-vector>

为ImageView直接设置src即可:

   <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:onClick="getAnim"
        android:src="@drawable/animate_star" />

最后,在MainActivity中进行如下操作:

   public void getAnim(View view){
        ImageView imageView=(ImageView)view;
        Drawable drawable=imageView.getDrawable();
        if(drawable instanceof Animatable){
            ((Animatable)drawable).start();
        }
    }

到此动动小手,点击运行瞅瞅~

还记得我们直接创建animated-vector文件时,提示的警告么?我们先一起来看下:

下面将进行详细说明。

兼容性开发怎么玩

上图很easy,提示我们这个东西只能在Android api 21以上使用,也就是5.0,当然你可以直接忽略此警告,直接运行在5.0以上的api毫无问题,当然,最好还是将此文件放置在drawable-v21目录下,但是,如果在5.0一下运行,则会出现不可思议的问题,详情看下图:

报出的异常如下:

那么如何在低版本运行呢?

找了很多的方式,暂时没有找到,希望各位老帖,如有好的解决方案,希望告知下~

GitHub查看地址

https://github.com/HLQ-Struggle/SVGStudy

历史文章

极光推送使用心得以及记录 一个key玩转第三方服务(微信支付、某某地图) GitHub学习篇之如何创建代码库以及删除代码库(简单易用)

本文分享自微信公众号 - 贺利权(hlq_struggle),作者:贺利权

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-04

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 掌握小技巧,助你Coding更上一层楼~

    话说前几天在网上浏览到一大牛写的关于Android布局优化的文章,看后感触很深,回过头看看自己写过的代码,发现还是有不少需要改进,今天找不到那天看的文章了,只能...

    HLQ_Struggle
  • 听说谷歌Baba更新了 Material UI ...

    Material Design,是谷歌在14年的IO大会上提出的一种新的理念,也被称为新的设计语言(也被称为“原材料设计”),称它为设计语言不为过,但是实际上,...

    HLQ_Struggle
  • 重走Android路之挑几个基本控件玩玩(上卷)

    Android为我们提供了很多UI样式,但是在实际开发中,我们往往会根据UI图去为我们选择的绝大部分的控件进行渲染,从而达到产品更加的美观。

    HLQ_Struggle
  • [Android 基础]为页面跳转添加旋转动画

    无意间看到一篇关于页面跳转动画效果的博文,在Android源码API demo中也有相似的实现(FlipAnimation),这里写文以记之,实现后的效果如下图...

    小海编码日记
  • 掌握小技巧,助你Coding更上一层楼~

    话说前几天在网上浏览到一大牛写的关于Android布局优化的文章,看后感触很深,回过头看看自己写过的代码,发现还是有不少需要改进,今天找不到那天看的文章了,只能...

    HLQ_Struggle
  • Android自定义Dialog对话框

    sr
  • Android动画基础 | 概述、逐帧动画、视图动画

    或者给<animation-list>添加android:oneshot="true"属性,也可实现:

    凌川江雪
  • Android 自定义Seekbar样式

    Xiaolei123
  • Android UI 设计技巧

    <merge/>标签帮助你排除把一个布局插入到另一个布局时产生的多余的View Group.如,你的被复用布局是一个垂直的线性布局,包含两个子视图,当它作为一个...

    提莫队长
  • Android自定义顶部标题栏

    本文实例为大家分享了Android自定义顶部标题栏展示的具体代码,供大家参考,具体内容如下

    砸漏

扫码关注云+社区

领取腾讯云代金券