Adding FlameAnimationWidget

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [next]
  - Fixing BaseGame tap detectors issues
+ - Adding FlameSpriteWidget
+ - Adding FlameAnimationWidget
 
 ## 0.21.0
 - Adding AssetsCache.readBinaryFile

doc/examples/widgets/lib/main.dart

@@ -1,12 +1,14 @@
-import 'package:flutter/material.dart';
+import 'package:flutter/material.dart' hide Animation;
 import 'package:flame/flame.dart';
 import 'package:flame/sprite.dart';
 import 'package:flame/spritesheet.dart';
+import 'package:flame/animation.dart';
 import 'package:dashbook/dashbook.dart';
 
 import 'package:flame/widgets/nine_tile_box.dart';
 import 'package:flame/widgets/sprite_button.dart';
 import 'package:flame/widgets/flame_sprite_widget.dart';
+import 'package:flame/widgets/flame_animation_widget.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -35,7 +37,6 @@ void main() async {
           ));
 
   await Flame.images.load('buttons.png');
-
   final _buttons = SpriteSheet(
     imageName: 'buttons.png',
     textureHeight: 20,
@@ -77,5 +78,34 @@ void main() async {
         ),
       );
 
+  await Flame.images.load('bomb_ptero.png');
+  final _animationSpriteSheet = SpriteSheet(
+    imageName: 'bomb_ptero.png',
+    textureHeight: 32,
+    textureWidth: 48,
+    columns: 4,
+    rows: 1,
+  );
+  final _animation = _animationSpriteSheet.createAnimation(
+      0,
+      stepTime: 0.2,
+      to: 3,
+      loop: true,
+  );
+  dashbook.storiesOf('FlameAnimationWidget').decorator(CenterDecorator())
+      .add(
+          'default',
+          (ctx) => Container(
+              width: ctx.numberProperty('container width', 400),
+              height: ctx.numberProperty('container height', 200),
+              padding: const EdgeInsets.all(20),
+              child: FlameAnimationWidget(
+                  animation: _animation,
+                  play: ctx.boolProperty('playing', true),
+                  center: ctx.boolProperty('center', true),
+              ),
+          ),
+      );
+
   runApp(dashbook);
 }

doc/widgets.md

@@ -56,8 +56,22 @@ How to use it:
 
 ```dart
 FlameSpriteWidget(
-  sprite: shieldSprite,
+        sprite: shieldSprite,
-  center: true,
+        center: true,
 ),
 
 ```
+
+## FlameAnimationWidget
+
+`FlameAnimationWidget` is a widget used to display [Animations](https://github.com/flame-engine/flame/blob/master/lib/animation.dart) inside a widget tree.
+
+How to use it:
+
+```dart
+FlameAnimationWidget(
+        animation: _animation,
+        play: true,
+        center: true,
+),
+```

lib/widgets/flame_animation_widget.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart' hide Animation;
+import 'package:flame/animation.dart';
+
+import './flame_sprite_widget.dart';
+
+import 'dart:math';
+
+class FlameAnimationWidget extends StatefulWidget {
+  final Animation animation;
+  final bool center;
+  final bool play;
+
+  FlameAnimationWidget({
+    this.animation,
+    this.play = true,
+    this.center = false,
+  }): assert(animation.loaded(), 'Animation must be loaded');
+
+  @override
+  State createState() => _FlameAnimationWidget();
+}
+
+class _FlameAnimationWidget extends State<FlameAnimationWidget> with SingleTickerProviderStateMixin {
+
+  AnimationController _controller;
+  int _lastUpdated;
+
+  @override
+  void didUpdateWidget(oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.play) {
+      _initAnimation();
+    } else {
+      _pauseAnimation();
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+        vsync: this
+    )
+    ..addListener(() {
+      final now = DateTime.now().millisecond;
+
+      final dt = max(0, (now - _lastUpdated) / 1000);
+      widget.animation.update(dt);
+
+      setState(() {
+        _lastUpdated = now;
+      });
+    });
+
+    widget.animation.onCompleteAnimation = _pauseAnimation;
+
+    if (widget.play) {
+      _initAnimation();
+    }
+  }
+
+  void _initAnimation() {
+    setState(() {
+      widget.animation.reset();
+      _lastUpdated = DateTime.now().millisecond;
+      _controller.repeat(
+          // -/+ 60 fps
+          period: Duration(milliseconds: 16)
+      );
+    });
+  }
+
+  void _pauseAnimation() {
+    setState(() {
+      _controller.stop();
+    });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(ctx) {
+    return FlameSpriteWidget(sprite: widget.animation.getSprite(), center: widget.center);
+  }
+}