OpenHarmony开发者论坛

标题: 属性动画示例 [打印本页]
作者: hyacinth养花人    时间: 2023-9-15 18:34
标题: 属性动画示例
场景介绍
在日常开发过程中，通常会出现因为状态变化导致组件属性值发生变化，如：

效果呈现
效果图如下：
场景1：属性动画
(, 下载次数: 23)

场景2：弹性动态
(, 下载次数: 21)

场景3：曲线动画
(, 下载次数: 24)

运行环境
本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发

场景1：属性动画
实现思路
本实例涉及到的主要特性及其实现方案如下：




开发步骤
针对实现思路中所提到的内容，具体关键开发步骤如下：
1. 通过Column、Grid、button、Text等关键组件以及visibility属性搭建UI框架，以及渲染数字按钮。
具体代码如下：


  2.   private numGrid: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, -1, 0, -1]

  4.   build() {
  5.     Row() {
  6.       Column() {
  7.         Grid() {
  8.           //通过ForEach循环遍历，显示数字数字按钮
  9.           ForEach(this.numGrid, (item, index) => {
  10.             GridItem() {
  11.               Button() {
  12.                 Text(`${item}`)
  13.                   .fontSize(30)
  14.               }
  15.               .backgroundColor('#fff')
  16.               .width(100)
  17.               .height(100)
  18.               // item为-1时，数字按钮不显示
  19.               .visibility(item == -1 ? Visibility.Hidden : Visibility.Visible)
  20.             }
  21.           }, item => item)
  22.         }
  23.         .columnsTemplate('1fr 1fr 1fr')
  24.         .rowsTemplate('1fr 1fr 1fr 1fr')
  25.         .columnsGap(10)
  26.         .rowsGap(10)
  27.         .width(330)
  28.         .height(440)
  29.       }
  30.       .width('100%')
  31.       .height('100%')
  32.     }
  33.   }
复制代码
2. 设置状态变量flag,用来控制属性状态的变化，同时向Button组件添加onTouch事件，更新按钮的当前状态，从而可以根据监听到的按钮状态加载对应的动画效果。
具体代码如下：

  1. //状态变量flag，用于监听按钮按下和放开的状态，默认至为false（放开状态）
  2. @State flag: boolean = false;
  3. ...
  4. .onTouch((event:TouchEvent) => {
  5.     //当按钮按下时，更新按钮的状态（flag：false -> true）
  6.     if (event.type == TouchType.Down) {
  7.         this.flag = true
  8.         this.currIndex = index
  9.     }
  10.     //当按钮放开时，更新按钮的状态（flag：true -> false）
  11.     if (event.type == TouchType.Up) {
  12.         this.flag = false
  13.     }
  14. })
复制代码
3. 根据按钮组件的按下/放开状态，通过三元运算判断并更新按钮背景色。
具体代码如下：
  1. Button(){
  2.     ...
  3.     // 当按钮被按下(flag变更为true)时，当前按钮backgroundColor属性变更（"#fff" -> "#D2C3D5" ）
  4.     // 当按钮被放开(flag变更为false)时，当前按钮backgroundColor属性变更（"#D2C3D5" -> "#FFF" ）
  5.     .backgroundColor(this.flag && this.currIndex == index ? '#D2C3D5' : '#fff')
  6.     .animation({
  7.         duration: 200
  8.     })
  9. }
复制代码
完整代码
  1. @Entry
  2. @Component
  3. struct Index {
  4.   private currIndex: number = -1
  5.   private numGrid: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, -1, 0, -1]
  6.   //状态变量flag，用于监听按钮按下和放开的状态，默认至为false（放开状态）
  7.   @State flag: boolean = false;

  9.   build() {
  10.     Row() {
  11.       Column() {
  12.         Grid() {
  13.           ForEach(this.numGrid, (item, index) => {
  14.             GridItem() {
  15.               Button() {
  16.                 Text(`${item}`)
  17.                   .fontSize(30)
  18.               }
  19.                // 当按钮被按下(flag变更为true)时，当前按钮backgroundColor属性变更（"#fff" -> "#D2C3D5" ）
  20.                            // 当按钮被放开(flag变更为false)时，当前按钮backgroundColor属性变更（"#D2C3D5" -> "#FFF" ）
  21.               .backgroundColor(this.flag && this.currIndex == index ? '#D2C3D5' : '#fff')
  22.               .animation({
  23.                 duration: 200
  24.               })
  25.               .width(100)
  26.               .height(100)
  27.               .visibility(item == -1 ? Visibility.Hidden : Visibility.Visible)
  28.               .onTouch((event:TouchEvent) => {
  29.                 //当按钮按下时，更新按钮的状态（flag：false -> true）
  30.                 if (event.type == TouchType.Down) {
  31.                   this.flag = true
  32.                   this.currIndex = index
  33.                 }
  34.                 //当按钮放开时，更新按钮的状态（flag：true -> false）
  35.                 if (event.type == TouchType.Up) {
  36.                   this.flag = false
  37.                 }
  38.               })
  39.             }
  40.           }, item => item)
  41.         }
  42.         .columnsTemplate('1fr 1fr 1fr')
  43.         .rowsTemplate('1fr 1fr 1fr 1fr')
  44.         .columnsGap(10)
  45.         .rowsGap(10)
  46.         .width(330)
  47.         .height(440)
  48.       }
  49.       .width('100%')
  50.       .height('100%')
  51.     }
  52.   }
  53. }
复制代码



作者: everday    时间: 2024-7-31 16:24
有用的分享



欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5