ITPub博客

首页 > 数据库 > 数据库开发技术 > HarmonyOS 鸿蒙 ArkTS ArkUI 模仿雷达动画效果

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

数据库开发技术 作者:像素工程师 时间:2024-01-20 16:33:46 0 删除 编辑

cke_222.gif

 

@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' )

}

}
}


亲爱的读者:

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

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

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

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

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

cke_2028.jpeg

再次感谢您的阅读和支持!

最诚挚的问候, “特创码农”

原文作者:;如有侵权,请联系管理员删除。

请登录后发表评论 登录
全部评论

注册时间:2019-05-09

  • 博文量
    11
  • 访问量
    527