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

2024-08-03 14:37:13

效果视频

目录结构

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 矢量动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Android动画之TranslateAnimation用法案例详解

我们在实际的开发过程中,有很多地方需要使用TranslateAnimation,本文是爱站技术频道小编为大家做的简单介绍,下面是详解Android 动画之TranslateAnimation应用的参数说明,希望对你学习这方面知识有帮助! android中提供了4中动画: AlphaAnimation 透明度动画效果 ScaleAnimation 缩放动画效果 TranslateAnimation 位移动画效果 RotateAnimation 旋转动画效果本节讲解TranslateAnimati
Android中Activity过渡动画的实例讲解

目录前言分解动画效果视频解析滑动动画效果视频解析淡出动画效果视频解析共享元素共享单个元素解析共享多个元素效果视频全部代码总结前言以前Activty之间得跳转非常生硬,自Android.5X后,Google对Activity的切换设计更多丰富的动画效果. Android 5.X提供了三种Transition类型,具体如下: ✧进入:一个进人的过渡动画决定Activity中的所有的视图怎么进入屏幕. ✧退出:一个退出的过渡动画决定-个Activity 中的所有视
Android activity动画不生效原因及解决方案总结

activity动画方式在AndroidMenifest中添加activity的动画属性windowAnimationStyle <item name="android:windowAnimationStyle">@style/anim_fade</item> 在activity代码中添加 overridePendingTransition overridePendingTransition(int enterAnim,int exitAnim) 问题汇总一
Android 帧动画使用详情

目录 Android 帧动画 1.帧动画 2.使用背景图片 3.使用src Android 帧动画 1.帧动画使用一系列不同的图片,然后像一卷胶卷一样按顺序播放,这是一种传统的动画,也可称为帧动画.也可以比喻为像一卷胶卷一样按顺序播放. 播放起来,有点像在看gif图. 本文介绍使用AnimationDrawable类来实现动画效果. 为了开发方便,我们可以在xml中指定动画各个帧的信息. 2.使用背景图片这是第一个例子.我们先准备4张图片(图片请自备)放进res/drawable/中. 在这
Android实现旋转动画的两种方式案例详解

目录练习案例效果展示前期准备自定义 View java代码编写方法一方法二易错点总结: 练习案例视差动画 - 雅虎新闻摘要加载效果展示前期准备第一步:准备好颜色数组 res => values => colors.xml <color name="orange">#FF9600</color> <color name="aqua">#02D1AC</color> <color n
Android 矢量室内地图开发实例

矢量室内地图开发因为公司项目的需要,需要开发一套室内地图,并实现路线的规划功能.因为之前没做过这方面的开发,相关的资料也比较少,所以只能一个人去摸索.刚开始我是使用一般的位图去当作的地图,但是这个也让我在后面吃了不少的苦头. 我们知道地图一般都会有缩放和拖拽等功能,正当我把一样利用位图开发的地图样例时,我发现了不少的问题: 1.位图缩放会失真: 2.图片加载比较慢: 3.会导致客户端内存溢出 ... 因为这些问题,我不得不放弃这种方法.要解决上面的问题只能使用矢量图进行开发了,于是我使用了HT
Android如何实现翻转动画效果（卡片翻转）

目录前言需求一.先介绍三个插值器二.实现步骤 1.效果图 2.布局 3.逻辑判断(是否隐藏) 4.翻转动画 5.bug出现 6.bug解决三.源码四.总结前言最近好友问计蒙翻转动画,恰好在大二那年看Android Api Demo时记了笔记,由此写一篇文章. 需求屏幕右滑事件触发卡片的翻转效果 ,为了方便,在例子中将右滑事件改成按钮点击事件老规矩,最后有源码一.先介绍三个插值器 LinearInterpolator() 其变化速率恒定 AccelerateInter
Android实现简单点赞动画

思路找到Activity中DecorView的RootView 确定点赞控件位于屏幕中的坐标值将点赞效果View加入到RootView中, 给效果View添加自己想要的动画效果. 重复点击时候, 需要将效果View先移除掉再重新加入到RootView中. 代码 /** * 普通点赞效果, 点击控件后出现一个View上浮 */ public class ViewLikeUtils { public interface ViewLikeClickListener {
Android实现雅虎新闻摘要加载视差动画效果

基础知识继 Android实现旋转动画的两种方式我们了解了 Android实现旋转的两种基本方法之后,我们来写一个综合案例效果展示代码实现实现思路从效果中我们可以看到可以将其分为三个动画: 1.旋转动画(Android实现旋转动画的两种方式) 2.聚合动画 3.扩展动画代码展示 package com.wust.mydialog; import android.animation.Animator; import android.animation.AnimatorListene
Android高级动画篇之SVG矢量动画范例

目录效果视频目录结构 SVG常用指令初始化状态效果图制作静态SVG图型动画变换动画黏合引用解决低版本异常问题效果视频目录结构 SVG常用指令 L :为从当前点绘制到直线给定的点,后面跟着的为x,y坐标 M :为将画笔移动到某一点,但只是移动画笔,并没有绘制过程,所有没有产生绘制动作 A :为绘制一段弧线,允许弧线不闭合初始化状态效果图制作静态SVG图型首先在drawablw目录中建立一个svg_pic.xml文件夹分别给两条直线名为Path1和Path2 <vec
Android高级UI特效仿直播点赞动画效果

本文给大家分享高级UI特效仿直播点赞效果-一个优美炫酷的点赞动画,具体实现代码大家参考本文. 效果图如下: 攻克难点: 心形图片的路径等走向心形图片的控制范围部分代码如下: 通过AbstractPathAnimator定义飘心动画控制器 @Override public void start(final View child, final ViewGroup parent) { parent.addView(child, new ViewGroup.LayoutParams(mConfig.
Android仿支付宝中余额宝的数字动画效果

实现效果图: 下面是具体代码,可直接复制: package com.lcw.rabbit.widget; import android.animation.ObjectAnimator; import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; import android.view.animation.AccelerateDecelerateInterpola
android仿爱奇艺加载动画实例

本篇文章介绍了android仿爱奇艺加载动画实例,具体代码如下: 效果图: 用到的知识点: Path ValueAnimator 如果对Path和ValueAnimator还不熟悉推荐去看这几个大神的Blog自定义view的目前讲的最适合我的文章 ,自定义view的详细教程和实践,这个也是教程和实践,感谢他们的付出!(希望大家可以认真看完,可以得到很多启发). 拆解动画一个圆先顺时针的慢慢画出来(圆不是一个闭合的圆) 这一步是一个组合动画,圆慢慢的消失,同时三角形顺时针旋转这里的难点主要就是
Android实现Reveal圆形Activity转场动画的完整步骤

前言 Activity的转场动画很早就有,但是太过于单调,样式也不好看,本文将给大家介绍了关于Android实现Reveal圆形Activity转场动画的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧一.效果二.知识点 CircularReveal动画.透明主题.转场动画(非必须) 三.方案假设有两个Activity A和B.Reveal圆形Activity转场动画效果先从A到B,那么基本方案如下: 确定要显示的圆形动画中心起点位置通过Intent将起点位置从A
Android列表实现单选点击缩放动画效果

recycleView单选的时候,一般的处理就是选中的item做个stroke或者字体颜色改变,但要提升用户体验就得加点动画了.也就是点击选中的元素放大,同时之前选中的item缩小,不便截gif图,只能放一张静态图,大家脑补脑补~ 图中的CheckBox,代码实现其实是imageview,它的选中.取消也是有动画的,不是控制visible,而是通过改变图片透明度来实现选中取消的. 具体看代码: import android.animation.ObjectAnimator; import and
Android Lottie实现中秋月饼变明月动画特效实例

目录前言 Lottie 案例尝试 1. 集成依赖 2. 添加 LottieAnimationView 加载网络资源 3. 加载本地资源 4. 循环播放 & 动画监听 5. 暂停 & 继续 & 取消小扩展 1. 硬件加速器 2. json 文件解析总结前言小菜在 Android 端进行动画处理时主要用的是 Android 自带的三种动画形式,今天小菜简单尝试通过 Airbnb Lottie 展示一个中秋月饼变明月的小动画: Lottie Lottie 动画是 Airbnb
Android Studio实现华为手机的充电动画效果

目录效果图修改文件清单具体实现根据系统原有的无线充电动画流程,新增有线充电气泡动画. 效果图修改文件清单 vendor/mediatek/proprietary/packages/apps/SystemUI/src/com/android/systemui/statusbar/phone/StatusBar.java vendor/mediatek/proprietary/packages/apps/SystemUI/res/layout/wired_charging_layout.x
Android TextView渐变颜色和方向及动画效果的设置详解

GradientTextView Github点我一个非常好用的库,使用kotlin实现,用于设置TexView的字体渐变颜色.渐变方向和动画效果添加依赖之前仓库发布在 jcenter,但是因为它即将不可用,近期已完成迁移.建议大家使用 mavenCentral 的配置. 使用 jcenter implementation 'com.williamyang:gradienttext:1.0.1' 使用 mavenCentral buildscript { repositories {