HarmonyOS 鸿蒙开源第三方组件-表情雨EmojiRain

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

[[419734]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

背景

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

功能展示

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

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

原理解析

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

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

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

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

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

最后执行先加速后减速的动画效果,开启表情雨模式。

  1. //使用rxjava控制动画执行间隔、执行顺序、执行对象 
  2.  Subscription subscription = Observable.interval(mDropFrequency, TimeUnit.MILLISECONDS) 
  3.             .take(mDuration / mDropFrequency) 
  4.             .flatMap(flow -> Observable.range(0, mEmojiPer)) 
  5.             .map(image -> mEmojiPool.acquire()) 
  6.             .filter(ep -> ep != null
  7.             .observeOn(OhosSchedulers.mainThread()) 
  8.             .subscribe(this::startDropAnimationForSingleEmoji, Throwable::printStackTrace); 
  9.         mSubscriptions.add(subscription); 
  10.  
  11. //为Image创建动画对象 
  12.  AnimatorProperty animatorProperty = emoji.createAnimatorProperty(); 
  13.         //设置动画执行时长 
  14.         animatorProperty.setDuration((int
  15.             (mDropAverageDuration * Randoms.floatAround(1, RELATIVE_DROP_DURATION_OFFSET))); 
  16.         float startX = Randoms.getStartX(); 
  17.         float endX = Randoms.getStopX(); 
  18.         //指定动画开始的坐标及终止坐标 
  19.         animatorProperty.moveFromX(startX).moveToX(endX).moveFromY(-imageHeight).moveToY(mWindowHeight); 
  20.         animatorProperty.setCurveType(Animator.CurveType.ACCELERATE_DECELERATE); 
  21.         animatorProperty.start(); 
  22.  
  23.         //初始化Image,随机赋予等比例缩放高度、宽度,指定图片加载模式 
  24.         Image emoji = new Image(getContext()); 
  25.         emoji.setImageElement(emojiDrawable); 
  26.         emoji.setScaleMode(Image.ScaleMode.CENTER); 
  27.         double positive = Randoms.positiveGaussian() * 0.6; 
  28.         final int width = (int) (emoji_standard_size * (1.0 + positive)); 
  29.         final int height = (int) (emoji_standard_size * (1.0 + positive)); 
  30.         final LayoutConfig params = new LayoutConfig(width, height); 
  31.         params.setMarginTop(-height); 
  32.         params.setMarginLeft((int) (-0.5F * width)); 
  33.         emoji.setLayoutConfig(params); 

使用说明

参数配置

per

  • 每一波掉落的emoji个数,默认6个

duration

  • 掉落动画持续的总时长,默认8000ms

dropDuration

  • 每个emoji掉落时长的平均值,默认2400ms

dropFrequency

  • 掉落频率,即每两拨的时间间隔,默认500ms

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

  1. <com.luolc.emojirain.EmojiRainLayout 
  2.    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  3.    xmlns:app="http://schemas.huawei.com/res/ohos-auto" 
  4.    xmlns:tools="http://schemas.android.com/tools" 
  5.    ohos:height="match_parent" 
  6.    ohos:width="match_parent" 
  7.    app:dropDuration="2400" 
  8.    app:dropFrequency="500" 
  9.    app:duration="7200" 
  10.    app:per="10"
  11.  
  12.    <Text 
  13.        ohos:height="match_content" 
  14.        ohos:width="match_content" 
  15.        ohos:text="Hello world!" /> 
  16.  
  17. </com.luolc.emojirain.EmojiRainLayout> 
  1. public class MainAbilitySlice extends AbilitySlice { 
  2.  
  3.     private EmojiRainLayout mContainer; 
  4.  
  5.     @Override 
  6.     protected void onStart(Intent intent) { 
  7.         super.onStart(intent); 
  8.         super.setUIContent(ResourceTable.Layout_ability_main); 
  9.  
  10.         // bind view 
  11.         mContainer = (EmojiRainLayout) findComponentById(ResourceTable.Id_group_emoji_container); 
  12.  
  13.         // add emoji sources 
  14.         mContainer.addEmoji(ResourceTable.Media_emoji_1_3); 
  15.         mContainer.addEmoji(ResourceTable.Media_emoji_2_3); 
  16.         mContainer.addEmoji(ResourceTable.Media_emoji_3_3); 
  17.         mContainer.addEmoji(ResourceTable.Media_emoji_4_3); 
  18.         mContainer.addEmoji(ResourceTable.Media_emoji_5_3); 
  19.  
  20.         // set emojis per flow, default 6 
  21.         mContainer.setPer(10); 
  22.  
  23.         // set total duration in milliseconds, default 8000 
  24.         mContainer.setDuration(7200); 
  25.  
  26.         // set average drop duration in milliseconds, default 2400 
  27.         mContainer.setDropDuration(2400); 
  28.  
  29.         // set drop frequency in milliseconds, default 500 
  30.         mContainer.setDropFrequency(500); 
  31.     } 

开始掉落

  1. mContainer.startDropping(); 

停止掉落

  1. mContainer.stopDropping(); 

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-03-24 09:30:49

鸿蒙HarmonyOS应用

2021-03-01 14:00:11

鸿蒙HarmonyOS应用

2021-03-10 15:03:40

鸿蒙HarmonyOS应用

2021-04-29 14:32:24

鸿蒙HarmonyOS应用

2021-08-03 10:07:41

鸿蒙HarmonyOS应用

2021-03-03 09:42:26

鸿蒙HarmonyOS图片裁剪

2021-04-08 14:57:52

鸿蒙HarmonyOS应用

2021-07-06 18:21:31

鸿蒙HarmonyOS应用

2021-04-20 15:06:42

鸿蒙HarmonyOS应用

2021-08-30 17:55:58

鸿蒙HarmonyOS应用

2021-08-05 15:06:30

鸿蒙HarmonyOS应用

2021-11-02 14:54:21

鸿蒙HarmonyOS应用

2021-01-27 10:04:46

鸿蒙HarmonyOS动画

2021-07-20 15:20:40

鸿蒙HarmonyOS应用

2021-04-15 17:47:38

鸿蒙HarmonyOS应用

2021-03-12 16:35:33

鸿蒙HarmonyOS应用

2021-11-17 15:37:43

鸿蒙HarmonyOS应用

2021-06-29 09:28:16

鸿蒙HarmonyOS应用

2021-08-10 15:23:08

鸿蒙HarmonyOS应用

2021-10-19 10:04:51

鸿蒙HarmonyOS应用
点赞
收藏

51CTO技术栈公众号