原创 如何用Giraffe IDE实现图标环形循环动效?

2025-6-26 10:23 823 0 分类: 智能硬件 文集: 显示模组

想要UI更加美观灵动,实现一些高级动态效果是必不可少的。这一期我们利用Giraffe IDE的逻辑和功能的组合,来实现图标环形循环滑动效果。


如何用Giraffe IDE实现图标环形循环动效教程


  1. 使用tileview控件和image控件,将tileview控件按图片大小设置大小,并在编辑子界面中按顺序添加图片,打开无限循环模式。将左、右对应的image图片摆放至tilevie旁,将暂时不用显示的图片置底放至tileview后,如上图所示。           
  2. 使用条件判断每个子tile窗口的滑动距离(s32grf_ctrl_scroll_get_x(grf_ctrl_t* ctrl_t);)获取后与该窗口处于中间时的值来判断左右滑动,并使用随输入值和规定输入输出范围获取输出值的函数(u32grf_map_relation(u32x,u32min_in,u32max_in,u32min_out,u32max_out);)来根据左右滑动距离,设置每张对应图片的移动距离、放大缩小大小,注意将对应image图片和tileview中的图片做到同步的放大、缩小,即可模拟出该效果。
  3. 大致效果完成后,注意设置每个图片在每个条件判断下的图层情况,看情况将其置顶、置底。且因为滑动区域只有中间tileview控件的一小块范围,也可以适量设置tileview增加触摸范围的属性。




作者: 冠显光电MicroOLED代理视涯, 来源:面包板社区

链接: https://mbb.eet-china.com/blog/uid-me-4119026.html

版权声明:本文为博主原创,未经本人允许,禁止转载!

PARTNER CONTENT

文章评论0条评论)

登录后参与讨论
EE直播间
更多
我要评论
0
0
关闭 站长推荐上一条 /5 下一条