本期推荐的是一个简单又灵活的 flutter canvas 图形动画库Zerker。

项目介绍

Zerker 是一个灵活、轻量级的颤动画布图形动画库。

使用Zerker，你可以制作很多看似繁琐的动画效果，比如动画动画、弹窗动画、场景转场、图标效果等等。

同时，您可以使用 Zerker 创建很多简单的游戏。Zerker 包含精灵、滚动背景和地图集等元素，可以轻松使用它们创建游戏世界。

安装

将此包用作依赖库

将此添加到包的 pubspec.yaml 文件中：

dependencies:
  zerker: <latest_version_here>

您可以从命令行安装软件包：使用 Flutter：

$ flutter pub get

或者，您的编辑器可能支持 flutter pub get。

现在在您的 Dart 代码中，您可以使用：

import 'package:zerker/zerker.dart';

快速开始

导入包

import 'package:zerker/zerker.dart';

创建 zerker 小部件

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Zerker(app: MyZKApp(), clip: true, interactive: true, width: 350, height: 350),
        ));
  }
}

创建从 ZKApp 继承的 Zerker 类

class MyZKApp extends ZKApp {

  @override
  init() {
    super.init();
    /// init zerker scene
  }

  @override
  update(int time) {
    super.update(time);
  }
}

初始化场景并在init function

/// Create a zerker sprite
ZKSprite bigboy = ZKSprite(key: "bigboy")
  ..position.x = size.width / 2
  ..position.y = size.height / 2
  ..animator.make("front", [0, 1, 2, 3, 4])
  ..animator.make("left", ['5-9'])
  ..animator.make("after", ['10-14'])
  ..animator.make("right", ['15-19'])
  ..onTapDown = (event) {
    bigboy.animator.play("right", 8, true);
   };
   
stage.addChild(bigboy);

/// Create a zerker text
ZKText text = ZKText()
  ..setPosition(100, 100)
  ..text = "hello world"
  ..setStyle(color: Colors.blueGrey, backgroundColor: Colors.red[50]);
  
stage.addChild(_text);

开始一个简单的演示

第一步是创建一个zerker小部件

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Zerker(app: MyZKApp(), clip: true, interactive: true, width: 350, height: 350),
        ));
  }
}

第二步继承自ZKApp

class MyZKApp extends ZKApp {

第三步在init函数中预加载资产

init() {
    super.init();
    stage.color = Colors.blueGrey;

    Map<String, dynamic> urls = {
      "boy": {"json": "assets/boy.json", "image": "assets/boy.png"},
      "bg": "assets/bg.png",
    };

    // preload all assets
    ZKAssets.preload(
        urls: urls,
        onProgress: (scale) {
          print("Assets loading ${scale * 100}%");
        },
        onLoad: () {
          initScene();
          _loaded = true;
          print("Assets load Complete");
        });
}

第四步创建各种元素

    // add title
    title = ZKText()
      ..position.x = appWidth / 2
      ..position.y = 20
      ..text = "Please click anywhere"
      ..setStyle(
        color: Colors.blueGrey, 
        backgroundColor: Colors.greenAccent, 
        textAlign: TextAlign.center);
    stage.addChild(title);

    // add boy
    boy = ZKSprite(key: "boy")
      ..setScale(1)
      ..anchor.y = 1
      ..position.x = size.width / 2
      ..position.y = appHeight - 16
      ..animator.make("run", ["Run ({1-15}).png"])
      ..animator.make("jump", ["Jump ({1-15}).png"])
      ..animator.make("dead", ["Dead ({1-15}).png"])
      ..animator.play("run", 25, true);
    stage.addChild(boy);

第五步添加互动事件

_addAction() {
    boy.onTapDown = (event) {
      bg.stop();
      _jumping = false;
      boy.animator.play("dead", 20);
    };

    stage.onTapDown = (event) {
      if (event.target == boy) return;
      if (_jumping) return;

      bg.play();
      _jumping = true;
      boy.animator.play("jump", 20);
      ZKTween(boy)
          .to({"y": appHeight - 120}, 500)
          .easing(Ease.circ.easeOut)
          .chain(ZKTween(boy).to({"y": appHeight - 16}, 500).easing(Ease.circ.easeIn).onComplete((obj) {
                boy.animator.play("run", 25, true);
                _jumping = false;
              }))
          .start();
    };
}