文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-14 00:56

关注

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

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

https://harmonyos.51cto.com

背景

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

功能展示

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


原理解析


如图所示,表情控件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

duration

dropDuration

dropFrequency

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

  1.    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.    xmlns:app="http://schemas.huawei.com/res/ohos-auto" 
  3.    xmlns:tools="http://schemas.android.com/tools" 
  4.    ohos:height="match_parent" 
  5.    ohos:width="match_parent" 
  6.    app:dropDuration="2400" 
  7.    app:dropFrequency="500" 
  8.    app:duration="7200" 
  9.    app:per="10"
  10.  
  11.    
  12.        ohos:height="match_content" 
  13.        ohos:width="match_content" 
  14.        ohos:text="Hello world!" /> 
  15.  
  16.  
  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

 

来源:鸿蒙社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯