美文网首页
加载SVG动画

加载SVG动画

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

    收集参考备录，方便自己查阅，仅供学习参考
    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动画

          本文链接：https://www.haomeiwen.com/subject/jlgkoctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|加载SVG动画|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！