bevy_tweening : a tweening animation plugin for Bevy

[djeedai]

Hi all-

I'm delighted to announce the publishing of bevy_tweening (crates.io, github), a plugin for Bevy to do easing / tweening interpolation-based animation.

Note: This is currently only available for v0.5. Unfortunately I do not have time to maintain two separate versions for stable and main, especially as the gap between v0.5 and main is very large. I hope the Bevy leadership team can find a better release model to facilitate support for third-party plugins and avoid this overhead for maintainers.

Overview

The plugin was heavily inspired by bevy_easings from @mockersf, but explores different design choices regarding access to animated fields and animation of assets. Namely:

• An Animator<T: Component> component generic on the Bevy component to animate only, and not on the field(s) accessed. This reduces the number of systems and animation components to instantiate.
• Access to the fields is done via a lens, a concept borrowed from the Druid UI framework. Each lens -- a struct which implements the Lens trait -- decides which field(s) of the component is/are interpolated. This saves work if for example only the rotation of a Transform needs to be animated.
• Mutation via lenses is done in-place. The component is taken as a &mut reference, and the lens overwrite it with the newly interpolated value. This potentially save on allocations, and avoid having to create a new instance of the component each time like bevy_easings currently require, which is at least cumbersome if not inefficient.
• Assets like ColorMaterial can be animated via an AssetAnimator component, which again mutates via a lens the asset in-place, avoiding the need to create many copies.

The plugin provides a few predefined lenses for commonly animated component/fields and assets, and allows you to write your own lens to animate virtually any field of any component or asset.

Hello World

Add the plugin to your app:

use bevy::prelude::*;
use bevy_tweening::*;

AppBuilder::default()
    .add_default_plugins()
    .add_plugin(TweeningPlugin)
    .run();

Add an Animator component (or an AssetAnimator one if you animate an asset) and specify a lens for the component's fields:

commands
    // Spawn a Sprite entity to animate the position of
    .spawn_bundle(SpriteBundle {
        material: materials.add(Color::RED.into()),
        sprite: Sprite {
            size: Vec2::new(size, size),
            ..Default::default()
        },
        ..Default::default()
    })
    // Add an Animator component to perform the animation
    .insert(Animator::new(
        // Use a quadratic easing on both endpoints
        EaseFunction::QuadraticInOut,
        // Loop animation back and forth over 1 second, with a 0.5 second
        // pause after each cycle (start -> end -> start).
        TweeningType::PingPong {
            duration: Duration::from_secs(1),
            pause: Some(Duration::from_millis(500)),
        },
        // The lens gives access to the Transform component of the Sprite,
        // for the Animator to animate it. It also contains the start and
        // end values associated with the animation ratios 0. and 1.
        TransformPositionLens {
            start: Vec3::new(0., 0., 0.),
            end: Vec3::new(1., 2., -4.),
        },
    ));

Future Works

• Currently, because Bevy doesn't allow multiple instances of the same component on a single Entity, you cannot add multiple lenses to animate different parts of the same component with different parameters, since the Animator is generic over the component to animate, and therefore defines a unique component type Animator<T> per animated component type T.
• Integrate bevy_easings in the benchmarks to evaluate the design decisions with data, and see which approach is more promising in terms of performance.
• There's a few missing features that I'd like to add (or if someone wants to volunteer...):
  • Animation events, raised when a certain point of the animation is reached.
  • Better support / tooling for using animation curves. The current API is very terse, allowing a fully custom easing function, but no real "curve" in the sense of animation curves as used in other engines and authoring tools like Unity, UE, or Blender.