Best practice to build a multiscreen animation

[mspnr]

I would like to build an animated introduction for an app.
This introduction will contain 5 screens / slides:

• On each screen there will be some elements/text/shapes, that will fly into the screen and stay to give user a moment to apprehend.
• There will be a button "Next" so the user can go to the next screen.
• On button click a transition between screens will happen: the elements on the screen will fly out and the elements on the next screen will fly in.

Is there any kind of best practice to implement that?

My current ideas are the following:

• Each screen is very specific, so I would split the whole setup to 5 artboards.
• It would be possible to build enter and exit animations for each artboard / screen.
• The artboards can be switched to the next on if the exit animation of the previous screen is finished.

Is the general direction of thoughts is correct?

[mjtalbot]

I think your approach sounds good @applikationsprogramvara! We'd love to see what you've come up with here! If you run into any specific issues with this approach please also raise them!

It sounds like text is also something that would be helpful to your application going forward, please be sure to add your voice to our feature tracker for that https://feedback.rive.app/126

[mspnr]

@mjtalbot thank you for the feedback!

Result

Here is the current result:

stb_intro.mp4

The clip contains 6 steps, each with enter and exit animations. The clip is paused after each enter animation. After user tap exit animation is played and then immediately the next enter animation. And so on.

Riv-file is structured the following way:

• Each step is a separate artboard.
• Exit and enter animations are two animations in one artboard.
• Text is imported as curves
• Size of riv-file is 230 KB

So far I stumbled on the following things:

Accessing multiple artboards

Function for accessing artboards by name is available in the core, but is not populated to the android library (bindings_file.cpp and File.kt).

It would be useful to have this function. Otherwise the clip is limited by a single artboard.

Animation object touch listeners

For the implemented case it is not critical, and as mentioned in #11, it would be nice to let the user click on the button, not on the whole screen.
In the current implementation the whole AnimationView accepts clicks, which push animations further.

Reset positions

During the experiments it was discovered, that the objects coordinates are not reset even if you reload the artboard or reopen the clip. Like it is done in https://preview.rive.app/ : by switching from design to animation mode you always have "design state" artboard.

As a consequence in some combinations of multiple animations the objects can be lost / not visible on the artboard. E.g.

• on the artboard the object is placed visible on the screen
• the first animation waves the object left and right by changing y-coordinate
• the second animation pushes the object by y-coordinate from 0 to 2000 away from the screen.
• if you play the first animation, then the second one and then the first again, the object will be not visible anymore, because it is waving on y-coordinate 2000.

Although the idea is understandable and looks ok, this behavior is confusing and I would have a function, that resets the artboard to its initial state.

Technical insights

Here are some additions to AnimationView that could be useful:

• It would be useful to have the end of animation listener or any other kind of feedback. Currently the interactions with the clip is limited by asking the view to load a clip/animation.
• lastTime should be set on artboard load, otherwise a part of the clip can be skipped.

Rendering problem

There is a weird rendering issue. It is visible in the movie above on 0:42. Arrow becomes a check and a dot stays, on the place where arrow tip was. Stroke trim animation is used. Trim end changes from 100% to 0%. In the editor https://preview.rive.app/ animation is rendering as expected, no dot stays. Have you stumbled on such an issue?

[mspnr]

Here is a short feedback how the problems from the previous comment can be resolved using workarounds:

Reset positions

• Resetting objects positions is resolved by reloading the whole clip from scratch. Although be careful, the library crashes after some reloads: Stability issue: crash after opening riv-file multiple times #16
• An alternative solution could be to set the initial positions for every object in the beginning of every animation

Trim end rendering error

If a diagonal line is animated with trim end to 0% a small portion of the line stays on the screen and can't be removed using opacity. I suppose this is a bug. To resolve that, the color of the line is changed the background color.

[mjtalbot]

Resetting artboards is now in! no more need to reload the file from scratch: #129

The stability issue for the library crashing after some reloads has also been sorted!