How to stop animation ?

[chenjun-110]

class Pandy extends StatefulWidget {
  @override
  PandyS createState() => PandyS();
}
class PandyS extends State<Pandy> implements FlareController {
  ActorAnimation _rock;
  String animationName = "Untitled";
  int start;
  void initialize(FlutterActorArtboard artboard) {
    _rock = artboard.getAnimation("Untitled");
    artboard.advance(2.0);
    print('initialize');
    start = DateTime.now().millisecondsSinceEpoch;
  }
  void setViewTransform( viewTransform) {
    // print('setViewTransform ${_rock.animatedComponents}');
  }
  bool advance(FlutterActorArtboard artboard, double elapsed) {
    // _rock.apply(1.0, artboard, 0.5);
    var now = DateTime.now().millisecondsSinceEpoch;
    if ((now - start) > 3000) {
      // setState(() {
      //   animationName = "1";
      // });
    } else {
      print('advances ${_rock.isLooping} ${(now - start)}');
    }
    return false;
  }
  Widget build(BuildContext context) {
    print('flr build');
    var flr = new FlareActor("images/test.flr", 
      alignment:Alignment.center, 
      fit:BoxFit.contain, 
      animation: animationName,
      controller: this,
      isPaused: false,
      callback: (r) {
        print(r);
      },
    );
    return flr;
  }
}

[luigi-rosso]

Are you trying to pause an animation (stop it from advancing) or do you want to reset all the components to their original properties?

[gupengcheng]

how to reset animation or loop animation?

[luigi-rosso]

You can use an instance FlareControls as the controller to your FlareActor widget. Take a look at how the Teddy example does this:

Flare-Flutter/example/teddy/lib/teddy_controller.dart

Line 129 in cc9354c

play("success");

Essentially:

class SomeWidgetState ...
  final FlareControls _controls = FlareControls();
  @override
  Widget build(BuildContext context) {
      return 
        ...
        FlareActor("assets/myFlare.flr",
                alignment: Alignment.topCenter,
                shouldClip: false,
                fit: BoxFit.contain,
                animation: "idle",
                controller: _controls),
        ),
        ...
        FlatButton(
        onPressed: () {
            _controls.play("success");
        },

[tibbiyelininja]

how to reset animation or loop animation?

have you solved the case? I am trying to switch rotation animation to idle animation. It stops but rotation does not reset. any ideas?

[luigi-rosso]

This is due to one of the most powerful features of Flare: it allows for animation mixing at indeterminate times.

If you are playing two animations at indeterminate times, and you don't want to mix the results, you'll need to make sure that the animation that plays over/after resets the keyframes of the previous.

For example: if you are rotating a square between 0 and 360 degrees making it spin in a loop, and then when you push a button you switch to an animation that slides the square from left to right, your slide animation needs to also reset the rotation to 0. Otherwise Flare will keep the rotation values previously applied. This allows you to do things like play both animations at once (rotate and slide) if your app needs to combine those states.

[jonas-zebari]

@luigi-rosso What is the simplest example of reseting the progress of one animation to before beginning another? Or should I say where should I look for an example like this?

[luigi-rosso]

You'd need to do it in the incoming animation. For example, one animation rotates something from 0-360, your other animation should reset that thing to whatever it expects it to be at (if it's not ok for it to be wherever the previous animation left it at).

If you want to do it in code, one trick would be to re-instance the Artboard (when you instance an artboard all the components and their properties are set to the original design values). We don't have example code showing how to do this.

Do you have a specific use case/sample file you can't get to work? I could try to make an example for you.

[jonas-zebari]

I have three different animation in my Flare file that are all completely separate from one another. I don't want the looping animation (default state) to interact with the initial build in or the completion animation (it is currently very funky). Here are the animations:

And the broken celebration after looping is played:

I would like to be able to start the build and completion animation at any point during the looping animation without the starting animation regarding the current state of the loop. For example, if I play the looping animation and then try to play the celebration animation, the glowing diamonds in the middle do not appear and the text/confetti does not either. I'm guessing this is because they have 0 size or opacity during the looping animation. Unfortunately I can't share the flare file with you publicly (although it is in my Flare account but not forkable), but please do let me know if you need more details.

Multiple animation test.flr2d.zip

[luigi-rosso]

It's hard to say without looking at the file, but you probably want to make sure you reset key values in animations that will play after another animation has changed those key properties.

So if you know looping always changes the opacity of something, then an animation that plays after (like success) should reset that opacity to what it wants it to be. Flare does this automatically in the editor but not at runtime as there are cases where you intentionally want to mix multiple animations together. If your file is too complex and you don't want to take the time resetting the keyframes, you can create a custom widget that will re-instance the artboard when it plays the next state/animation.

Oh thanks for uploading the file, I'll take a look!

[luigi-rosso]

If you'd like me to setup an example that re-instances the artboard, could you email me an export of the .flr file (or attach it here if you don't mind sharing the export). You can email me at luigi@2dimensions.com