属性动画示例

场景介绍
在日常开发过程中，通常会出现因为状态变化导致组件属性值发生变化，如：

• 数字键盘按键时，对应数字按钮背景色加深，呈现被点击效果；放开按键时，呈现取消选中效果,
• UI中图标按下时，图标出现弹性缩放效果,
• 在做数据统计时，随着数据值的变化，统计曲线随之变化等动画效果， 本例将为大家介绍下如何通过属性动画实现上述场景。
  

效果呈现
效果图如下：
场景1：属性动画


场景2：弹性动态


场景3：曲线动画


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

• IDE: DevEco Studio 3.1 Release
• SDK: Ohos_sdk_public 3.2.12.5(API Version 9 Release)
  

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

• 通过Column、Grid、button、Text等关键组件以及visibility属性搭建UI局框架，以及渲染数字按钮。
• 设置状态变量flag,用来控制属性状态的变化，同时向Button组件添加onTouch事件，更新按钮的当前状态，从而可以根据监听到的按钮状态加载对应的动画效果   。
  

• 默认状态为按钮放开状态（flag为false）。
• 当按钮按下时，更新按钮的状态（flag：false -> true）。
• 当按钮放开时，更新按钮的状态（flag：true -> false）。
  

• 根据按钮组件的按下/放开状态，通过三元运算判断，使用属性动画更新按钮的选中/取消效果。
  

• 当按钮按下时，加载属性动画：按钮被选中效果。
• 当按钮放开时，加载属性动画：按钮取消选中效果。
  

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

1. 
   
2.   private numGrid: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, -1, 0, -1]
   
3. 
   
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;
   
8. 
   
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. }

复制代码

有用的分享