【甜甜酱OH实践】ETS动画第三方UI组件(npm本地安装) 原创 精华

发布于 2022-4-21 17:09
浏览
4收藏

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

示例

【甜甜酱OH实践】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

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

【甜甜酱OH实践】ETS动画第三方UI组件(npm本地安装)-开源基础软件社区

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

使用说明

请更新到1.0.1版本

引入组件

import { AnimationWrapper } from '@ohos/animationwrapper'

组件属性

  • 动画名称(@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%')
  }
}

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-4-26 11:57:11修改
9
收藏 4
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐