这是一个特别小巧的鸿蒙掉 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
来源:鸿蒙技术社区
免责声明:文章内容来自互联网,本站不对其真实性负责,也不承担任何法律责任,如有侵权等情况,请与本站联系删除。
转载请注明出处:鸿蒙实现新功能!-鸿蒙系统3.0 https://www.yhzz.com.cn/a/11565.html