【中软国际】HarmonyOS 鸿蒙开源第三方组件-表情雨EmojiRain 原创精华

中软国际AIoT开发者社区

发布于 2021-8-19 15:23

浏览

4收藏

已被收录在 2 个专栏，

背景

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

功能展示

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

【中软国际】HarmonyOS 鸿蒙开源第三方组件-表情雨EmojiRain-鸿蒙开发者社区

原理解析

【中软国际】HarmonyOS 鸿蒙开源第三方组件-表情雨EmojiRain-鸿蒙开发者社区

如图所示，表情控件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);
    }
}

开始掉落