?1.創建空白項目


2.Page文件夾下面新建Spin.ets文件，代碼如下：

/*** TODO SpinKit動畫組件 - 雙粒子旋轉縮放動畫* author: CSDN-鴻蒙布道師* since: 2025/05/08*/
@ComponentV2
export struct SpinFour {// 參數定義@Require @Param spinSize: number = 36;@Require @Param spinColor: ResourceColor = '#209ED8';// 局部狀態@Local x1: number = 0;@Local y1: number = 0;@Local scale1: number = 1;@Local angle1: number = 0;@Local x2: number = this.spinSize * 0.65;@Local y2: number = this.spinSize * 0.65;@Local scale2: number = 1;@Local angle2: number = 0;aboutToAppear(): void {this.x2 = this.spinSize * 0.65;this.y2 = this.spinSize * 0.65;}build() {RelativeContainer() {Canvas().chunkStyle().translate({ x: this.x1, y: this.y1 }).scale({ x: this.scale1, y: this.scale1 }).rotate({ angle: this.angle1 })Canvas().chunkStyle().translate({ x: this.x2, y: this.y2 }).scale({ x: this.scale2, y: this.scale2 }).rotate({ angle: this.angle2 })}.width(this.spinSize).height(this.spinSize).onAppear(() => {this.startAnimation();});}/*** 啟動無限循環的關鍵幀動畫*/private startAnimation(): void {const uiContext = this.getUIContext();if (!uiContext) return;const keyframes1 = this.createKeyframes(1);const keyframes2 = this.createKeyframes(2);uiContext.keyframeAnimateTo({ iterations: -1, delay: 0 }, keyframes1);uiContext.keyframeAnimateTo({ iterations: -1, delay: 0 }, keyframes2);}/*** 根據粒子編號創建對應的關鍵幀動畫* @param particleIndex 粒子索引（1 或 2）*/private createKeyframes(particleIndex: 1 | 2): Array<KeyframeState> {const updatePositionAndScale = (step: number): void => {if (particleIndex === 1) {switch (step) {case 1:this.scale1 = 0.5;this.angle1 = -90;this.x1 = this.spinSize * 0.65;break;case 2:this.scale1 = 1;this.angle1 = -180;this.x1 = this.spinSize * 0.65;this.y1 = this.spinSize * 0.65;break;case 3:this.scale1 = 0.5;this.angle1 = -270;this.x1 = 0;this.y1 = this.spinSize * 0.65;break;case 4:this.scale1 = 1;this.angle1 = -360;this.x1 = 0;this.y1 = 0;break;}} else {switch (step) {case 1:this.scale2 = 0.5;this.angle2 = -90;this.x2 = 0;this.y2 = this.spinSize * 0.65;break;case 2:this.scale2 = 1;this.angle2 = -180;this.x2 = 0;this.y2 = 0;break;case 3:this.scale2 = 0.5;this.angle2 = -270;this.x2 = this.spinSize * 0.65;break;case 4:this.scale2 = 1;this.angle2 = -360;this.x2 = this.spinSize * 0.65;this.y2 = this.spinSize * 0.65;break;}}};return [{duration: 500,curve: Curve.EaseInOut,event: (): void => updatePositionAndScale(1),},{duration: 500,curve: Curve.EaseInOut,event: (): void => updatePositionAndScale(2),},{duration: 500,curve: Curve.EaseInOut,event: (): void => updatePositionAndScale(3),},{duration: 500,curve: Curve.EaseInOut,event: (): void => updatePositionAndScale(4),},];}@StyleschunkStyle() {.height(this.spinSize * 0.35).width(this.spinSize * 0.35).backgroundColor(this.spinColor).shadow(ShadowStyle.OUTER_DEFAULT_XS)}
}

代碼如下：

/*** TODO SpinKit動畫組件 - 雙粒子旋轉縮放動畫* author: CSDN-鴻蒙布道師* since: 2025/05/08*/
@ComponentV2
export struct SpinFour {// 參數定義@Require @Param spinSize: number = 36;@Require @Param spinColor: ResourceColor = '#209ED8';// 局部狀態@Local x1: number = 0;@Local y1: number = 0;@Local scale1: number = 1;@Local angle1: number = 0;@Local x2: number = this.spinSize * 0.65;@Local y2: number = this.spinSize * 0.65;@Local scale2: number = 1;@Local angle2: number = 0;aboutToAppear(): void {this.x2 = this.spinSize * 0.65;this.y2 = this.spinSize * 0.65;}build() {RelativeContainer() {Canvas().chunkStyle().translate({ x: this.x1, y: this.y1 }).scale({ x: this.scale1, y: this.scale1 }).rotate({ angle: this.angle1 })Canvas().chunkStyle().translate({ x: this.x2, y: this.y2 }).scale({ x: this.scale2, y: this.scale2 }).rotate({ angle: this.angle2 })}.width(this.spinSize).height(this.spinSize).onAppear(() => {this.startAnimation();});}/*** 啟動無限循環的關鍵幀動畫*/private startAnimation(): void {const uiContext = this.getUIContext();if (!uiContext) return;const keyframes1 = this.createKeyframes(1);const keyframes2 = this.createKeyframes(2);uiContext.keyframeAnimateTo({ iterations: -1, delay: 0 }, keyframes1);uiContext.keyframeAnimateTo({ iterations: -1, delay: 0 }, keyframes2);}/*** 根據粒子編號創建對應的關鍵幀動畫* @param particleIndex 粒子索引（1 或 2）*/private createKeyframes(particleIndex: 1 | 2): Array<KeyframeState> {const updatePositionAndScale = (step: number): void => {if (particleIndex === 1) {switch (step) {case 1:this.scale1 = 0.5;this.angle1 = -90;this.x1 = this.spinSize * 0.65;break;case 2:this.scale1 = 1;this.angle1 = -180;this.x1 = this.spinSize * 0.65;this.y1 = this.spinSize * 0.65;break;case 3:this.scale1 = 0.5;this.angle1 = -270;this.x1 = 0;this.y1 = this.spinSize * 0.65;break;case 4:this.scale1 = 1;this.angle1 = -360;this.x1 = 0;this.y1 = 0;break;}} else {switch (step) {case 1:this.scale2 = 0.5;this.angle2 = -90;this.x2 = 0;this.y2 = this.spinSize * 0.65;break;case 2:this.scale2 = 1;this.angle2 = -180;this.x2 = 0;this.y2 = 0;break;case 3:this.scale2 = 0.5;this.angle2 = -270;this.x2 = this.spinSize * 0.65;break;case 4:this.scale2 = 1;this.angle2 = -360;this.x2 = this.spinSize * 0.65;this.y2 = this.spinSize * 0.65;break;}}};return [{duration: 500,curve: Curve.EaseInOut,event: (): void => updatePositionAndScale(1),},{duration: 500,curve: Curve.EaseInOut,event: (): void => updatePositionAndScale(2),},{duration: 500,curve: Curve.EaseInOut,event: (): void => updatePositionAndScale(3),},{duration: 500,curve: Curve.EaseInOut,event: (): void => updatePositionAndScale(4),},];}@StyleschunkStyle() {.height(this.spinSize * 0.35).width(this.spinSize * 0.35).backgroundColor(this.spinColor).shadow(ShadowStyle.OUTER_DEFAULT_XS)}
}

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

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

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

4.運行項目，登錄華為賬號，需進行簽名

5.動畫效果如下：
?