这是一个特别小巧的鸿蒙掉 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
来源：鸿蒙技术社区
