Flutter动画播放插件kraken_animation_player的使用

Flutter动画播放插件kraken_animation_player的使用

kraken_animation_player 是一个 kraken 插件，它提供了 <animation-player /> 标签来播放动画格式文件。

支持的格式：

安装

首先，在 pubspec.yaml 文件中添加 kraken_animation_player 作为依赖项：

dependencies:
  kraken_animation_player: ^x.x.x

其次，在调用 runApp() 之前添加以下代码：

import 'package:kraken_animation_player/kraken_animation_player.dart';

void main() {
  KrakenAnimationPlayer.initialize();
  runApp(MyApp());
}

示例

以下是使用 kraken_animation_player 的完整示例代码：

import 'package:flutter/material.dart';
import 'package:kraken/kraken.dart';
import 'package:kraken_animation_player/kraken_animation_player.dart';
import 'dart:ui';

void main() {
  KrakenAnimationPlayer.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kraken 浏览器',
      home: MyBrowser(title: 'MyApp'),
    );
  }
}

class MyBrowser extends StatefulWidget {
  MyBrowser({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyBrowser> {
  OutlineInputBorder outlineBorder = OutlineInputBorder(
    borderSide: BorderSide(color: Colors.transparent, width: 0.0),
    borderRadius: const BorderRadius.all(
      Radius.circular(20.0),
    ),
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    MediaQueryData queryData = MediaQuery.of(context);

    Kraken kraken;
    final TextEditingController textEditingController = TextEditingController();

    kraken = Kraken(
      viewportWidth: window.physicalSize.width / window.devicePixelRatio,
      viewportHeight: window.physicalSize.height / window.devicePixelRatio - queryData.padding.top,
      bundle: KrakenBundle.fromUrl('assets:///assets/bundle.js'),
    );

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: kraken,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                kraken.evaluateJavaScript('''
                  const ASSET = 'https://kraken.oss-cn-hangzhou.aliyuncs.com/data/Teddy.flr';
                  const animationPlayer = document.createElement('animation-player');
                  animationPlayer.setAttribute('type', 'flare');
                  animationPlayer.setAttribute('src', ASSET);
                  Object.assign(animationPlayer.style, {
                    width: '360px',
                    height: '640px',
                    objectFit: 'contain',
                  });
                  document.body.appendChild(animationPlayer);
                  document.body.onclick = () => animationPlayer.play('hands_up');
                ''');
              },
              child: Text('播放动画'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter动画播放插件kraken_animation_player的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画播放插件kraken_animation_player的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


kraken_animation_player 是一个用于在 Flutter 应用中播放动画的插件。它支持加载和播放 Lottie 动画文件（JSON 格式），并且提供了丰富的控制选项，如播放、暂停、停止、跳转到特定帧等。

安装

首先，你需要在 pubspec.yaml 文件中添加 kraken_animation_player 依赖：

dependencies:
  kraken_animation_player: ^0.1.0

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示如何使用 kraken_animation_player 来加载和播放 Lottie 动画：

import 'package:flutter/material.dart';
import 'package:kraken_animation_player/kraken_animation_player.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Kraken Animation Player Example'),
        ),
        body: Center(
          child: KrakenAnimationPlayer(
            assetPath: 'assets/animations/example.json',
            autoPlay: true,
            loop: true,
            onLoaded: () {
              print('Animation loaded!');
            },
            onComplete: () {
              print('Animation completed!');
            },
          ),
        ),
      ),
    );
  }
}

参数说明

  • assetPath: Lottie 动画文件的路径（通常是 JSON 文件）。
  • autoPlay: 是否在加载完成后自动播放动画，默认为 false。
  • loop: 是否循环播放动画，默认为 false。
  • onLoaded: 动画加载完成时的回调函数。
  • onComplete: 动画播放完成时的回调函数（仅在 loop 为 false 时触发）。

控制动画

你可以通过 KrakenAnimationController 来控制动画的播放、暂停、停止等操作。以下是一个示例：

class AnimationControlExample extends StatefulWidget {
  [@override](/user/override)
  _AnimationControlExampleState createState() => _AnimationControlExampleState();
}

class _AnimationControlExampleState extends State<AnimationControlExample> {
  KrakenAnimationController _controller;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation Control Example'),
      ),
      body: Column(
        children: [
          KrakenAnimationPlayer(
            assetPath: 'assets/animations/example.json',
            controller: _controller,
            onLoaded: () {
              print('Animation loaded!');
            },
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                icon: Icon(Icons.play_arrow),
                onPressed: () {
                  _controller.play();
                },
              ),
              IconButton(
                icon: Icon(Icons.pause),
                onPressed: () {
                  _controller.pause();
                },
              ),
              IconButton(
                icon: Icon(Icons.stop),
                onPressed: () {
                  _controller.stop();
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}
回到顶部