一个“冷”常识,又双叒叕到一年七夕了!

每年此时,送礼指南满天飞,抉择艰难症都给逼出来了,疑了个惑,能搞定恋情的人,却在送礼这件事儿上纠结万分!
要我说,七夕这种有情人的浪漫佳节,最重要的是图一个气氛!明天给大家介绍一个适宜程序员的七夕“气氛感十足”的小礼物——借助华为图像服务,开发个超有爱七夕动图,它反对输出非凡关键词,触发“七夕”特效;同时,画面还可追随指尖触碰产生动效……成果先睹为快↓↓↓

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渲染模块进行初始化

@Overridepublic 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 最新技术资讯~