当前位置：首页 > backend >正文

鸿蒙NEXT开发动画案例5

backend 2025/7/3 8:51:05

1.创建空白项目

2.Page文件夹下面新建Spin.ets文件，代码如下：

/*** TODO SpinKit动画组件 - Pulse 脉冲动画* author: CSDN—鸿蒙布道师* since: 2024/05/09*/
@ComponentV2
export struct SpinFive {// 参数定义@Require @Param spinSize: number = 48;@Require @Param spinColor: ResourceColor = '#209ED8';// 局部状态@Local scale1: number = 1;@Local opacity1: number = 1;build() {Canvas().width(this.spinSize).height(this.spinSize).borderRadius(this.spinSize).backgroundColor(this.spinColor).renderFit(RenderFit.CENTER).scale({ x: this.scale1, y: this.scale1 }).opacity(this.opacity1).onAppear(() => {this.startAnimation();})}/*** 启动无限循环的关键帧动画*/private startAnimation(): void {const uiContext = this.getUIContext();if (!uiContext) return;const keyframes: Array<KeyframeState> = [{duration: 0,curve: Curve.EaseInOut,event: (): void => {this.scale1 = 0;this.opacity1 = 1;},},{duration: 1000,curve: Curve.EaseInOut,event: (): void => {this.scale1 = 1.0;this.opacity1 = 0.01;},}];uiContext.keyframeAnimateTo({ iterations: -1, delay: 0 },keyframes);}
}

代码如下：

/*** TODO SpinKit动画组件 - Pulse 脉冲动画* author: CSDN—鸿蒙布道师* since: 2024/05/09*/
@ComponentV2
export struct SpinFive {// 参数定义@Require @Param spinSize: number = 48;@Require @Param spinColor: ResourceColor = '#209ED8';// 局部状态@Local scale1: number = 1;@Local opacity1: number = 1;build() {Canvas().width(this.spinSize).height(this.spinSize).borderRadius(this.spinSize).backgroundColor(this.spinColor).renderFit(RenderFit.CENTER).scale({ x: this.scale1, y: this.scale1 }).opacity(this.opacity1).onAppear(() => {this.startAnimation();})}/*** 启动无限循环的关键帧动画*/private startAnimation(): void {const uiContext = this.getUIContext();if (!uiContext) return;const keyframes: Array<KeyframeState> = [{duration: 0,curve: Curve.EaseInOut,event: (): void => {this.scale1 = 0;this.opacity1 = 1;},},{duration: 1000,curve: Curve.EaseInOut,event: (): void => {this.scale1 = 1.0;this.opacity1 = 0.01;},}];uiContext.keyframeAnimateTo({ iterations: -1, delay: 0 },keyframes);}
}

3.修改Index.ets文件，代码如下：

import { SpinFive } from './Spin';@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {SpinFive({spinSize: 60,spinColor: '#FF0000'})}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height('100%').width('100%')}
}代码如下：

import { SpinFive } from './Spin';@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {SpinFive({spinSize: 60,spinColor: '#FF0000'})}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height('100%').width('100%')}
}

4.运行项目，登录华为账号，需进行签名

5.动画效果如下：