ArkUI eTS上实现"流光按钮"效果 原创 精华

发布于 2022-6-25 03:58
浏览
3收藏

@toc

1. 实现效果

对自定义的按钮添加动态效果,通过这种实现的思路还可以实现更改更多的按钮效果。
ArkUI eTS上实现"流光按钮"效果-开源基础软件社区

2. 实现原理

在两个Stack堆叠容器中间画一个长一点并且短一点的Rect矩形并添加旋转和嵌入效果,而且最上面的Stack要比最下面的Stack要小一些,这样就能够看到中间旋转的Rect的动态效果.

3. 实现过程

因为按钮不仅有视觉效果,还会有文字提示,这里用到了自定义标签text,当然你也可以用其他的标签来包裹。
绘制一个大致的按钮框架

Stack({ alignContent: Alignment.Center}) {
                // 绘制旋转青色矩形
                Rect().width(300).height(60).fill("#00FFFF")
                // 蒙住青色矩形多余部分
                Stack({ alignContent: Alignment.Center}) {
                    // 按钮文本
                    Text('按钮').fontSize(30).fontColor("#00FFFF")
                }.width(144).height(74)
}.width(150).height(80).backgroundColor("#ef437f")

最下面也就是最底下的Stack的代码以下:

// 外部堆叠容器
Stack({ alignContent: Alignment.Center}) {
      // 旋转青色矩形
      // 蒙住青色矩形多余部分
}.width(150).height(80).backgroundColor("#ef437f")
// 裁剪超出外部堆叠容器内部
.clip(new Rect({width: 150, height: 80}))

ArkUI eTS上实现"流光按钮"效果-开源基础软件社区
这样我们得到了一个粉色的长方形,然后对这个长方形中间添加一个稍长的青色矩形,代码以下:

// 绘制旋转青色矩形
Rect().width(300).height(60).fill("#00FFFF")
.rotate({ x: 0, y: 0, z: 1, angle: this.angle })

ArkUI eTS上实现"流光按钮"效果-开源基础软件社区
要使用蒙版效果让旋转的Rect只显示在里面,需要clip将其裁剪,入参为Rect,即按照Rect的形状进行裁剪。
ArkUI eTS上实现"流光按钮"效果-开源基础软件社区
接下来就是让青色矩形进行旋转就行了, 参考Codelabs里的风车旋转, 使用定时改变旋转角度.

// 蒙住青色矩形多余部分
.rotate({ x: 0, y: 0, z: 1, angle: this.angle })

ArkUI eTS上实现"流光按钮"效果-开源基础软件社区
下来就是在粉色的Stack中再添加一个小一点的Stack进行遮盖.

// 蒙住青色矩形多余部分
Stack({ alignContent: Alignment.Center}) {

}.width(144).height(74)
.backgroundColor(this.isActive ? "#ef437f" : "#5a5a5a")

ArkUI eTS上实现"流光按钮"效果-开源基础软件社区
这样就可以在按钮的边框上呈现出一种流光的效果,再添加文字上去。
ArkUI eTS上实现"流光按钮"效果-开源基础软件社区
再添加一个点击时改变按钮背景色,这样一个流光效果按钮就差不多了。
ArkUI eTS上实现"流光按钮"效果-开源基础软件社区

4. 总结

在这里,我使用了 rotate的特性来实现旋转效果,并利用定时器来修改旋转角度,最后献上全部代码,方便小伙伴们学习。

@Entry
@Component
struct Index {
    @State private angle:number = 0;
    @State private speed:number = 5;
    @State private interval:number = 0;
    @State private isActive:boolean = false;

    build() {
        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Center,
            alignContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {

            // 外部堆叠容器
            Stack({ alignContent: Alignment.Center}) {
                // 绘制旋转青色矩形
                Rect().width(300).height(60).fill("#00FFFF")
                .rotate({ x: 0, y: 0, z: 1, angle: this.angle })
                // 蒙住青色矩形多余部分
                Stack({ alignContent: Alignment.Center}) {
                    // 按钮文本
                    Text('按钮').fontSize(30).fontColor("#00FFFF")
                }.width(144).height(74)
                .backgroundColor(this.isActive ? "#ef437f" : "#5a5a5a")
                .onClick(() => {
                    this.isActive = !this.isActive
                })

            }.width(150).height(80).backgroundColor("#ef437f")
            // 裁剪超出外部堆叠容器内部
            .clip(new Rect({width: 150, height: 80}))

        }
        .width('100%')
        .height('100%')
    }

    speedChange() {
        var that = this
        that.angle = 0
        this.interval = setInterval(function(){
            that.angle += that.speed
        }, 15)
    }

    onPageShow() {
        clearInterval(this.interval)
        this.speedChange()
    }

}

备注:思路参考来自 #夏日挑战赛# HarmonyOS - 方舟开发框架ArkUI 流光按钮效果

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2022-7-19 00:08:05修改
7
收藏 3
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐