HarmonyOS鸿蒙ArkTS 模仿雷达动画效果

特创数字科技

已于 2024-01-20 19:37:42 修改

阅读量720

点赞数 15

分类专栏：鸿蒙HarmonyOS社区文章标签： harmonyos 鸿蒙动画前端 css

于 2024-01-16 21:19:03 首次发布

本文链接：https://blog.csdn.net/weixin_54226053/article/details/135635608

版权

鸿蒙HarmonyOS社区专栏收录该内容

18 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在代码中运用Canvas技术创建一个动态的UI设计，包含三个重叠的圆形，最内圈会随着角度变化而旋转，使用了线性渐变和旋转光效果。适合对前端开发，特别是UI设计感兴趣的读者。

摘要由CSDN通过智能技术生成



@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State qidong: boolean = false
  @State num: number = 0

  onPageShow (): void {

    this.qidong = true
    console.log ( '页面触发', this.qidong )

    animateTo ( {
      duration: 2000,
      iterations: -1,
      curve:Curve.Linear

    }, () => {
       this.num = 360
    } )

  }

  build () {
    Row () {

      Stack ( { alignContent: Alignment.Center } ) { //重叠居中
        //最外层的圈
        Column () {}
        .width ( 150 )
        .height ( 150 )
        .backgroundColor ( 'rgba(0,0,0,0)' )
        .opacity ( 0.1 ) //透明
        .borderRadius ( 100 ) //圆角
        .shadow ( { radius: 50, color: '#000000' } ) //阴影
        .border ( { width: 1, color: '#ffffff', style: BorderStyle.Dashed } ) //边框
        .zIndex ( 1 )
        //中间的圈
        Column () {}
        .width ( 100 )
        .height ( 100 )
        .linearGradient (
          {
            angle: 180,
            colors: [['rgba(0,0,0,0.25)', 0.1], ["rgba(0,0,0,0.25)", 0.6]]
          } )
        .opacity ( 0.1 )
        .border ( { width: 1, color: '#c0dbe0', style: BorderStyle.Solid } ) //边框
        .borderRadius ( 100 ) //圆角
        .zIndex ( 2 )

        //最里面的圈
        Column () {}
        .width ( 50 )
        .height ( 50 )
        .opacity ( 0.1 )
        .linearGradient ( //渐变色
          {
            angle: 180,
            colors: [['rgba(0,0,0,0.25)', 0.1], ["rgba(0,0,0,0.25)", 0.6]]
          } )
        .border ( { width: 1, color: '#c0dbe0', style: BorderStyle.Solid } ) //边框
        .borderRadius ( 100 ) //圆角
        .zIndex ( 5 )

        //旋转光
        Column(){}
        .width ( 70 )
        .height ( 70 )
        .margin ( { bottom: 70,left:70 } )
        .borderRadius({topRight:70})
        .shadow ( { radius:150, color: '#2e8b57'} ) //阴影
        .backgroundColor('#2e8b57')
        .opacity ( 0.7 ) //透明
        .zIndex ( 7 )
        .rotate ( {
          x: 0,
          y: 0,
          z: 1,
          angle: this.num,
          centerX:0,
          centerY:70,
        } )

      }
      .height ( '100%' )
      .width ( '100%' )
      .backgroundColor ( '#212121' )

    }

  }
}

亲爱的读者：

首先，我要感谢您抽出宝贵的时间阅读这篇文章。我深知，您的每一分每一秒都是宝贵的。为此，我在创作这篇文章时付出了巨大的努力，力求为您提供最具价值的内容。

这篇文章汇聚了我多年的经验与心得，我深信，其中的信息将对您的生活或工作有所启发。如果您觉得这篇文章对您有所裨益，那么，我诚邀您给予一定的赞赏。这份微薄的费用，对您来说可能只是举手之劳，但对我而言，却是极大的鼓励和支持。

我始终坚信，知识的分享是一种力量。因此，我笔耕不辍，希望通过文字与您共同成长。您的每一次支持，都是对我最大的鼓舞，也激发了我创作更多优质内容的热情。

如果您愿意为我加油打气，诚邀您给予一定的赞赏。同时，您的反馈和建议对我而言意义非凡，期待与您在评论区交流心得。

再次感谢您的阅读与支持！愿您一切安好，技术超标。