专栏首页进击的多媒体开发Android自定义View-SVG动画

Android自定义View-SVG动画

1、SVG与Bitmap的区别:

SVG是可缩放矢量图形,全称Scalable Vector Graphics。经过数学计算利用直线和曲线绘制而成,无论怎么放大,都不会出现马赛克现象。可以使用Illustrator矢量图绘图软件来进行绘图。

Bitmap 是位图,由一个个像素点组成,放大后会出现马赛克。可以使用PhotoShop位图绘图软件来进行绘图。

2、SVG的优势:

1、使用xml格式定义图形,读取和修改的工具多。

2、不会失真,无需根据分辨率适配多套图标。

3、占用空间小。

4、可以转换为Path路径,与Path动画相结合,形成更丰富的动画。

3、静态SVG的使用

1、使用Android Studio转换美工提供的SVG文件为vector的xml文件:

Android Studio->File->New->Vector Asset->Local File->RTL->drawable/ic_love.xml

2、加载vector的xml文件:

<ImageView
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_width="100dp"
    android:src="@drawable/ic_love"
    android:layout_height="100dp"></ImageView>

4、动态SVG的使用

1、使用Android Studio转换美工提供的SVG文件为vector的xml文件:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="72dp"
    android:height="50dp"
    android:viewportWidth="72.0"
    android:viewportHeight="50.0">

    <path
        android:name="animate_logo_target"
        android:pathData="M60,5,L10,5,V15,A1,1,0,0,0,65,20,L65,10"
        android:strokeWidth="10"
        android:strokeColor="#03DAC5" />
</vector>

2、创建SVG对应的动画

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:propertyName="trimPathEnd"
    android:repeatCount="0"
    android:valueFrom="0"
    android:valueTo="1"
    android:valueType="floatType"/>

其中propertyName:

trimPathStart 属性表示截掉从起点到某个位置的部分,保留剩下的部分;

trimPathEnd 属性表示截掉从某个位置到终点的部分,保留剩下的部分。

3、启动动画

private void start() {
    AnimatedVectorDrawableCompat animatedVectorDrawableCompat = AnimatedVectorDrawableCompat.create(
            this, R.drawable.ic_logo
    );
    mIvSvgVectorAnimation.setImageDrawable(animatedVectorDrawableCompat);
    ((Animatable) mIvSvgVectorAnimation.getDrawable()).start();
}

5、Lottie加载SVG动画

Lottie可以轻松加载SVG动画,只需美工提供JSON文件即可,Lottie的GitHub地址:https://github.com/airbnb/lottie-android

1、test.json文件置于assets文件夹中。

2、编写布局控件:

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_height="wrap_content"
    app:lottie_loop="true"
    app:lottie_autoPlay="true" />

3、启动动画

private void initTest() {
    mLavGift.setAnimation("test.json");
    mLavGift.setRepeatCount(INFINITE);
    mLavGift.playAnimation();
}

6、SVGA加载SVG动画

SVGA可以轻松加载SVG动画,只需美工提供SVGA文件即可,SVGA的GitHub地址:https://github.com/svga/SVGAPlayer-Android

1、posche.svga置于assets文件夹中。

2、直接编写布局控件加载:

<com.opensource.svgaplayer.SVGAImageView
    android:layout_height="200dp"
    android:layout_width="200dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:source="love.svga"
    app:autoPlay="true"
    android:id="@+id/svga_test"/>

3、从assets中加载:

SVGAImageView svgaImageView = new SVGAImageView(this);
SVGAParser.Companion.shareParser().init(this);
SVGAParser parser = SVGAParser.Companion.shareParser();
parser = new SVGAParser(this);
parser.decodeFromAssets("posche.svga", new SVGAParser.ParseCompletion() {
    @Override
    public void onComplete(SVGAVideoEntity svgaVideoEntity) {
        SVGADrawable drawable = new SVGADrawable(svgaVideoEntity);
        svgaImageView.setImageDrawable(drawable);
        mFlSvga1.addView(svgaImageView );
        svgaImageView.startAnimation();
    }

    @Override
    public void onError() {

        System.out.println("解析错误decodeFromAssets");
    }
});

4、从url中加载:

SVGAImageView svgaImageView1 = new SVGAImageView(this);
SVGAParser parser1 = SVGAParser.Companion.shareParser();
parser1 = new SVGAParser(this);
URL url = new URL("https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true");
parser1.decodeFromURL(url, new SVGAParser.ParseCompletion() {
    @Override
    public void onComplete(SVGAVideoEntity svgaVideoEntity) {
        SVGADrawable drawable = new SVGADrawable(svgaVideoEntity);
        svgaImageView1.setImageDrawable(drawable);
        mFlSvga2.addView(svgaImageView1 );
        svgaImageView1.startAnimation();
    }

    @Override
    public void onError() {
        System.out.println("解析错误decodeFromURL");
    }
});

在项目中对于复杂的SVG动画一般都是用Lottie和SVGA加载,而对于Lottie和SVGA的区别,后续将会单独写一篇文章进行比较。

DEMO地址:https://github.com/chaozhouzhang/CustomProgressView

本文分享自微信公众号 - 音视频开发进阶(glumes_blog)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WebRTC & Android 开发学习环境搭建~

    如果你对以上命令感到疑惑,不知道为什么这么写的话,可以参考一下 depot_tools 的使用。

    glumes
  • 视频图像处理中的错帧同步是怎么实现的?

    一般 Android 系统相机的最高帧率在 30 FPS 左右,当帧率低于 20 FPS 时,用户可以明显感觉到相机画面卡顿和延迟。

    glumes
  • Android Camera SurfaceView 预览拍照

    Android使用 Camera API + SurfaceView 方式进行预览拍照。

    glumes
  • Android开发之自定义的ListView(UITableViewController)

    Android开发中的ListView, 顾名方法思义,就是表视图。表示图在iOS开发中就是TableView。两者虽然名称不一样,但是其使用方法,使用场景以及...

    lizelu
  • 2-VVI-材料设计之CardView

    张风捷特烈
  • 仿人人网侧边栏滑动效果

    提莫队长
  • Android开发之帧动画

    Android动画主要分为3种 View动画(Android开发之View动画) 帧动画 属性动画 何为帧动画? 帧动画最简单,通过顺序播放一系列的图像产生动画...

    YungFan
  • ExpandableListView实现商品列表折叠

    简介 在日常的开发中,有可能会遇到需要一些可以展开的列表,比如QQ的好友列表,电商的购物车折叠显示。Android也给我们提供ExpandableListVie...

    xiangzhihong
  • Android 必知必会-使用 supportV4 的 RoundedBitmapDrawable 实现圆角

    版权声明:本文为[他叫自己Mr.张]的原创文章,转载请...

    他叫自己MR.张
  • 自定义 behavior - 完美仿 QQ 浏览器首页,美团商家详情页

    记得两年前的时候,曾写过自定义 behavior 的文章 自定义 Behavior -仿新浪微博发现页的实现,到现在差不多有一万多的阅读量吧。

    用户2965908

扫码关注云+社区

领取腾讯云代金券