ArkUI eTS上实现"流光按钮"效果 原创 精华
狼哥Army
发布于 2022-6-25 03:58
浏览
3收藏
目录
1. 实现效果
对自定义的按钮添加动态效果,通过这种实现的思路还可以实现更改更多的按钮效果。
2. 实现原理
在两个Stack堆叠容器中间画一个长一点并且短一点的Rect矩形并添加旋转和嵌入效果,而且最上面的Stack要比最下面的Stack要小一些,这样就能够看到中间旋转的Rect的动态效果.
3. 实现过程
因为按钮不仅有视觉效果,还会有文字提示,这里用到了自定义标签text,当然你也可以用其他的标签来包裹。
绘制一个大致的按钮框架
最下面也就是最底下的Stack的代码以下:
这样我们得到了一个粉色的长方形,然后对这个长方形中间添加一个稍长的青色矩形,代码以下:
要使用蒙版效果让旋转的Rect只显示在里面,需要clip将其裁剪,入参为Rect,即按照Rect的形状进行裁剪。
接下来就是让青色矩形进行旋转就行了, 参考Codelabs里的风车旋转, 使用定时改变旋转角度.
下来就是在粉色的Stack中再添加一个小一点的Stack进行遮盖.
这样就可以在按钮的边框上呈现出一种流光的效果,再添加文字上去。
再添加一个点击时改变按钮背景色,这样一个流光效果按钮就差不多了。
4. 总结
在这里,我使用了 rotate的特性来实现旋转效果,并利用定时器来修改旋转角度,最后献上全部代码,方便小伙伴们学习。
备注:思路参考来自 #夏日挑战赛# HarmonyOS - 方舟开发框架ArkUI 流光按钮效果
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2022-7-19 00:08:05修改
赞
9
收藏 3
回复
9
2
3
相关推荐
呜呼,炫酷啊🤩🤩
🤩🤩🤩