• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16const animationDuration: number = 500; // move动画时长
17const opacityChangeValue: number = 0.1; // opacity每次变化的值
18const opacityChangeRange: number = 1; // opacity变化的范围
19const translateYChangeValue: number = 180; // translateY每次变化的值
20const translateYChangeRange: number = 250; // translateY变化的范围
21const scaleXChangeValue: number = 0.6; // scaleX每次变化的值
22const scaleXChangeRange: number = 0.8; // scaleX每次变化的值
23
24// 样式属性类
25class UIStyle {
26  public translateX: number = 0;
27  public translateY: number = 0;
28  public scaleX: number = 0.3;
29  public scaleY: number = 0.3;
30}
31
32@Component
33struct SpecialImage {
34  @Link specialImageUiStyle: UIStyle;
35  private opacityNum: number = 0.5; // 默认透明度
36
37  private isRenderSpecialImage(): number {
38    // Image每次渲染时透明度增加0.1, 在0-1之间循环
39    this.opacityNum = (this.opacityNum + opacityChangeValue) % opacityChangeRange;
40    return this.opacityNum;
41  }
42
43  build() {
44    Column() {
45      Image($r('app.media.icon'))
46        .width($r('app.integer.special_image_width'))
47        .height($r('app.integer.special_image_width'))
48        .margin({ top: $r('app.integer.image_margin_top') })
49        .scale({
50          x: this.specialImageUiStyle.scaleX,
51          y: this.specialImageUiStyle.scaleY
52        })
53        .opacity(this.isRenderSpecialImage())
54      Text("SpecialImage")
55        .fontColor($r('app.color.text_color'))
56        .fontWeight(FontWeight.Medium)
57        .fontSize($r('app.integer.button_font_size'))
58        .margin({ top: $r('app.integer.text_margin_top') })
59    }
60    .backgroundColor($r('app.color.stack_color'))
61    .width($r('app.integer.stack_width'))
62    .height($r('app.integer.stack_height'))
63    .margin({ top: $r('app.integer.stack_margin_top') })
64    .borderRadius($r('app.integer.stack_border_radius'))
65  }
66}
67
68@Component
69struct ComponentA {
70  @Link uiStyle: UIStyle; // uiStyle的属性被多个组件使用
71
72  build() {
73    Column() {
74      // 使用状态变量的组件
75      SpecialImage({
76        specialImageUiStyle: this.uiStyle
77      })
78      Stack() {
79        Column() {
80          Image($r('app.media.icon'))
81            .opacity($r('app.float.icon_opacity'))
82            .scale({
83              x: this.uiStyle.scaleX,
84              y: this.uiStyle.scaleY
85            })
86            .width($r('app.integer.stack_icon_width'))
87            .height($r('app.integer.stack_icon_height'))
88        }
89        .width('100%')
90        .position({ y: $r('app.integer.stack_column_position_y') })
91
92        Stack() {
93          Text("Hello World")
94            .fontColor($r('app.color.text_color'))
95            .fontWeight(FontWeight.Medium)
96            .fontSize($r('app.integer.button_font_size'))
97            .margin({ top: $r('app.integer.text_margin_top') })
98        }
99        .position({
100          x: $r('app.integer.text_position_x'),
101          y: $r('app.integer.text_position_y')
102        })
103        .width('100%')
104        .height('100%')
105      }
106      .margin({ top: $r('app.integer.stack_margin_top') })
107      .borderRadius($r('app.integer.stack_border_radius'))
108      .backgroundColor($r('app.color.stack_color'))
109      .width($r('app.integer.stack_width'))
110      .height($r('app.integer.stack_height'))
111      .translate({
112        x: this.uiStyle.translateX,
113        y: this.uiStyle.translateY
114      })
115
116      // 通过按钮点击回调修改状态变量的值，引起相应的组件刷新
117      Column() {
118        Button('Move')
119          .width($r('app.integer.button_width'))
120          .fontSize($r('app.integer.button_font_size'))
121          .backgroundColor($r('app.color.button_color'))
122          .margin({ bottom: $r('app.integer.button_margin_bottom') })
123          .onClick(() => {
124            animateTo({
125              duration: animationDuration
126            }, () => {
127              this.uiStyle.translateY = (this.uiStyle.translateY + translateYChangeValue) % translateYChangeRange;
128            })
129          })
130        Button('Scale')
131          .backgroundColor($r('app.color.button_color'))
132          .fontSize($r('app.integer.button_font_size'))
133          .width($r('app.integer.button_width'))
134          .margin({ bottom: $r('app.integer.button_margin_bottom') })
135          .onClick(() => {
136            this.uiStyle.scaleX = (this.uiStyle.scaleX + scaleXChangeValue) % scaleXChangeRange;
137          })
138      }
139      .position({
140        y: $r('app.integer.button_column_position_y')
141      })
142      .height('100%')
143      .width('100%')
144    }
145    .width('100%')
146    .height('100%')
147  }
148}
149
150@Component
151export struct DFXStateBeforeOptimization {
152  @State uiStyle: UIStyle = new UIStyle();
153
154  build() {
155    Stack() {
156      ComponentA({
157        uiStyle: this.uiStyle
158      })
159    }
160    .backgroundColor($r('app.color.stack_background'))
161  }
162}