@toc

1. 实现效果

对自定义的按钮添加动态效果，通过这种实现的思路还可以实现更改更多的按钮效果。

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}))

这样我们得到了一个粉色的长方形，然后对这个长方形中间添加一个稍长的青色矩形，代码以下：

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

要使用蒙版效果让旋转的Rect只显示在里面，需要clip将其裁剪，入参为Rect，即按照Rect的形状进行裁剪。

接下来就是让青色矩形进行旋转就行了， 参考Codelabs里的风车旋转, 使用定时改变旋转角度.

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

下来就是在粉色的Stack中再添加一个小一点的Stack进行遮盖.

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

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

这样就可以在按钮的边框上呈现出一种流光的效果，再添加文字上去。

再添加一个点击时改变按钮背景色，这样一个流光效果按钮就差不多了。

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 流光按钮效果