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

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

目录

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")
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

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

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

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

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

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

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

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

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

}.width(144).height(74)
.backgroundColor(this.isActive ? "#ef437f" : "#5a5a5a")
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

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

}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2022-7-19 00:08:05修改
9
收藏 3
回复
举报
9
2
3
2条回复
按时间正序
/
按时间倒序
时空未宇
时空未宇

呜呼,炫酷啊🤩🤩

回复
2022-6-25 14:45:12
SummerRic
SummerRic

🤩🤩🤩

回复
2022-6-28 13:31:01
回复
    相关推荐