【如此之白】ETS动画第三方UI组件（npm本地安装）原创精华

如此之白

发布于 2022-4-21 17:09

浏览

5收藏

上一篇试着实现了AnimateCSS效果
【甜甜酱OH实践】ETS简单实现AnimateCSS动画
我想了想是不是可以做一个第三方组件把想要执行动画的组件包裹起来，我就不用每个组件都实现一遍动画。
于是我尝试写了一个AnimationWrapper，不是很成熟，大家有兴趣可以试试~
组件地址：https://gitee.com/hytyj_hamstermie/ohos-animationwrapper

示例

【如此之白】ETS动画第三方UI组件（npm本地安装）-鸿蒙开发者社区

AnimationWrapper

介绍

OpenHarmony ETS实现AnimateCSS动画库

现在只有两个动画，后续会陆续添加

动画效果参考：https://animate.style/

安装教程

请不要在DevEco IDE中添加第三方库

请按照以下步骤：

1、命令行进入项目entry目录，执行npm

npm install git+https://gitee.com/hytyj_hamstermie/ohos-animationwrapper.git
1.

2、安装完成后打开IDE，查看entry/package.json可以看到已经安装依赖

【如此之白】ETS动画第三方UI组件（npm本地安装）-鸿蒙开发者社区

3、若无法显示或者无法看到更新内容，请删除.preview文件夹后，重启previewer或者重启IDE。

使用说明

请更新到1.0.1版本

引入组件

import { AnimationWrapper } from '@ohos/animationwrapper'
1.

组件属性

动画名称（@Provide）：animationName: string
- bounce
- pulse
动画持续时长：duration: number
动画执行次数：time: number

至少执行1次，Infinity 执行无限次
builder：组件构建器

@Builder装饰器方法
动画执行完成：onAnimationComplete: ()=>void

如果执行次数选择无限次则不会执行该方法

示例

import { AnimationWrapper } from '@ohos/animationwrapper'

@Entry
@Component
struct Index {
  @Provide('animationName') name: string = ''

  @Builder AnimateText() {
    Column() {
      Text('Animate.css').fontSize(50).fontWeight(FontWeight.Bold).fontColor('#351c75')
    }
  }

  build() {
    Flex({
      alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center,
      direction: FlexDirection.Column
    }) {

      Column() {
        AnimationWrapper({
          duration: 1000,
          time: 1,
          builder: this.AnimateText
        })
      }

      Button('执行动画 bounce').margin({ top: 50 }).onClick(async () => {
        this.name = 'bounce'
      })

      Button('执行动画 pulse').margin({ top: 20 }).onClick(async () => {
        this.name = 'pulse'
      })
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.