用Giraffe IDE实现图标环形循环动效

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

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增加触摸范围的属性。