TRANSFER.md · LalHan/LottieC - Gitee.com

6月21日 Gitee Talk | 模力方舟 AI 应用沙龙 · 青岛站开放报名，来聊聊 AI+ 应用的多场景落地实践~

forked from openharmony-tpc-incubate/LottieC

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

文件

克隆/下载

TRANSFER.md 2.46 KB

## 使用方式上的变化

### 加载动画
- LottieArkTS使用示例
```
build() {
Canvas(this.canvasRenderingContext)
      .width('45%')
      .height(200)
      .backgroundColor(Color.Gray)
}

this.animateItem = lottie.loadAnimation({
    container: this.canvasRenderingContext, //CanvasRenderingContext2D对象
    renderer: 'canvas', // canvas 渲染模式
    loop: true,  // 是否循环播放
    autoplay: true, // 是否自动播放
    name: '2016',  //定义动画名
    contentMode: 'Contain',  //填充的模式
    path: "common/lottie/robotYoga.json", //加载动画路径
  })
```

- LottieC使用示例
```
build() {
    LottieView({
                  loop: true, // 是否循环播放
                  autoplay: true, // 是否自动播放
                  name: '2016', //定义动画名
                  contentMode: 'Contain', //填充的模式
                  path: "common/lottie/robotYoga.json", //加载动画路径
                  controller: this.controller, //动画控制器
                  listener: this.listener //监听事件容器
                })
}            
```

**注意：现在加载发生变化，逻辑与原有存在差异，加载时机变为build中触发。而不是调用loadAnimation。**

### 控制动画

- LottieArkTS使用示例
```
build() {
Canvas(this.canvasRenderingContext)
      .width('45%')
      .height(200)
      .backgroundColor(Color.Gray)
}

this.animateItem = lottie.loadAnimation({
    container: this.canvasRenderingContext, //CanvasRenderingContext2D对象
    renderer: 'canvas', // canvas 渲染模式
    loop: true,  // 是否循环播放
    autoplay: false, // 是否自动播放
    name: '2016',  //定义动画名
    contentMode: 'Contain',  //填充的模式
    path: "common/lottie/robotYoga.json", //加载动画路径
  })
  
  this.animateItem.paly() //播放动画
```

- LottieC使用示例
```
build() {
    LottieView({
                  loop: true, // 是否循环播放
                  autoplay: true, // 是否自动播放
                  name: '2016', //定义动画名
                  contentMode: 'Contain', //填充的模式
                  path: "common/lottie/robotYoga.json", //加载动画路径
                  controller: this.controller, //动画控制器
                  listener: this.listener //监听事件容器
                })
} 
this.controller.paly() //播放动画 
```

**现在动画的控制是通过controller去进行控制,controller与动画是一一对应的关系**

一键复制编辑原始数据按行查看历史

提交于 2024-12-24 11:10 +08:00 . docs:增加README;根据建议修改c侧;

## 使用方式上的变化

### 加载动画
- LottieArkTS使用示例
```
build() {
Canvas(this.canvasRenderingContext)
      .width('45%')
      .height(200)
      .backgroundColor(Color.Gray)
}

this.animateItem = lottie.loadAnimation({
    container: this.canvasRenderingContext, //CanvasRenderingContext2D对象
    renderer: 'canvas', // canvas 渲染模式
    loop: true,  // 是否循环播放
    autoplay: true, // 是否自动播放
    name: '2016',  //定义动画名
    contentMode: 'Contain',  //填充的模式
    path: "common/lottie/robotYoga.json", //加载动画路径
  })
```

- LottieC使用示例
```
build() {
    LottieView({
                  loop: true, // 是否循环播放
                  autoplay: true, // 是否自动播放
                  name: '2016', //定义动画名
                  contentMode: 'Contain', //填充的模式
                  path: "common/lottie/robotYoga.json", //加载动画路径
                  controller: this.controller, //动画控制器
                  listener: this.listener //监听事件容器
                })
}            
```

**注意：现在加载发生变化，逻辑与原有存在差异，加载时机变为build中触发。而不是调用loadAnimation。**

### 控制动画

- LottieArkTS使用示例
```
build() {
Canvas(this.canvasRenderingContext)
      .width('45%')
      .height(200)
      .backgroundColor(Color.Gray)
}

this.animateItem = lottie.loadAnimation({
    container: this.canvasRenderingContext, //CanvasRenderingContext2D对象
    renderer: 'canvas', // canvas 渲染模式
    loop: true,  // 是否循环播放
    autoplay: false, // 是否自动播放
    name: '2016',  //定义动画名
    contentMode: 'Contain',  //填充的模式
    path: "common/lottie/robotYoga.json", //加载动画路径
  })
  
  this.animateItem.paly() //播放动画
```

- LottieC使用示例
```
build() {
    LottieView({
                  loop: true, // 是否循环播放
                  autoplay: true, // 是否自动播放
                  name: '2016', //定义动画名
                  contentMode: 'Contain', //填充的模式
                  path: "common/lottie/robotYoga.json", //加载动画路径
                  controller: this.controller, //动画控制器
                  listener: this.listener //监听事件容器
                })
} 
this.controller.paly() //播放动画 
```

**现在动画的控制是通过controller去进行控制,controller与动画是一一对应的关系**

Loading...

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

1

https://gitee.com/lalhan/lottie-c.git

git@gitee.com:lalhan/lottie-c.git

lalhan

lottie-c

LottieC

master