返回顶部
首页 > 资讯 > 移动开发 >Android高级动画篇之SVG矢量动画范例
  • 754
分享到

Android高级动画篇之SVG矢量动画范例

2024-04-02 19:04:59 754人浏览 八月长安
摘要

目录效果视频目录结构SVG常用指令初始化状态效果图制作静态SVG图型动画变换动画黏合引用解决低版本异常问题效果视频 目录结构 SVG常用指令 L :为从当前点绘制到直线给定的点,

效果视频

目录结构

SVG常用指令

L :为从当前点绘制到直线给定的点,后面跟着的为x,y坐标

M :为将画笔移动到某一点,但只是移动画笔,并没有绘制过程,所有没有产生绘制动作

A :为绘制一段弧线,允许弧线不闭合

初始化状态

效果图

制作静态SVG图型

首先在drawablw目录中建立一个svg_pic.xml文件夹

分别给两条直线名为Path1和Path2


<vector xmlns:Android="Http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

    <group>
        <path
            android:name="path1"
            android:pathData="
            M 20,80
            L 50,80 80,80"
            android:strokeColor="#cc0099"
            android:strokeLineCap="round"
            android:strokeWidth="5"/>

        <path
            android:name="path2"
            android:pathData="
            M 20,20
            L 50,20 80,20"
            android:strokeColor="#cc0099"
            android:strokeLineCap="round"
            android:strokeWidth="5"/>
    </group>

</vector>

动画变换

在res目录下建立一个anim文件,在anim文件建立两个动画变化文件,分别为cross_anim1.xml和cross_anim2.xml
其中的valueFrom与valueTo属性分别对应了变换的起始坐标

cross_anim1.xml


<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:valueFrom="M 20,80 L 50,80 80,80"
        android:valueTo="M 20,80 L 50,50 80,80"
        android:valueType="pathType"
        android:interpolator="@android:anim/bounce_interpolator">
    </objectAnimator>
</set>

cross_anim2.xml


<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <objectAnimator
        android:duration="500"
        android:interpolator="@android:anim/bounce_interpolator"
        android:propertyName="pathData"
        android:valueFrom="
            M 20,20
            L 50,20 80,20"
        android:valueTo="
            M 20,20
            L 50,50 80,20"
        android:valueType="pathType"/>
</set>

动画黏合

最好通过animated-vector进行粘合,在drawable目录下创建link_anim.xml文件
drawable绑定svg静态图型的初始状态
target将两条直线的样式与变换进行绑定


<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/svg_pic">
    <target android:name="path1" android:animation="@anim/cross_anim1"/>
    <target android:name="path2" android:animation="@anim/cross_anim2"/>
</animated-vector>

引用


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ImageView
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/link_anim"
        android:onClick="anim"/>
</LinearLayout>

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

解决低版本异常问题

在build.gradle文件的defaultConfig中添加如下语句


 vectorDrawables.useSupportLibrary = true

到此这篇关于Android高级动画篇之SVG矢量动画范例的文章就介绍到这了,更多相关Android 矢量动画内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Android高级动画篇之SVG矢量动画范例

本文链接: https://lsjlt.com/news/157064.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作