@Entry
@Component
struct Index {
@State metop: number = -80
@State mecolor: string = '#ff1c80e9'
@State mepan: boolean = false
build () {
Row () {
Column () {
Stack () {
Column ()
.width ( 200 )
.height ( 70 )
.backgroundColor ( this.mecolor )
.shadow ( { radius: 30, color: '#212121' } )
.border ( { radius: 50, style: BorderStyle.Solid } )
Column ()
.width ( 120 )
.height ( 70 )
.borderRadius ( 50 )
.border ( { width: 2, color: '#ff756d6d', style: BorderStyle.Solid } )
.linearGradient ( //渐变色
{
angle: 20,
colors: [['rgba(134, 126, 126, 1.00)', 0.2], ["rgba(215, 204, 204, 1.00)", 0.8]]
} )
.margin ( { left: this.metop } )
.onClick ( () => {
animateTo ( { duration: 500 }, () => {
this.mepan = !this.mepan
if (this.mepan) {
this.metop = 80
this.mecolor = '#ffec0e6e'
} else {
this.metop = -80
this.mecolor = '#ff1c80e9'
}
} )
} )
}
}
.width ( '100%' )
}
.height ( '100%' )
}
}
HarmonyOS鸿蒙ArkTS滑动动画按钮
原创
©著作权归作者所有:来自51CTO博客作者特创码农的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的css - 颜色滑动切换按钮
当鼠标悬浮在按钮上方时,按钮背景色从左往右滑动变化一个变化切换按钮。
css动画 动效设计 交互设计 用户体验 按钮 -
有趣的CSS - 按钮文字上下滑动
使用css实现按钮内两个元素上下滑动过渡的交互动画。
css html 按钮动效 ui -
有趣的css - 背景收缩动画按钮
借助 css transition 属性绘制出一个背景收缩交互的一个按钮。
css ux/ui 交互设计 动效设计 动画按钮 -
HarmonyOS 鸿蒙 ArkTS ArkUI 路径动画设置
HarmonyOS 鸿蒙 ArkTS ArkUI 路径动画设置
harmonyos 华为 取值范围 字符串 Text -
HarmonyOS鸿蒙ArkTS 模仿雷达动画效果
【代码】HarmonyOS鸿蒙ArkTS 模仿雷达动画效果。
harmonyos 鸿蒙 动画 前端 css -
HarmonyOS 鸿蒙 ArkTS 双色旋转动画效果
HarmonyOS 鸿蒙 ArkTS 双色旋转动画效果
harmonyos 华为 下载地址 资源下载 -
HarmonyOS 鸿蒙 ArkTS ArkUI 页面之间切换转换动画设置
HarmonyOS 鸿蒙 ArkTS ArkUI 页面之间切换转换动画设置
harmonyos 华为 鸿蒙 前端 ide -
鸿蒙 HarmonyOS ArkTS ArkUI 动画 中心旋转、空翻、旋转缩放
【代码】鸿蒙 HarmonyOS ArkTS ArkUI 动画 中心旋转、空翻、旋转缩放
harmonyos 前端 华为 css 鸿蒙