首页 > 其他分享 >SVG动画之AnimatedVectorDrawable学习以及使用

SVG动画之AnimatedVectorDrawable学习以及使用

时间:2022-11-10 19:32:02浏览次数:63  
标签:动画 star name SVG AnimatedVectorDrawable 我们 android drawable


LZ-Says:伙计,一路走来,走散了一些人,留下了最真的人,切勿悲伤,切勿心寒。抬起头,微笑继续向前行~


SVG动画之AnimatedVectorDrawable学习以及使用_android


前言

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

​​Android Study 之 聊聊有关SVG那些事儿​​

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

PS:

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

So,一起来看本文目标。

本文目标

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

实现效果


SVG动画之AnimatedVectorDrawable学习以及使用_Vector_02

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文件时,提示的警告么?我们先一起来看下:


SVG动画之AnimatedVectorDrawable学习以及使用_android_03

下面将进行详细说明。

兼容性开发怎么玩

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


SVG动画之AnimatedVectorDrawable学习以及使用_animated-vector_04

报出的异常如下:


SVG动画之AnimatedVectorDrawable学习以及使用_animated-vector_05

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

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

GitHub查看地址

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


标签:动画,star,name,SVG,AnimatedVectorDrawable,我们,android,drawable
From: https://blog.51cto.com/u_13346181/5841991

相关文章

  • iOS开发_UITableViewCell动画
    -(void)tableView:(UITableView*)tableViewwillDisplayCell:(UITableViewCell*)cellforRowAtIndexPath:(NSIndexPath*)indexPath{cell.transform=CGA......
  • simpread-(128 条消息) 【three.js 学习笔记(1)】读取 blender 模型并导入动画_orangecs
    本文由简悦SimpRead转码,原文地址blog.csdn.net之前尝试过使用vtk.js在浏览器上绘制三维图形。其与VTKC++版接口类似,上手较快,但vtk.js相对更新较慢,接口功能不完善......
  • 学习笔记-Flutter 动画详解(一)
    Flutter动画详解(一)本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识。1.动画介绍动画对于App来说,非常的......
  • 学习笔记-Flutter 动画详解(二)
    Flutter动画详解(二)本文通过代码层面去分析Flutter动画的实现过程,介绍了Flutter中的Animation库以及Physics库。1.介绍本文会从代码层面去介绍Flutter动画,因此不会涉......
  • 动画系统-Legacy
    Legacy系统,也称为旧版动画系统,即用Animation控制动画(animationtype为Legacy),当动画效果不涉及交互时,可用Animation编辑器完成打开方式:window-Animation或CTRL+6 Anim......
  • C# GDI+ 画心形 跳动动画
    最近听说什么国产神剧的期中考试画心形题很火,打算跟风用C#复刻一下先看看效果:话不多说直接上代码publicForm1(){DoubleBuffered=tru......
  • CSS基础(八) --- 动画
    vw和100%的区别若没有出现滚动条,则二者相等若出现滚动条vw包含'滚动条'部分,窗口大小100%不包含'滚动条',占满剩余空间demo演示:未添加滚动条效果,......
  • 24个适合初学者练习的CSS 和 Javascript 动画效果案例
    英文|https://niemvuilaptrinh.medium.com/24-css-javascript-animation-effects-a4c5b6e98a59翻译|杨小爱在昨天的文章中,我跟大家分享了《​​40个适合初学者练习HTML......
  • 用SVG解决移动端1px的技巧
    今天介绍一个通过svg来实现移动端1px效果的小技巧SVG的描边方式通常我们在使用一些设计软件时,描边会有三种选择,分别是内描边、居中描边和外描边,比如photoshop那么,svg中的......
  • threejs FBXLoader 加载动画
    functioncreateObject(){constloader=newTHREE.FBXLoader();loader.load("Fish.fbx",function(object){object.mixer=newTHREE.AnimationMixer(obj......