如何在OpenHarmony中创建动画

在OpenHarmony中创建动画可以通过使用ArkUI库来实现。以下是两种常见的动画创建方法：

1. 使用animateTo接口创建翻页动效

• 效果呈现：例如，实现书籍翻页的效果，通过旋转文本组件来模拟翻页动作。
• 实现思路：
  1. 创建上下两层的文本组件，分别代表书籍的左右两面。
  2. 通过旋转文本组件实现翻页效果。
  3. 使用rotate属性控制组件的旋转，并通过@Prop装饰器传递参数。

2. 使用translate()、setInterval()等方法创建逐帧动画

• 效果呈现：例如，实现火柴人走动的动画，通过逐帧移动火柴人图像来创建动画效果。
• 实现思路：
  1. 将火柴人拆分为多帧静态图像。
  2. 使用translate()控制火柴人的移动，backgroundImagePosition()控制背景图的移动。
  3. 通过setInterval()设置移动时间间隔，clearAllInterval()清除移动。

示例代码

翻页动效示例代码

@Componentstruct BookCard {
    @Propnum: number
    @Propy_position: string
    @Propx_position: string
    @Proprotate_angle: number

    build() {
        Text(`${this.num}`).fontWeight(FontWeight.Bold).backgroundColor('#18183C').fontColor('white').fontSize(80).width('25%').height('30%').fontFamily('Monospace').textAlign(TextAlign.Center).borderRadius(20).rotate({x:0,y:1,z:0,angle:this.rotate_angle,centerY:this.y_position,centerX:this.x_position})
    }
}

@Entry
@Componentstruct BookAnimation {
    build() {
        Stack() {
            Row() {
                BookCard()
                BookCard()
            }
            Row() {
                BookCard()
                BookCard()
            }
            Divider().strokeWidth(5).color('white').height('26%').vertical(true)
        }.width('100%').height('100%')
    }
}

逐帧动画示例代码

@Entry
@Componentexportdefault struct frameAnimation {
    manPosition: {x: number, y: number} = { x: 0, y: 0 }
    treePosition: {x: number, y: number} = { x: 0, y: 0 }

    build() {
        Column() {
            Row() {
                Image($r("app.media.man")).height(60).width(545.16).translate(this.manPosition)
            }
            Row() {
                Image($r("app.media.background")).backgroundImageSize(ImageSize.Cover).backgroundImagePosition(this.treePosition)
            }
            Row() {
                Button('run').margin({ right: 10 }).type(ButtonType.Normal).width(75).borderRadius(5)
            }
            Button('stop').type(ButtonType.Normal).borderRadius(5).width(75).backgroundColor('#ff0000').margin({ top: 30, bottom: 10 })
        }.width('100%').padding({ top: 30 })

        // 添加火柴人和背景图片的移动逻辑
        // ...
    }
}

以上示例展示了如何在OpenHarmony中使用ArkUI创建基本的翻页动效和逐帧动画。开发者可以根据具体需求调整动画效果和逻辑。