数字按键点击动画,点击按键和离开时都会出现动画效果提示用户按压位置和效果

设备的软键盘中的数字按键点击反馈,点击按键和离开时都会出现动画效果提示用户按压位置和效果

HarmonyOS
2024-05-26 16:15:56
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
kraml

使用的核心API

Grid

核心代码解释

1.先通过Grid,GridItem等容器组件将UI框架搭建起来,在GuidItem中引用步骤2中的自定义数字按钮numBtn构建出数字栅格。

private numGrid: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, -1, 0, -1] 
​ 
 build() { 
   Column() { 
     Grid() { 
       ForEach(this.numGrid, (item: number, index: number) => { 
         GridItem() { 
           numBtn({ item: item, index: index }) 
        } 
      }, item => item) 
    } 
    .columnsTemplate('1fr 1fr 1fr') 
    .rowsTemplate('1fr 1fr 1fr 1fr') 
    .columnsGap(10) 
    .rowsGap(10) 
    .width(330) 
    .height(440) 
  }.width('100%').height('100%')

2.通过Column、Button、Stack、Text等关键组件以及visibility属性构建自定义数字按钮numBtn。

@Component 
struct numBtn { 
 ··· 
 build() { 
   Column() { 
       Button() { 
           stack(){ 
               ... 
               Text(`${this.item}`).fontSize(30) 
          } 
           ... 
      } 
      .backgroundColor('#ccc')  
      .type(ButtonType.Circle) 
      .borderRadius(100) 
      .width(100) 
      .height(100)    
  } 
  .visibility(this.item == -1 ? Visibility.Hidden : Visibility.Visible) 
  .borderRadius(100) 
} 
}

3.设置状态变量unPressed,监听当前数字按钮的状态,同时向Column组件添加onTouch事件,获取并更新按钮的当前状态,从而可以根据监听到的按钮状态加载对应的动画效果。

//状态变量unPressed,用于监听按钮按下和放开的状态 
@State unPressed: boolean = true  
... 
// 添加onTouch事件,监听状态 
.onTouch((event: TouchEvent) => { 
 // 当按钮按下时,更新按钮的状态(unPressed:true -> false) 
 if (event.type == TouchType.Down) { 
   animateTo({ duration: 400 }, () => { 
     this.unPressed = !this.unPressed 
     this.currIndex = this.index 
  }) 
} 
 // 当按钮放开时,更新按钮的状态(unPressed:false -> true) 
 if (event.type == TouchType.Up) { 
   animateTo({ duration: 400 }, () => { 
     this.unPressed = !this.unPressed 
  }) 
} 
})

4.根据按钮组件的按下/放开状态,通过if-else语句选择插入的Row组件,并随之呈现不同的水波动画效果(按下时水波聚拢,放开时水波扩散)。

Stack() { 
 Row() { 
   // 判断当前按钮组件为放开状态 
   if (this.unPressed && this.currIndex == this.index) { 
     // 插入Row组件,配置过渡效果 
     Row() 
      .customStyle() 
      .backgroundColor('#fff') 
         // 水波纹扩散动画:从Row组件的中心点开始放大,scale{0,0}变更scale{1,1}(完整显示) 
      .transition({ 
         type: TransitionType.Insert, 
         opacity: 0, 
         scale: { x: 0, y: 0, centerY: '50%', centerX: '50%' } 
      }) 
  } 
   // 判断当前按钮组件为按下状态 
   else if (!this.unPressed && this.currIndex == this.index) { 
     // 插入Row组件,配置过渡效果 
     Row() 
      .customStyle() 
      .backgroundColor(this.btnColor) 
      .scale(this.btnScale) 
      .onAppear(() => { 
         // 水波纹聚拢动画:Row组件backgroundColor属性变更(#ccc -> #fff),插入动画过渡效果,scale{1,1}(完整显示)变化为scale{0,0}  
         animateTo({ duration: 300, 
           // 聚拢动画播放完成后,需要衔接扩散动画,Row组件backgroundColor属性变更(#fff -> #ccc),插入动画过渡效果,scale{0,0}变化为scale{1,1}(完整显示) 
           onFinish: () => { 
             this.btnColor = '#ccc' 
             this.btnScale = { x: 1, y: 1 } 
          } }, 
          () => { 
             this.btnColor = '#fff' 
             this.btnScale = { x: 0, y: 0 } 
          }) 
      }) 
  } 
   // 其他状态 
   else { 
     Row() 
      .customStyle() 
      .backgroundColor('#fff') 
  } 
} 
.justifyContent(FlexAlign.Center) 
.alignItems(VerticalAlign.Center) 
.borderRadius(100) 
 Text(`${this.item}`).fontSize(30) 
} 
.customStyle()
分享
微博
QQ
微信
回复
2024-05-27 21:41:48
相关问题
属性动画如何实现宽高动画效果
675浏览 • 1回复 待解决
如何实现动画转场效果
385浏览 • 1回复 待解决
文字动画效果如何实现
796浏览 • 0回复 待解决
panGesture结合动画实现fling效果
402浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
8940浏览 • 2回复 待解决
如何实现按钮的点击效果
21浏览 • 2回复 待解决
Button等控件设置点击效果
324浏览 • 1回复 待解决
求助动画效果问题有懂的吗?
3016浏览 • 1回复 待解决
如何监听手机“返回”物理按键
8749浏览 • 2回复 已解决
有无JS UI开发的物理按键接口?
2040浏览 • 1回复 待解决