animation showing differently in application then what is design in rive.app

[abdullah432]

I want to achieve a checkbox animation. I create the two animations in a single .flr file. https://rive.app/a/student432/files/flare/checkbox/embed One is unchecked, it is a circle with + inside. I will be shown when item is not selected. When uses select the item then I want to show a beautiful animation and after that want to stop the second animation at last frame. The animation is working correctly in rive.app but not working in the application. It shows missing animation. like below

Code:

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

class RiveActor extends StatelessWidget {
  final bool isOn;
  final GestureTapCallback onToggle;
  final bool snapToEnd;

  RiveActor(this.isOn, {this.snapToEnd, this.onToggle});
  @override
  Widget build(BuildContext context) {
    print('River actor: '+isOn.toString());
    return GestureDetector(
        onTap: onToggle,
        child: Container(
            width: 200,
            height: 100,
            child: FlareActor("assets/rive/checkbox.flr",
                snapToEnd: snapToEnd, animation: isOn ? "checked" : "unchecked", )));
  }
}

import 'package:flutter/material.dart';
import 'import above class here';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static final List<bool> options = [false, true, false, true, true];
  bool _snapToEnd = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: options
                  .asMap()
                  .map((i, isOn) => MapEntry(
                      i,
                      RiveActor(isOn, snapToEnd: _snapToEnd, onToggle: () {
                        print('toggle');
                        print('isOn: '+isOn.toString());
                        setState(() {
                          _snapToEnd = false;
                          options[i] = !isOn;
                        });
                      })))
                  .values
                  .toList()
                  .cast<Widget>() +
              [
                FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  color: Colors.pinkAccent,
                  child: const Text('Back'),
                )
              ],
        ),
      ),
    );
  }
}

[luigi-rosso]

When you swap active animation, the values set by the previous animation's keyframes carry forward.

To fix this, make sure that you're resetting keyframes in both animations that you expect to be reset/changed back to some state your animation expects. For example, if one animation hides something, make sure the other one makes that item visible again.

The editor resets keys automatically for you to show you just what you are working on, but at runtime, this doesn't happen unless you specifically set keyframes to do it. This allows for animation mixing. If we were to reset things automatically for you, you wouldn't be able to control mixing multiple animations together.

[abdullah432]

@luigi-rosso But why the checkmark animation is not showing but reset is showing. I think this is not an issue of keyframes. It's missing? Also, I'm a beginner in the rive, don't know much about keyframes stuff, so can you help me to provide workable code for this.

[luigi-rosso]

It seems like the checkmark animation is showing, it's just that the white check icon is hidden, probably because the previous animation (unchecked) is somehow hiding it. The fix should be to set a keyframe in "checked" for whatever you're doing in "unchecked" to hide the white icon.

[abdullah432]

What I want to do is to place this FlareActor Widget on the list of products. By default unchecked will be shown but when user want to add that product to cart then this beautiful animation will be shown. And after that that checked mark will be active until user again didn't unmark it. By my beginner knowledge, I think I did everything correctly. In "unchecked" animation + opacity is 1. I can't make it 0 because when an item is not in the cart this unchecked will be shown. After that, in "checked" animation I reduce + icon opacity to 0. So where I did wrong? Is their any better way to follow in my scenario?

[abdullah432]

@luigi-rosso Also one request. We have AnimatedIcon widget available in flutter and it's so easy to use but the problem with that is it has limited number of animation available. So to create my own custom icon animation I consider rive but I don't find it easy. If the rive team makes something simple like AnimatedIcon for rive that will be useful and a lot of developers will use it. Still waiting for the above comment to be answered.

[umberto-sonnino]

@abdullah432 as Luigi was suggesting, just add an Opacity 1 keyframe at the start of the 'checked' animation for the 'Check' object, and your problem should be solved.

The problem shows up because you're playing the 'unchecked' animation first, making the 'Check' object invisible. This value carries over when you're playing the 'checked' animation right after, that's why you need to reset it back to its original state to make it visible.

[abdullah432]

@umberto-sonnino @luigi-rosso Thanks for the help. I fix it.