AnimationPlayer

添加 <animation-player> 标签,提供播放 Flutter Flare 动画的能力。

快速使用

kraken_animation_player 作为项目依赖添加到 pubspec.yaml 文件中。

在调用 runApp() 之前添加以下代码:

  1. import 'package:kraken_animation_player/kraken_animation_player.dart';
  2. void main() {
  3. KrakenAnimationPlayer.initialize();
  4. runApp(MyApp());
  5. }

示例

  1. const ASSET = 'https://kraken.oss-cn-hangzhou.aliyuncs.com/data/Teddy.flr';
  2. const animationPlayer = document.createElement('animation-player');
  3. animationPlayer.setAttribute('type', 'flare');
  4. animationPlayer.setAttribute('src', ASSET);
  5. Object.assign(animationPlayer.style, {
  6. width: '360px',
  7. height: '640px',
  8. objectFit: 'contain',
  9. });
  10. document.body.appendChild(animationPlayer);
  11. document.body.onclick = () => animationPlayer.play('hands_up');

API

属性

src

动画文件地址

type

动画文件的类型

方法

play(name: string)

播放动画