Android 直播礼物动画实现之SVGA动画

在最近做的直播项目中，产品要求发送礼物时，需要显示对应的礼物动画,其中几个礼物动画效果如下：

看了这几个动画效果，是挺炫酷的，妥妥的能够增加用户体验，但是实现起来可就没那么容易了。

Android中动画实现方案，主要有以下几种：

（1）Frame Animation（逐帧动画）

（2）Tween Animation (补间动画)

（3）Property Animation(属性动画)

（4）GIF/WebP动画图片

逐帧动画需要UI设计师将每个动画拆成一张张的图片，那么每一个礼物动画都需要一套帧动画图片，这样无疑会增加
安装包的体积。

补间动画或者属性动画开发实现难度较大

GIF动画，就是每一个动画就是一张GIF图片，但是GIF动画图片较大，一般的GIF图片都要几兆到几十兆,这样在移动设备
上去播放这个动画，性能体验上就比较差了。

WebP动画图片体积要比GIF动画图片小很多复杂，WebP动图在编解码时，性能上表现得差强人意，而且虽然Android在
4.0时开始支持WebP，但是要支持有损且带透明像素的WebP得到Android 4.2.1之后。

除了以上几种动画实现方案，还有一些动画框架可供我们去使用，这些动画框架使用起来普遍比较方便，
UI设计师按照约定的动画语法作图给开发人员即可，开发人员使用框架中指定的方式去播放动画即可。
现在主流的动画播放框架主要有Lottie，SVGA。
Lottie，SVGA这两个动画框架都同时支持Android，iOS。

因为我选择的是SVGA动画框架，下面主要讲一下SVGA动画框架。
SVGA动画框架是YY开源的一个动画框架，SVGA是一种全新的动画格式，同时兼容Android,iOS,Web多个平台。
SVGA提供了一整套的动画解决方案：

设计师：设计师可以通过插件快速的导出SVGA动画文件。
具体可参考：http://svga.io/designer.html

开发者：开发者可以简单的接入动画
Android/iOS/Web可以参考如下接入
https://github.com/yyued/SVGAPlayer-iOS
https://github.com/yyued/SVGAPlayer-Android
https://github.com/yyued/SVGAPlayer-Web

设计师生成了SVGA动画文件后，为了获知动画文件是否正常，动画效果怎么样，可以通过动画预览器
来预览动画文件。
http://svga.io/svga-preview.html

Android中使用
下面简单介绍一下Android中集成SVGA，实现礼物动画。

（1）首先拿到UI设计师做好的SVGA动画文件，放到项目的asstes文件夹中

（2）添加SVGA依赖，参考https://github.com/yyued/SVGAPlayer-Android中
SVGA依赖的添加

    allprojects {repositories {...maven { url 'https://jitpack.io' }}
}compile 'com.github.yyued:SVGAPlayer-Android:2.1.8'

(3)在布局文件中添加SVGAImageView控件,在代码中播放动画文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><com.opensource.svgaplayer.SVGAImageView
        android:layout_height="match_parent"android:layout_width="match_parent"app:autoPlay="true"android:background="#000" /></RelativeLayout>

    /*** 播放礼物动画*/private void playGiftAnimation() {mSVGAParse.parse(animationFileName, new SVGAParser.ParseCompletion() {@Overridepublic void onComplete(SVGAVideoEntity mSVGAVideoEntity) {mGiftAnimSIV.setVisibility(View.VISIBLE);SVGADrawable drawable = new SVGADrawable(mSVGAVideoEntity);mGiftAnimSIV.setImageDrawable(drawable);mGiftAnimSIV.startAnimation();}@Overridepublic void onError() {ToastUtil.showShort(mActivity, getString(R.string.prompt_gift_parse_fail));}});}

其中animationFileName就是放到assets中的SVGA动画文件名

 /*** 礼物动画播放监听*/mGiftAnimSIV.setCallback(new SVGACallback() {@Overridepublic void onPause() {}@Overridepublic void onFinished() {mGiftAnimSIV.setVisibility(View.GONE);}@Overridepublic void onRepeat() {}@Overridepublic void onStep(int frame, double percentage) {}});

以上就是SVGA在Android中的简单实用。具体的实用请参考官方的文档和Demo。

Android 直播礼物动画实现之SVGA动画相关推荐

uniapp中使用svga动画
1.首先什么是svga动画 SVGA(http://svga.io/index.html) 是一种跨平台的开源动画格式,同时兼容 iOS / Android / Flutter / Web. SVGA ...
面向直播svga动画初学者，svga文件是什么
直播动画用的SVGA文件是什么? 从动效设计到开发实现中,总会遇到很多问题. 设计师纠结动画还原帧率低.有色差.格式多.标注动效麻烦.开发没有按效果来做-开发工程师纠结于文件太大.性能差.开发麻烦.设 ...
Android SVGA动画
官方地址 https://svga.io/ 介绍全新的动画格式高性能动画播放体验 SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式. 使用 ...
svga-前端如何使用svga动画
前言今天由于公司开发的直播间有发送礼物的需求,这里由于svga动画相对于gif图更加可控,所以使用svga动画,现在做个记录正文定义 SVGA(http://svga.io/index.html ...
svga文件预览_SVGA文件格式——SVGA动画制作和文件转换
什么是SVGA SVG,它的英文全称为Scalable Vector Graphics,即可伸缩矢量图形. SVGA,就是Scalable Vector Graphics Animetion,即可伸缩 ...
Android动画之帧动画和补间动画
Android系统提供三种动画:帧动画.补间动画和属性动画.这里先分析总结帧动画和补间动画. FrameAnimation 帧动画,通俗来说就是按照图片动作顺序依次播放来形成动画,创建帧动画可以用 x ...
android窗口退出动画,如何在Android中为弹出窗口制作动画
PopupWindow自定义布局更方便,并且显示位置自由,没有任何限制.使用下面的代码并享受动画.在此动画中,使用底部滑入和滑出,但是您只能更改滑入/滑出动画,并根据您的动画对应用程序中的任何位置进行 ...
Android Property Animation属性动画：scale缩放动画（4）
Android Property Animation属性动画:scale缩放动画(4) 和之前我写的附录文章1,2,3相似,本文将接着使用Android Property Animation属性 ...
Android模仿iPhone View旋转刷新数据动画详解
因为小马很喜欢在不同的页面之间跳转时加点好玩的动画,今天无意间看到一个动画效果感觉不错,几种效果图如下,既然好玩就写在博客中,直接说就是:该效果类似于iPhone中View的切换动画效果,今天就只介绍 ...
android 中间按钮突出,Android 实现按钮从两边移到中间动画效果
Android 实现按钮从两边移到中间动画效果html package org.shuxiang.test; import android.app.Activity; import android. ...

Android 直播礼物动画实现之SVGA动画

Android 直播礼物动画实现之SVGA动画相关推荐

最新文章

热门文章