文章來源：博客園丨HMS Core

一個“冷”知識，又雙叒叕到一年七夕了！

每年此時，送禮指南滿天飛，選擇困難癥都給逼出來了，疑了個惑，能搞定愛情的人，卻在送禮這件事兒上糾結(jié)萬分！

要我說，七夕這種有情人的浪漫佳節(jié)，最重要的是圖一個氛圍！今天給大家介紹一個適合程序員的七夕“氛圍感十足”的小禮物——?借助?華為圖像服務(wù)?，開發(fā)個超有愛七夕動圖?，它支持輸入特殊關(guān)鍵詞，觸發(fā)“七夕”特效；同時，畫面還可跟隨指尖觸碰產(chǎn)生動效……效果先睹為快↓↓↓

Demo效果

有對象的秀給對象看，單身的朋友也可先做個七夕氛圍組成員，方法到手，也許下次就用上啦。

話不多說，開整！

開發(fā)步驟

1. 關(guān)鍵字動畫播放

第一步：素材準備

首先找到一個合適的圖片，這里我們選擇了一張牛郎織女的圖片：

然后將其中有動畫效果的部件從圖中取出來。我們?nèi)〕隽嗽贫洌＠?，織女，紅心四個元素。

第二步：集成準備

先按照下面的指導(dǎo)完成開發(fā)者注冊，創(chuàng)建應(yīng)用，簽名配置：

https://developer.huawei.com/consumer/cn/doc/development/Media-Guides/config-agc-0000001050199019?ha_source=hms1

再按照如下方式進行代碼倉和編譯依賴的配置：

在項目級“build.gradle”文件中配置：

在應(yīng)用級“build.gradle”文件配置編譯依賴（當前最新版本1.0.3.301）：

配置權(quán)限

在“AndroidManifest.xml”文件中配置應(yīng)用所需權(quán)限。

第三步：功能開發(fā)

1.界面設(shè)計

這里用最簡單的界面，一個FrameLayout中配置輸入框和按鈕：

我們將在這個FrameLayout中調(diào)試和展現(xiàn)動畫。

2.配置存儲權(quán)限申請

在MainActivity的onCreate()方法中，檢查是否擁有寫存儲的權(quán)限，如果缺少，就調(diào)用requestPermission方法，對WRITE_EXTERNAL_STORAGE權(quán)限進行申請:

如果已有權(quán)限，或權(quán)限申請成功后，對Image渲染模塊進行初始化

3.Image渲染模塊初始化

獲取渲染實例，初始化，并獲取渲染視圖。 這里會指定動畫元素的目錄：

4.配置關(guān)鍵字播放動畫

還記得前面留下的輸入框和按鈕嗎？我們使用關(guān)鍵字“Love”來進行動畫播放。只需要通過imageRenderAPI.playAnimation()即可觸發(fā)：

5.配置動畫

框架搭好了，現(xiàn)在來到動畫的部分。Image Kit提供了5種基礎(chǔ)動效和9種高級動效，可以滿足絕大部分場景的使用要求。

在這里我們使用到了透明度動畫，位移動畫，縮放動畫，以及下落動效。

Image Kit的動畫配置均在manifest.xml文件中完成?？刹灰虯ndroidManifest.xml文件搞混了哦。

首先配置虛擬屏寬及背景圖片。配置虛擬屏寬之后，系統(tǒng)會根據(jù)不同的分辨率對動畫進行縮放，使效果保持一致。

我們希望牛郎織女能夠逐漸靠近直至相會，此時加入牛郎織女兩個元素，分別配置動線，此時使用到位移動畫的特效：

這樣牛郎織女將從屏幕兩側(cè)向中間靠近，直至相會。

相會之后在中心將出現(xiàn)跳動的紅心，這里用到了透明度動畫及縮放動畫的疊加特效：

到現(xiàn)在，關(guān)鍵元素已經(jīng)有了，可是看起來還是有點干巴，要找點什么點綴一下。

天上的云朵也可以動起來，讓它在小范圍里動一下更靈動一些：

想再羅曼蒂克一些，撒一些花瓣，這里用到的就是下落動效：

到這里已經(jīng)大功告成。最后可以再將動畫保留下來

以上就得到最終效果啦~

除了動效之外，Image Kit還提供了濾鏡功能，可以給圖片添上浪漫的色彩，貼紙花字的功能，也可以給用戶的圖片增加愛情的元素。

對于準備學(xué)習(xí)編程的小伙伴，如果你想更好的提升你的編程核心能力（內(nèi)功）不妨從現(xiàn)在開始！

微信公眾號：C語言編程學(xué)習(xí)基地

整理分享（多年學(xué)習(xí)的源碼、項目實戰(zhàn)視頻、項目筆記，基礎(chǔ)入門教程）

歡迎轉(zhuǎn)行和學(xué)習(xí)編程的伙伴，利用更多的資料學(xué)習(xí)成長比自己琢磨更快哦！