共计 6197 个字符，预计需要花费 16 分钟才能阅读完成。
一个“冷”常识，又双叒叕到一年七夕了！
每年此时，送礼指南满天飞，抉择艰难症都给逼出来了，疑了个惑，能搞定恋情的人，却在送礼这件事儿上纠结万分！
要我说，七夕这种有情人的浪漫佳节，最重要的是图一个气氛！明天给大家介绍一个适宜程序员的七夕“气氛感十足”的小礼物——借助华为图像服务，开发个超有爱七夕动图，它反对输出非凡关键词，触发“七夕”特效；同时，画面还可追随指尖触碰产生动效……成果先睹为快↓↓↓
Demo 成果
有对象的秀给对象看，独身的敌人也可先做个七夕气氛组成员，办法到手，兴许下次就用上啦。
话不多说，开整！
开发步骤
1. 关键字动画播放
第一步：素材筹备
首先找到一个适合的图片，这里咱们抉择了一张牛郎织女的图片：
而后将其中有动画成果的部件从图中取出来。咱们取出了云朵，牛郎，织女，红心四个元素。
第二步：集成筹备
先依照上面的领导实现开发者注册，创立利用，签名配置：
https://developer.huawei.com/…
再依照如下形式进行代码仓和编译依赖的配置：
1) 在我的项目级“build.gradle”文件中配置：
buildscript {
repositories {google()
jcenter()
// 配置 HMS Core SDK 的 Maven 仓地址。maven {url 'https://developer.huawei.com/repo/'}
}
dependencies {
...
// 减少 agcp 插件配置。classpath 'com.huawei.agconnect:agcp:1.4.2.300'
}
}
allprojects {
repositories {google()
jcenter()
// 配置 HMS Core SDK 的 Maven 仓地址。maven {url 'https://developer.huawei.com/repo/'}
}
}2) 在利用级“build.gradle”文件配置编译依赖（以后最新版本 1.0.3.301）：
dependencies {
implementation 'com.huawei.hms:image-render: 1.0.3.301'
implementation 'com.huawei.hms:image-render-fallback: 1.0.3.301'
}3) 配置权限
在“AndroidManifest.xml”文件中配置利用所需权限。
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>第三步：性能开发
1) 界面设计
这里用最简略的界面，一个 FrameLayout 中配置输入框和按钮：
咱们将在这个 FrameLayout 中调试和展示动画。
2) 配置存储权限申请
在 MainActivity 的 onCreate()办法中，查看是否领有写存储的权限，如果短少，就调用 requestPermission 办法，对 WRITE_EXTERNAL_STORAGE 权限进行申请:
int permissionCheck = ContextCompat.checkSelfPermission(ImageKitRenderDemoActivity.this, Manifest.permission.WRITE_EXTERNAL_STORAGE);
if (permissionCheck == PackageManager.PERMISSION_GRANTED) {initData();
initImageRender();} else {ActivityCompat.requestPermissions(ImageKitRenderDemoActivity.this, new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE}, PERMISSION_REQUEST_CODE);
}如果已有权限，或权限申请胜利后，对 Image 渲染模块进行初始化
@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {if (requestCode == PERMISSION_REQUEST_CODE) {
if (grantResults.length > 0
&& grantResults[0] == PackageManager.PERMISSION_GRANTED) {
// The permission is granted.
initData();
initImageRender();} else {
// The permission is rejected.
Log.w(TAG, "permission denied");
Toast.makeText(ImageKitRenderDemoActivity.this, "Please grant the app the permission to read the SD card", Toast.LENGTH_SHORT).show();}
}
}3) Image 渲染模块初始化
获取渲染实例，初始化，并获取渲染视图。这里会指定动画元素的目录：
ImageRender.getInstance(context, new ImageRender.RenderCallBack() {
// 获取场景动效服务实例胜利回调，返回场景动效服务实例
@Override
public void onSuccess(ImageRenderImpl imageRender) {
imageRenderAPI = imageRender;
if (imageRenderAPI != null) {int initResult = imageRenderAPI.doInit(sourcePath, Utils.getAuthJson());
Log.i(TAG, "DoInit result ==" + initResult);
if (initResult == 0) {
// Obtain the rendered view.
RenderView renderView = imageRenderAPI.getRenderView();
if (renderView.getResultCode() == ResultCode.SUCCEED) {View view = renderView.getView();
if (null != view) {
// Add the rendered view to the layout.
contentView.addView(view);
hashCode = String.valueOf(view.hashCode());
} else {Log.w(TAG, "GetRenderView fail, view is null");
}
}
}
// 获取场景动效服务实例失败回调，返回错误码
@Override
public void onFailure(int errorCode) {...}
});4) 配置关键字播放动画
还记得后面留下的输入框和按钮吗？咱们应用关键字“Love”来进行动画播放。只须要通过 imageRenderAPI.playAnimation()即可触发：
wordInput = findViewById(R.id.textinput);
enterBtn = findViewById(R.id.enter);
enterBtn.setOnClickListener(v -> {String inputContent = wordInput.getText().toString();
if (inputContent.contentEquals("Love")) {if (null != imageRenderAPI) {imageRenderAPI. playAnimation();;
wordInput.setVisibility(View.GONE);
enterBtn.setVisibility(View.GONE);
}
} else {Toast.makeText(this,"再想想？",Toast.LENGTH_SHORT).show();}
});5) 配置动画
框架搭好了，当初来到动画的局部。Image Kit 提供了 5 种根底动效和 9 种高级动效，能够满足绝大部分场景的应用要求。
在这里咱们应用到了透明度动画，位移动画，缩放动画，以及着落动效。
Image Kit 的动画配置均在 manifest.xml 文件中实现。可不要和 AndroidManifest.xml 文件搞混了哦。
首先配置虚构屏宽及背景图片。配置虚构屏宽之后，零碎会依据不同的分辨率对动画进行缩放，使成果保持一致。
<Root screenWidth="1080">
<Image src="background.png"/>咱们心愿牛郎织女可能逐步凑近直至相会，此时退出牛郎织女两个元素，别离配置动线，此时应用到位挪动画的特效：
<Image x="1000" y="1450" src="man.png">
<PositionAnimation repeat="1">
<Position x="0" y="0" time="0"/>
<Position x="-450" y="-100" time="4000"/>
</PositionAnimation>
</Image>
<Image x="-600" y="800" src="woman.png">
<PositionAnimation repeat="1">
<Position x="0" y="0" time="0"/>
<Position x="700" y="300" time="4000"/>
</PositionAnimation>
</Image>这样牛郎织女将从屏幕两侧向两头凑近，直至相会。
相会之后在核心将呈现跳动的红心，这里用到了透明度动画及缩放动画的叠加特效：
<Image x="520" y="1350" src="heart.png" visibility="#show1">
<AlphaAnimation delay="4000" repeat="1">
<Alpha a="255" time="0"/>
<Alpha a="0" time="3000"/>
</AlphaAnimation>
<SizeAnimation delay="4000" repeat="1">
<Size w="127" h="95" time="0"/>
<Size w="508" h="380" time="3000"/>
</SizeAnimation>
</Image>到当初，要害元素曾经有了，可是看起来还是有点干巴，要找点什么装点一下。
天上的云朵也能够动起来，让它在小范畴里动一下更灵动一些：
<Image x="150" y="200" src="cloud.png">
<PositionAnimation repeat="0">
<Position x="0" y="0" time="0"/>
<Position x="-50" y="0" time="3000"/>
<Position x="0" y="0" time="6000"/>
</PositionAnimation>
</Image>想再罗曼蒂克一些，撒一些花瓣，这里用到的就是着落动效：
<DropPhysicalView gravityX="3" gravityY="10" airDensity="1000" delay="8800" visibility="#show2">
<ItemGroup x="0" y="0" width="#screen_width" height="#screen_height">
<Alpha x="0" y="#screen_height-1000" width="#screen_width" height="#screen_height" value="20"/>
<Item count="20" src="follow.png">
<Velocity isRandom="true" velocityX="0" velocityY="5"/>
<Position isRandom="true"/>
<AngleVelocity isRandom="true" angleVelocity="5"/>
<Weight isRandom="true" value="0.5"/>
</Item>
</ItemGroup>
</DropPhysicalView>6) 到这里曾经功败垂成。最初能够再将动画保留下来
// 开始录制
int resultCode = imageRenderAPI.startRecord(json, new IStreamCallBack () {
// 在录制胜利回调中，将视频或 GIF 字节数组保留成 mp4 或 GIF 文件
@Override
void onRecordSuccess(HashMap<String, Object> map) {
...
String recordType = (String) hashMap.get("recordType");
byte[] videoBytes = (byte[]) hashMap.get("videoBytes");
byte[] gifBytes = (byte[]) hashMap.get("gifBytes");
try {if (recordType.equals("1")) {if (videoBytes != null) {
// 保留 mp4 文件
saveFile(videoBytes, mp4Path);
}
} else if (recordType.equals("2")) {...} else if (recordType.equals("3")) {...}
} catch (IOException e) {...}
...
}
// 录制失败回调
@Override
void onRecordFailure(HashMap<String, Object> map) {...}
// 录制进度回调，progress 取值范畴为 0 -100
@Override
void onProgress(int progress) {runOnUiThread(new Runnable() {
@Override
public void run() {textProgress.setText("以后录制进度：" + progress + "%");
}
});
}
});
以上就失去最终成果啦~
除了动效之外，Image Kit 还提供了滤镜性能，能够给图片添上浪漫的色调，贴纸花字的性能，也能够给用户的图片减少恋情的元素。
理解更多 >>
拜访华为图像服务官网
拜访华为开发者联盟官网
获取开发领导文档
华为挪动服务开源仓库地址：GitHub、Gitee
关注咱们，第一工夫理解 HMS Core 最新技术资讯~
