加载SVG动画

作者: 学习_猫 | 来源:发表于2019-12-26 14:07 被阅读0次

加载SVG动画
css svg 加载动画
js 动画
SVG学习--AnimatedVectorDrawable的使用
SVG 在 image 标签中的动态修改技巧
新手Android SVG矢量图动画进阶
svg合并
svg实现自定义路径动画
[整理]SVG Path Animations
Android图片之svg

收集参考备录，方便自己查阅，仅供学习参考
SVG基础

动画示例

android SVG动画

文件准备

1.在res/drawable 文件夹下编写svg文件：

toutiao_svg.xml


<?xml version="1.0" encoding="utf-8"?>

<vector xmlns:android="http://schemas.android.com/apk/res/android"

    android:width="200dp"

    android:height="200dp"

    android:viewportHeight="200"

    android:viewportWidth="200">

    <path

        android:name="tt_1"

        android:fillColor="#C2BFBF"

        android:pathData="

            M20,30

            L100,30

            M100,30

            L100,90

            M100,90

            L20,90

            M20,90

            L20,30"

        android:strokeColor="#C2BFBF"

        android:strokeLineCap="round"

        android:strokeWidth="6"/>

    <path

        android:name="tt_2"

        android:pathData="

            M120,30

            L180,30

            M120,60

            L180,60

            M120,90

            L180,90"

        android:strokeColor="#C2BFBF"

        android:strokeLineCap="round"

        android:strokeWidth="6"/>

    <path

        android:name="tt_3"

        android:pathData="

            M20,120

            L180,120

            M20,150

            L180,150

            M20,180

            L180,180"

        android:strokeColor="#C2BFBF"

        android:strokeLineCap="round"

        android:strokeWidth="6"/>

    <path

        android:pathData="

            M0,0

            L200,0

            M200,0

            L200,200

            M200,200

            L0,200

            M0,200

            L0,0"

        android:strokeColor="#C2BFBF"

        android:strokeLineCap="round"

        android:strokeWidth="6"/>

</vector>

2.对path：tt_1,tt_2,tt_3 设置变换路径动画：

tt_path_one.xml:


<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="sequentially"> //依次执行 pathData 位置变换

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,30

            L100,30

            M100,30

            L100,90

            M100,90

            L20,90

            M20,90

            L20,30"

        android:valueTo="

            M100,30

            L180,30

            M180,30

            L180,90

            M180,90

            L100,90

            M100,90

            L100,30" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M100,30

            L180,30

            M180,30

            L180,90

            M180,90

            L100,90

            M100,90

            L100,30"

        android:valueTo="

            M100,120

            L180,120

            M180,120

            L180,180

            M180,180

            L100,180

            M100,180

            L100,120"/>

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M100,120

            L180,120

            M180,120

            L180,180

            M180,180

            L100,180

            M100,180

            L100,120"

        android:valueTo="

            M20,120

            L100,120

            M100,120

            L100,180

            M100,180

            L20,180

            M20,180

            L20,120" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,120

            L100,120

            M100,120

            L100,180

            M100,180

            L20,180

            M20,180

            L20,120"

        android:valueTo="

            M20,30

            L100,30

            M100,30

            L100,90

            M100,90

            L20,90

            M20,90

            L20,30"/>

</set>

tt_path_two.xml:


<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="sequentially">

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M120,30

            L180,30

            M120,60

            L180,60

            M120,90

            L180,90"

        android:valueTo="

            M20,120

            L180,120

            M20,150

            L180,150

            M20,180

            L180,180" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,120

            L180,120

            M20,150

            L180,150

            M20,180

            L180,180"

        android:valueTo="

            M20,120

            L80,120

            M20,150

            L80,150

            M20,180

            L80,180" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,120

            L80,120

            M20,150

            L80,150

            M20,180

            L80,180"

        android:valueTo="

            M20,30

            L180,30

            M20,60

            L180,60

            M20,90

            L180,90" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueFrom="

            M20,30

            L180,30

            M20,60

            L180,60

            M20,90

            L180,90"

        android:valueTo="

            M120,30

            L180,30

            M120,60

            L180,60

            M120,90

            L180,90"

        android:valueType="pathType" />

</set>

tt_path_three：


<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="sequentially">

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,120

            L180,120

            M20,150

            L180,150

            M20,180

            L180,180"

        android:valueTo="

            M20,30

            L80,30

            M20,60

            L80,60

            M20,90

            L80,90" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,30

            L80,30

            M20,60

            L80,60

            M20,90

            L80,90"

        android:valueTo="

            M20,30

            L180,30

            M20,60

            L180,60

            M20,90

            L180,90" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,30

            L180,30

            M20,60

            L180,60

            M20,90

            L180,90"

        android:valueTo="

            M120,120

            L180,120

            M120,150

            L180,150

            M120,180

            L180,180" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M120,120

            L180,120

            M120,150

            L180,150

            M120,180

            L180,180"

        android:valueTo="

          M20,120

            L180,120

            M20,150

            L180,150

            M20,180

            L180,180" />

</set>

3.关联动画：

toutiao_anim.xml：


<?xml version="1.0" encoding="utf-8"?>

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

    xmlns:tools="http://schemas.android.com/tools"

    android:drawable="@drawable/toutiao_svg"

    tools:targetApi="lollipop">

    //路径tt_1的动画

    <target

        android:animation="@animator/tt_path_one"

        android:name="tt_1"/>



    //路径tt_2的动画

    <target

        android:animation="@animator/tt_path_two"

        android:name="tt_2"/>



    //路径tt_3的动画

    <target

        android:animation="@animator/tt_path_three"

        android:name="tt_3"/>

</animated-vector>

代码执行动画：


val animatedVectorDrawable = AnimatedVectorDrawableCompat.create(this, R.drawable.toutiao_anim)

        svg_iv.setImageDrawable(animatedVectorDrawable)

        val animatable = svg_iv.drawable as Animatable

        animatable.start()

或者


在布局文件设置：

android:src="@drawable/toutiao_anim"

在代码中：

val animatable = svg_iv.drawable as AnimatedVectorDrawable

or

val animatable = svg_iv.drawable as Animatable

    animatable.start()

多属性组合改变

tt_path_color.xml： 改变颜色


<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="sequentially">

    <objectAnimator android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="strokeColor"

        android:valueType="colorType"

        android:valueFrom="#C2BFBF"

        android:valueTo="#C2BF"/>

    <objectAnimator android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="strokeColor"

        android:valueType="colorType"

        android:valueFrom="#C2BF"

        android:valueTo="#FF00"/>

    <objectAnimator android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="strokeColor"

        android:valueType="colorType"

        android:valueFrom="#F00"

        android:valueTo="#0F0"/>

    <objectAnimator android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="strokeColor"

        android:valueType="colorType"

        android:valueFrom="#0F0"

        android:valueTo="#00F"/>

</set>

在toutiao_anim.xml中直接和上述动画关联一样即可

<target

        android:animation="@animator/tt_path_one"

        android:name="tt_1"/>

<target

        android:animation="@animator/tt_path_color"

        android:name="tt_1"/>

这样在改变路径的同时也改变线框的颜色

加载SVG动画
收集参考备录，方便自己查阅，仅供学习参考SVG基础 android SVG动画文件准备 1.在res/drawa...
css svg 加载动画
html
js 动画
通过计时器实现，坏处：动画未加载，计时器启动，影响性能 SVG 实现动画画布实现动画css3transition ...
SVG学习--AnimatedVectorDrawable的使用
之前我们演示的都是静态的SVG图片加载，其实这有点屈才了，其实通过属性动画的配合，svg还可以动起来前言
SVG 在 image 标签中的动态修改技巧
tag: Web; JavaScript; SVG; DOM; 动画 SVG 最近在项目中遇到了「带动画 SVG ...
新手Android SVG矢量图动画进阶
新手Android SVG矢量图动画进阶 Android中svg实现的svg动画效果(超简单,在Android中除...
svg合并
假如页面有多个svg图标要加载，多次加载不利，可将多个svg合并为一个加载如下有两个svg 将他们的前后缀改为s...
svg实现自定义路径动画
layout: posttitle: "svg自定义路径动画"subtitle: "svg ...
[整理]SVG Path Animations
SVG描边动画，使用了SVG图形中PATH标签的stroke特性制作的动画。为什么使用SVG？相对于其他的图片...
Android图片之svg
1.SVG是什么2.SVG优点3.SVG使用4.获取SVG5.封装使用6.SVG动画 1.SVG是什么？ SVG(...