鸿蒙实现新功能！

这是一个特别小巧的鸿蒙掉 emoji 表情包实现。效果类似于微信中发送"生日快乐"和"么么哒"之类的词语时触发的动画效果。

功能展示

基于鸿蒙系统，通过自定义控件属性方式实现了 EmojiRain 组件，同时支持 Java 代码设置。

原理解析

如下图所示，表情控件 Image 初始位置在屏幕的上方，EmojiRainLayout 充满整个屏幕。

表情包开始掉落前，从指定表情包集合中获取对应元素，计算该元素本次掉落时的起始位置、终止位置、宽度、高度。

然后根据位置坐标及高度创建对应的动画对象，设置 Animator.CurveType.ACCELERATE_DECELERATE 动画插值器。

根据表情包掉落数量将 Image 元素准备完成后，通过调用 addComponent() 将 Image 添加到 EmojiRainLayout 上，达到覆盖在屏幕上的效果。

最后执行先加速后减速的动画效果，开启表情雨模式。
//使用rxjava控制动画执行间隔、执行顺序、执行对象
Subscription subscription = Observable.interval(mDropFrequency, TimeUnit.MILLISECONDS)
.take(mDuration / mDropFrequency)
.flatMap(flow -> Observable.range(0, mEmojiPer))
.map(image -> mEmojiPool.acquire())
.filter(ep -> ep != null)
.observeOn(OhosSchedulers.mainThread())
.subscribe(this::startDropAnimationForSingleEmoji, Throwable::printStackTrace);
mSubscriptions.add(subscription);

//为Image创建动画对象
AnimatorProperty animatorProperty = emoji.createAnimatorProperty();
//设置动画执行时长
animatorProperty.setDuration((int)
(mDropAverageDuration * Randoms.floatAround(1, RELATIVE_DROP_DURATION_OFFSET)));
float startX = Randoms.getStartX();
float endX = Randoms.getStopX();
//指定动画开始的坐标及终止坐标
animatorProperty.moveFromX(startX).moveToX(endX).moveFromY(-imageHeight).moveToY(mWindowHeight);
animatorProperty.setCurveType(Animator.CurveType.ACCELERATE_DECELERATE);
animatorProperty.start();

    //初始化Image，随机赋予等比例缩放高度、宽度，指定图片加载模式
    Image emoji = new Image(getContext());
    emoji.setImageElement(emojiDrawable);
    emoji.setScaleMode(Image.ScaleMode.CENTER);
    double positive = Randoms.positiveGaussian() * 0.6;
    final int width = (int) (emoji_standard_size * (1.0 + positive));
    final int height = (int) (emoji_standard_size * (1.0 + positive));
    final LayoutConfig params = new LayoutConfig(width, height);
    params.setMarginTop(-height);
    params.setMarginLeft((int) (-0.5F * width));
    emoji.setLayoutConfig(params);

使用说明

参数配置如下：
per：每一波掉落的 emoji 个数，默认 6 个

duration：掉落动画持续的总时长，默认 8000ms

dropDuration：每个 emoji 掉落时长的平均值，默认 2400ms

dropFrequency：掉落频率，即每两拨的时间间隔，默认 500ms

在 layout 中配置 EmojiRainLayout 继承自 StackLayout，你完全可以把它当做原生的 StackLayout 使用。

<com.luolc.emojirain.EmojiRainLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
xmlns:app="http://schemas.huawei.com/res/ohos-auto"
xmlns:tools="http://schemas.android.com/tools"
ohos:height="match_parent"
ohos:width="match_parent"
app:dropDuration="2400"
app:dropFrequency="500"
app:duration="7200"
app:per="10">

<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text="Hello world!" />

</com.luolc.emojirain.EmojiRainLayout>

public class MainAbilitySlice extends AbilitySlice {

private EmojiRainLayout mContainer;

@Override
protected void onStart(Intent intent) {
    super.onStart(intent);
    super.setUIContent(ResourceTable.Layout_ability_main);

    // bind view
    mContainer = (EmojiRainLayout) findComponentById(ResourceTable.Id_group_emoji_container);

    // add emoji sources
    mContainer.addEmoji(ResourceTable.Media_emoji_1_3);
    mContainer.addEmoji(ResourceTable.Media_emoji_2_3);
    mContainer.addEmoji(ResourceTable.Media_emoji_3_3);
    mContainer.addEmoji(ResourceTable.Media_emoji_4_3);
    mContainer.addEmoji(ResourceTable.Media_emoji_5_3);

    // set emojis per flow, default 6
    mContainer.setPer(10);

    // set total duration in milliseconds, default 8000
    mContainer.setDuration(7200);

    // set average drop duration in milliseconds, default 2400
    mContainer.setDropDuration(2400);

    // set drop frequency in milliseconds, default 500
    mContainer.setDropFrequency(500);
}

}

开始掉落：

mContainer.startDropping();

停止掉落：

mContainer.stopDropping();

项目地址：

https://gitee.com/chinasoft5_ohos/EmojiRain

来源：鸿蒙技术社区