大家好,我是前端实验室的老鱼！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料等~
今天给大家推荐一个简单又灵活的 flutter canvas 图形动画库：Zerker。
使用场景
使用 Zerker，您可以创建许多看似麻烦的动画效果，例如 app 出入场动画，弹窗动画，点赞动画，烟花特效等。
当然您也可以使用 Zerker 来创建 app 小游戏。Zerker 中包含精灵（Sprite）、滚动背景（scrolling backgrounds）和地图等元素，可以轻松创建游戏世界。
安装
向项目包的 pubspec.yaml 文件中添加依赖：
dependencies:
zerker: <latest_version_here>
接着，执行命令：flutter pub get
$ flutter pub get
快速开始
我们以一个例子来说明下如何使用。
首先，导入需要的包。
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
preload();
}
@override
update(int time) {
super.update(time);
}
}
在init 方法中预加载资源,初始化场景。
preload () {
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");
});
}
initScence()就是初始化场景的具体内容。
// 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);
// add bg
bg = ZKScrollBg(key: "bg", time: 4 * 1000)
..setScale(0.5)
..position.y = appHeight
..anchor.y = 1;
stage.addChildAt(bg!, 0);
_addAction();
增加互动事件
_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();
};
}
Ok.你的第一个游戏就完成了。
重点
Zerker 的使用，主要是两个部分：一是，引入资源并进行场景初始化；二是，给ZK上下文中的元素绑定事件。事件，就是交互的主要内容，这是比较复杂的地方。大家可以多参考官网的文档和例子。
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情
