1. 程式人生 > >Android 直播禮物動畫實現之SVGA動畫

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/svga-preview.html

Android中使用
下面簡單介紹一下Android中整合SVGA,實現禮物動畫。

(1)首先拿到UI設計師做好的SVGA動畫檔案,放到專案的asstes資料夾中

    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() {
            @Override
            public void onComplete(SVGAVideoEntity mSVGAVideoEntity) {
                mGiftAnimSIV.setVisibility(View.VISIBLE);
                SVGADrawable drawable = new SVGADrawable(mSVGAVideoEntity);
                mGiftAnimSIV.setImageDrawable(drawable);
                mGiftAnimSIV.startAnimation();
            }

            @Override
            public void onError() {
                ToastUtil.showShort(mActivity, getString(R.string.prompt_gift_parse_fail));
            }
        });
    }

其中animationFileName就是放到assets中的SVGA動畫檔名

 /**
  * 禮物動畫播放監聽
  */
 mGiftAnimSIV.setCallback(new SVGACallback() {
            @Override
            public void onPause() {

            }

            @Override
            public void onFinished() {
                mGiftAnimSIV.setVisibility(View.GONE);
            }

            @Override
            public void onRepeat() {

            }

            @Override
            public void onStep(int frame, double percentage) {

            }
        });

以上就是SVGA在Android中的簡單實用。具體的實用請參考官方的文件和Demo。

相關推薦

Android 直播禮物動畫實現SVGA動畫

在最近做的直播專案中,產品要求傳送禮物時,需要顯示對應的禮物動畫,其中幾個禮物動畫效果如下: 看了這幾個動畫效果,是挺炫酷的,妥妥的能夠增加使用者體驗,但是實現起來可就沒那麼容易了。 Android中動畫實現方案,主要有以下幾種: (1)Fra

Android動畫框架檢視動畫基本使用

      之前在學習View 滑動的時候其實就是View動畫的一種展現形式了,當時介紹了有7中方法可以實現View的滑動,截止目前還有Sroller,動畫以及ViewDragHelper實現沒有介紹,今天的內容裡面就包含了部分View的滑動實現,這裡說部分主要有兩個原

element.ui-Qt實現Tabs動畫滾動

視覺和互動參考前端element元件,使用Qt實現 element的Tabs效果 打算使用最簡單的方式實現可滑動的Tabs,繼承於QTabWidget,加入些動畫效果繪製下劃線就搞定了,是不是很簡單。 沒有截動態效果,可自己除錯 但是其中也有些注意點,這裡也是閱讀qtabwidget.c

Android動畫基礎【2】——(視覺動畫系統透明度動畫

Android中檢視動畫系統: 和逐幀動畫不同的是,檢視動畫系統操作的物件是檢視物件。換句話說,檢視動畫系統可以讓例如文字框、按鈕、ImageView等動起來。 檢視動畫系統中所用的類所在包為: android.view.animation中。 其中包括的類有: Animation類

Android動畫Tween動畫 (漸變、縮放、位移、旋轉)

Android 平臺提供了兩類動畫。 一類是Tween動畫,就是對場景裡的物件不斷的進行影象變化來產生動畫效果(旋轉、平移、放縮和漸變)。 第二類就是 Frame動畫,即順序的播放事先做好的影象,與gif圖片原理類似。 下面就講一下Tweene Ani

Android 用Animation-list實現逐幀動畫

第一步:先上圖片素材,以下素材放到res/drawable目錄下: 圖片素材: 檔名稱: icon1.png icon2.png icon3.png icon4.png icon5.png icon6.p

Android自定義控制元件掃描動畫UI

前言 最近有一個需求,就是做一個掃描的UI,看了很多掃描動畫,發現酷狗的掃描動畫挺漂亮的,所以就做了一個相似的掃描動畫,廢話不多說,先看一下最終的效果吧。 最終效果圖 介紹 首先我們看一下這個效果,它由以下幾部分組成: 1.中間一個音符圖片

Android中使用SVG實現炫酷動畫效果

前言 SVG,即Scalable Vector Graphics 可伸縮向量圖形。這種影象格式在前端中已經使用的非常廣泛,而在移動端的開發中,遇到一些複雜的自定義控制元件或者動畫效果,我們就可以考慮使用SVG。 一.Vector Drawable

android 同一個介面同時實現兩種動畫相對運動

在一個activity中,頂部和底部的兩個控制元件以動畫的形式相對出現,類似上下交錯的效果。首先自定義兩個佈局,繼承LinearLayout;其次在Activity需要載入佈局檔案中引用自定義佈局,並且在該佈局新增其他需要使用的元件,比如編輯框,文字框等。在自定義的佈局中定

Android動畫系列動畫和補間動畫

> 原文首發於微信公眾號:jzman-blog,歡迎關注交流! Android 提供三種動畫:幀動畫、補間動畫和屬性動畫,本篇文章介紹幀動畫以及補間動畫的使用,屬性動畫的使用將在後面的文章中分享,那就來複習一下這兩種動畫的使用吧。 #### FrameAnimation FrameAnimatio

Android動畫系列屬性動畫

> 原文首發於微信公眾號:jzman-blog,歡迎關注交流! 屬性動畫相較幀動畫和補間動畫更強大,幀動畫和補間動畫只能應用於 View 及其子類,而屬性動畫可以修改任何物件的屬性值,屬性值可在指定的一段時間內自動改變,根據物件屬性值的變化進而實現更復雜的動畫。 1. 屬性動畫的常用設定 2. Va

Android初級】如何實現一個有動畫效果的自定義下拉選單

我們在購物APP裡面設定收貨地址時,都會有讓我們選擇省份及城市的下拉選單項。今天我將使用Android原生的 **Spinner** 控制元件來實現一個自定義的下拉選單功能,並配上一個透明漸變動畫效果。 **要實現的功能及思路如下:** 1. 下拉選單樣式是自定義的、非原生效果:需要使用 setDrop

直播禮物實現

知識點分析:         1.實現內容:            禮物九宮格介面的實現            連發禮物動畫介面的實現            全屏禮物動畫介面的實現            心形點贊動畫的整合        2.知識點:            動

Android進階——自定義View擴充套件系統控制元件的另一種思路實現漸變文字動畫的TextView

引言 前面幾篇文章 繼承或組合系統現有控制元件實現新控制元件,擴充套件新功能都是在對應的構造方法中去擴充套件的,但千萬不要把思路侷限於只能在構造方法中去擴充套件,這篇就簡單地分享另一種思路,通過重寫對應的週期方法實現擴充套件。 一、View中幾種重

Android動畫animation-list實現逐幀動畫

簡介 幀動畫(Frame Animation又稱Drawable Animation)是最簡單的Android動畫效果,其與電影多重連續幀播放原理相似,通過視覺殘留來讓人感知到動畫效果。其實現方式是將

android直播app禮物連擊動畫效果

最近在做公司的直播專案,需要實現一個觀看端連擊送禮物的控制元件: 直接上程式碼: public class CustomGiftView extends LinearLayout { private Timer timer; privat

Android學習Android 5.0分享動畫實現微信點選全屏效果

Android5.0過渡動畫,請看 今天用分享動畫實現微信點選全屏效果 本文原始碼下載地址 peizhi 配置 build.gradle: compile 'com.android.support:recyclerview-v7:23.

Android開發RecyclerView的互動動畫(實現拖拽和刪除)

做RecyclerView做相關的動畫效果的時候,用的最多的是v7包下的ItemTouchHelper類,這個類很強大,如有興趣的童鞋可以自行翻看原始碼,接下來我帶領大家實現RecyclerView相關的互動動畫。大家看下面的效果(拖拽和刪除): ------------

Android開發Tween動畫實現方法

1,   Activity中實現 Animation的子類              Animation scaleAnimation = new ScaleAnimation(0f, 1f, 0f, 1f,             Animation.RELATIVE_

Android動畫學習(五)屬性動畫實現Tween的效果和高階屬性示例

一、基本介紹 Golang設計者為了程式設計方便,提供了一些函式,這些函式可以直接使用,我們稱為Go的內建函式。文件:https://studygolang.com/pkgdoc -> buil