同心圆及点击动画,ArkTs如何画同心圆以及同心圆的点击动画效果
同心圆及点击动画
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
数字按键点击动画,点击按键和离开时都会出现动画效果提示用户按压位置和效果
374浏览 • 1回复 待解决
lite手表上的应用如何区分设备是方表还是圆表?
2636浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
564浏览 • 1回复 待解决
如何实现动画转场效果
357浏览 • 1回复 待解决
文字动画效果如何实现
629浏览 • 0回复 待解决
panGesture结合动画实现fling效果
357浏览 • 1回复 待解决
求助动画效果问题有懂的吗?
2886浏览 • 1回复 待解决
如何实现拖拽时列表项占位动画的效果
722浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
8785浏览 • 2回复 待解决
Button等控件设置点击效果
282浏览 • 1回复 待解决
ArkTS开发中如何调用鸿蒙系统原生的加载动画?
1401浏览 • 1回复 待解决
如何自定义弹窗的弹出动画和关闭动画
523浏览 • 1回复 待解决
如何实现带有点击事件的混合样式文本效果
634浏览 • 1回复 待解决
如何取消点击输入框时的背景高亮效果
927浏览 • 1回复 待解决
animateTo动画如何暂停
340浏览 • 1回复 待解决
slice之间跳转动画问题?何如把默认的左右动画换成上下动画?
2895浏览 • 1回复 待解决
多选按钮设置透明,重新画按钮后,如何能够实现对应的点击事项?
3971浏览 • 1回复 待解决
【求助】点击消息,打开指定的ability,如何设置参数,以及如何接收参数?
524浏览 • 1回复 待解决
lottile动画如何切圆角
457浏览 • 0回复 待解决
animateTo动画如何直接停止
764浏览 • 1回复 待解决
如何使用弹簧动画曲线
138浏览 • 1回复 待解决
请问如何去掉ability的转场动画?
9699浏览 • 2回复 待解决
TransitionEffect动画循环播放如何关闭
538浏览 • 1回复 待解决
鸿蒙如何实现动画值变化
8029浏览 • 1回复 待解决
求教ArkUI如何实现组合动画?
4133浏览 • 1回复 待解决
本文主要介绍ArkTs如何画同心圆以及同心圆的点击动画效果等。
典型的使用场景如下:
l 场景:在锁屏手势解锁页面可选用同心圆当做每一个按钮,在做某些列表项的选中功能时,可选用同心圆做出更好看的动态效果。
使用的核心API
curves
animation
Circle
核心代码解释
1.第一个同心圆用column做容器,利用边框圆角将其形状设置为圆形,内置一个Circle组件,在用定位属性调到正中间,即可实现同心圆效果。
2.第二个同心圆是在stack组件中嵌套两个Circle,第一个Circle为外层,内部颜色为白色,第二个circle为内层,外层圆用边框做出环的效果,即可实现同心圆。
3.第二个同心圆做出了四种不同的点击动画,点击后内层圆的大小、颜色以及变化曲线都会有所不同。
4.利用变量控制每次点击内层圆时,四种不同的点击动画会依次显示,每次显示一种,下一次换一种,如此循环往复。
5.每次点击变大后,再次点击会以相同的曲线变小,同时保持颜色不变。
核心代码如下:
实现效果
适配的版本信息
IDE:DevEco Studio 4.0.1.601
SDK:HarmoneyOS 4.0.10.8