• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2025 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
16/**
17 * 为图片设置扫光效果
18 */
19import { curves } from '@kit.ArkUI';
20
21@Entry
22@Component
23struct ImageExample11 {
24  private curve = curves.cubicBezierCurve(0.33, 0, 0.67, 1);
25  @State moveImg: string[] = ['imageScanEffect'];
26  @State moveImgVisible: Visibility = Visibility.Visible;
27  @State durationTime: number = 1500;
28  @State iterationsTimes: number = -1;
29  @State private opacityValue: number = 0.5;
30  @State imageWidth: number = 450;
31  @State visible: Visibility = Visibility.Hidden;
32  @State stackBackgroundColor: string = '#E1E4E9';
33  @State linePositionX: number = 0 - this.imageWidth;
34  @State linePositionY: number = 0;
35  @State imgResource: Resource | undefined = undefined;
36
37  startupAnimate() {
38    this.moveImg.pop();
39    this.moveImg.push('imageScanEffect');
40    setTimeout(() => {
41      this.imgResource = $r('app.media.img');
42    }, 3000);
43    this.getUIContext()?.animateTo({
44      duration: this.durationTime,
45      curve: this.curve,
46      tempo: 1,
47      iterations: this.iterationsTimes,
48      delay: 0
49    }, () => {
50      this.linePositionX = this.imageWidth;
51    })
52  }
53
54  build() {
55    Column() {
56      Row() {
57        Stack() {
58          Image(this.imgResource)
59            .width(this.imageWidth)
60            .height(200)
61            .objectFit(ImageFit.Contain)
62            .visibility(this.visible)
63            .onComplete(() => {
64              this.visible = Visibility.Visible;
65              this.moveImg.pop();
66            })
67            .onError(() =>{
68              setTimeout(() => {
69                this.visible = Visibility.Visible;
70                this.moveImg.pop();
71              }, 2600)
72            })
73          ForEach(this.moveImg, (item: string) => {
74            Row()
75              .width(this.imageWidth)
76              .height(200)
77              .visibility(this.moveImgVisible)
78              .position({ x: this.linePositionX, y: this.linePositionY })
79              .linearGradient({
80                direction: GradientDirection.Right,
81                repeating: false,
82                colors: [[0xE1E4E9, 0], [0xFFFFFF, 0.75], [0xE1E4E9, 1]]
83              })
84              .opacity(this.opacityValue)
85          })
86        }
87        .backgroundColor(this.visible ? this.stackBackgroundColor : undefined)
88        .margin({top: 20, left: 20, right: 20})
89        .borderRadius(20)
90        .clip(true)
91        .onAppear(() => {
92          this.startupAnimate();
93        })
94      }
95    }
96  }
97}