flutterrive

Flutter RiveAnimation with custom Controller

I'm using this character animation in my Flutter app (with the animated background):

https://rive.app/community/1201-5354-lumberjack-walk-cycle/

(if you hit download on that link you will only get the character animation without the background. to get the character plus background you have to open it in editor and hit download in there)

Now in Flutter I can run the animation forever like this:

      RiveAnimation.asset(
        'assets/animations/lumberjack.riv',
      ),

The Character and the background is animated. Now I want to customize the animation speed. For that I looked at this example: https://github.com/rive-app/rive-flutter/blob/master/example/lib/custom_controller.dart

So I put in this class:

class SpeedController extends SimpleAnimation {
  final double speedMultiplier;

  SpeedController(
    String animationName, {
    double mix = 1,
    this.speedMultiplier = 1,
  }) : super(animationName, mix: mix);

  @override
  void apply(RuntimeArtboard artboard, double elapsedSeconds) {
    if (instance == null || !instance!.keepGoing) {
      isActive = false;
    }
    instance!
      ..animation.apply(instance!.time, coreContext: artboard, mix: mix)
      ..advance(elapsedSeconds * speedMultiplier);
  }
}

and added the controller to my animation:

      RiveAnimation.asset(
        animations: const ['idle'],
        controllers: [SpeedController('curves', speedMultiplier: 5)],
        'assets/animations/lumberjack.riv',
      ),

Not only is the animation speed not changing (character is animated in default speed), but also is the background not animated at all anymore.

Solution

  • Instead of direct download, open in rive

    enter image description here

    Now make sure to download on V7

    enter image description here

    The walk animation is on a different artBoard,

    You can find it by

      late SpeedController walkController = SpeedController(
    'walk',
    speedMultiplier: .1,
  );

SizedBox(
  height: 200,
  child: RiveAnimation.asset(
    animations: ["walk"],
    artboard: "Lumberjack",
    controllers: [walkController],
    fileLoc,
  ),
),

    Also you need to change the animation name according to rive animation LumberingLumberjack

     late SpeedController _controller =
      SpeedController('LumberingLumberjack', speedMultiplier: .3);


 RiveAnimation.asset(
    animations: ["LumberingLumberjack"],
    controllers: [_controller],
    fileLoc,
  ),