React Native 炫酷的动画库 实现任何AE动画 lottie-react-native

lottie-react-native

传送门

1.npm i --save lottie-react-native
2.react-native link lottie-ios
3.react-native link lottie-react-native

如果找不到文件 Lottie.h文件

Go to General > Embedded Binaries > add Lottie.framework

使用步骤:
```js
1.1.使用Adobe After Effects软件做出特效动画;

1.2.通过bodymovin项目工具把特效动画采用JSON格式文件进行导出;

1.3.用Lottie库进行解析JSON文件并且在移动端上面渲染效果即可。
```

相关参数:
js 1. source 导入json文件 2. progress 动画执行的进程 3. speed 动画执行的速度/number 4. loop 动画是否循环执行/boolean 5. autoPlay 是否自动播放/boolean 6. autoSize 是否原始大小/boolean 7. style 8. imageAssetsFolder 安卓需要配置图片资源,ios不要
两种执行的方法:
```js
componentDidMount() {

  1. 采用Animated方式
    Animated.timing(this.state.progress, {
    toValue: 1,
    duration: 5000,
    }).start();
    1. 使用库的方法
      this.animation.play();
      //重置
      // this.anim.reset();
      }

```

猜你喜欢

转载自www.cnblogs.com/allenxieyusheng/p/8944639.html
今日推荐