Magnum::Ui::BaseLayerStyleAnimator class new in Git master

#include <Magnum/Ui/BaseLayerAnimator.h>

Setting up an animator instance

If you create a UserInterfaceGL with a style containing McssDarkStyle::Feature::Animations or equivalent and don't exclude StyleFeature::BaseLayerAnimations, an implicit instance of the class, configured for use with builtin widgets, is already provided and available through UserInterface::baseLayerStyleAnimator().

For a custom animator, first create an instance from a fresh AbstractUserInterface::createAnimator() handle. After that, the animator has to be assigned to a concrete layer instance. The animations make use of dynamic styles, so the base layer is expected to have at least one dynamic style enabled with BaseLayer::Shared::Configuration::setDynamicStyleCount(). The more dynamic styles are enabled, the more style animations can be running for given layer at the same time, but also more data need to get uploaded to the GPU every frame.

Containers::Pointer<Ui::BaseLayerStyleAnimator> animatorInstance{InPlaceInit,
    ui.createAnimator()};

Ui::BaseLayerGL::Shared baseLayerShared{
    Ui::BaseLayer::Shared::Configuration{…}
        …
        .setDynamicStyleCount(10) /* adjust as needed */
};
Ui::BaseLayer& baseLayer = ui.setLayerInstance(
    Containers::pointer<Ui::BaseLayerGL>(ui.createLayer(), baseLayerShared));

With the layer ready, call BaseLayer::assignAnimator(BaseLayerStyleAnimator&) to assign the animator instance to the layer and then pass the animator to setStyleAnimatorInstance(). Then, assuming the user interface is set up for animations, the animator is ready to use.

baseLayer.assignAnimator(*animatorInstance);
Ui::BaseLayerStyleAnimator& animator =
    ui.setStyleAnimatorInstance(Utility::move(animatorInstance));

To have the animator instance used for animating styles and style transitions, pass it to BaseLayer::setDefaultStyleAnimator(). Afterwards, calling setDefaultStyleAnimator() with nullptr will effectively disable implicit style animations until some animator is made default again.

baseLayer.setDefaultStyleAnimator(&animator);

Creating animations

Assuming an enum is used to index the styles defined in BaseLayer::Shared of the associated layer instance, an animation is created by calling create() with the source and target style indices, an easing function from Animation::Easing or a custom one, time at which it's meant to start, its duration, and a DataHandle which the style animation should affect. Here, for example, to fade out a button hover style over half a second:

enum class BaseLayerStyle {
    …
    Button,
    ButtonHovered,
    …
};

Ui::DataHandle buttonBackground = …;

animator.create(BaseLayerStyle::ButtonHovered, BaseLayerStyle::Button,
    Animation::Easing::cubicOut, now, 0.5_sec, buttonBackground);

Internally, once the animation starts playing, the animator allocates a new dynamic style index using BaseLayer::allocateDynamicStyle() and switches the style index of given DataHandle to the allocated dynamic style with BaseLayer::setStyle(). During the animation the style data are updated to corresponding interpolation between the source and target styles, equivalent to calling BaseLayer::setDynamicStyle(). When the animation stops, the data style index is switched to the target ID specified in create() and the dynamic style index is recycled with BaseLayer::recycleDynamicStyle(). Animations that have AnimationFlag::Reverse set animate in the other direction and get switched to the source ID on animation stop instead.

If the animator runs out of dynamic styles, newly started animations are switched to the source style index until a dynamic style is recycled. If no dynamic style gets recycled until the animation stops, the data gets switched directly to the target style at the animation stop with no animation. Again, in case of AnimationFlag::Reverse animations the source and target style is swapped in this case.

The animation interpolates all properties of BaseLayerStyleUniform including outline width and corner radius, as well as the style padding value. All style data are fetched from BaseLayer::Shared at animation start, meaning that you can reuse existing animations even after the style is updated. At the moment, only animation between predefined styles is possible.

Resolving style conflicts

In case of styles transitioning in response to input events, it may often happen that a transition happens while another transition is still being animated. To avoid visual artifacts and seemingly random behavior, the animator updates the style assignment only if it didn't change since the animation started.

For example, if a different style is assigned while an animation is playing — either by a different animation or directly with BaseLayer::setStyle() — the allocated dynamic style still gets interpolated until the end, but it's no longer assigned to the original data, and once the animation stops, given data isn't switched to the target style either.

From the other side, if external code encounters a dynamic style being assigned to a particular data, it can query BaseLayer::dynamicStyleAnimation() to get a corresponding AnimationHandle, and pass it to styles() to know which styles the animation is transitioning between.

The animator doesn't give any ordering guarantees for multiple style animations affecting the same data starting at the same time. Such cases should be rather rare in practice, however.

Animation lifetime and data attachment

As with all other animations, they're implicitly removed once they're played. Pass AnimationFlag::KeepOncePlayed to create() or addFlags() to disable this behavior.

Style animations are associated with data they animate, and thus as soon as the data or node the data is attached to is removed, the animation gets removed as well. If you want to preserve the animation when the data is removed, call attach(AnimationHandle, DataHandle) with DataHandle::Null to detach it from the data before removing.

Additionally the animation is removed also if a different style is assigned to data the animation is attached to while it's playing, and the animation doesn't have AnimationFlag::KeepOncePlayed set. This allows you to create & forget long-running and even infinitely repeating animations and they'll get cleaned up right once they stop affecting data they're attached to.

If you call create() with DataHandle::Null, the animation will still allocate and interpolate a dynamic style, but the style won't be used anywhere. You can then retrieve the dynamic style index with dynamicStyle() and use it for example to make the same style animation on multiple different data. Note that in this case you're also responsible also for switching to the target style once the animation finishes — once the dynamic style is recycled, the same index may get used for arbitrary other style either by this animator or any other code, causing visual bugs.

Base classes

class AbstractVisualLayerStyleAnimator new in Git master

Base for AbstractVisualLayer style animators.

Constructors, destructors, conversion operators

BaseLayerStyleAnimator(AnimatorHandle handle) explicit

Constructor.

BaseLayerStyleAnimator(const AbstractStyleAnimator&) deleted

Copying is not allowed.

BaseLayerStyleAnimator(BaseLayerStyleAnimator&&) noexcept

Move constructor.

Public functions

auto operator=(const BaseLayerStyleAnimator&) -> BaseLayerStyleAnimator& deleted

Copying is not allowed.

auto operator=(BaseLayerStyleAnimator&&) -> BaseLayerStyleAnimator& noexcept

Move assignment.

auto create(UnsignedInt sourceStyle, UnsignedInt targetStyle, Float(*)(Float) easing, Nanoseconds start, Nanoseconds duration, DataHandle data, UnsignedInt repeatCount = 1, AnimationFlags flags = {}) -> AnimationHandle

Create an animation.

template<class StyleIndex>

auto create(StyleIndex sourceStyle, StyleIndex targetStyle, Float(*)(Float) easing, Nanoseconds start, Nanoseconds duration, DataHandle data, UnsignedInt repeatCount = 1, AnimationFlags flags = {}) -> AnimationHandle

Create an animation with a style index in a concrete enum type.

auto create(UnsignedInt sourceStyle, UnsignedInt targetStyle, Float(*)(Float) easing, Nanoseconds start, Nanoseconds duration, DataHandle data, AnimationFlags flags) -> AnimationHandle

Create an animation.

template<class StyleIndex>

auto create(StyleIndex sourceStyle, StyleIndex targetStyle, Float(*)(Float) easing, Nanoseconds start, Nanoseconds duration, DataHandle data, AnimationFlags flags) -> AnimationHandle

Create an animation with a style index in a concrete enum type.

auto create(UnsignedInt sourceStyle, UnsignedInt targetStyle, Float(*)(Float) easing, Nanoseconds start, Nanoseconds duration, LayerDataHandle data, UnsignedInt repeatCount = 1, AnimationFlags flags = {}) -> AnimationHandle

Create an animation assuming the data it's attached to belongs to the layer the animator is registered with.

template<class StyleIndex>

auto create(StyleIndex sourceStyle, StyleIndex targetStyle, Float(*)(Float) easing, Nanoseconds start, Nanoseconds duration, LayerDataHandle data, UnsignedInt repeatCount = 1, AnimationFlags flags = {}) -> AnimationHandle

Create an animation with a style index in a concrete enum type assuming the data it's attached to belongs to the layer the animator is registered with.

auto create(UnsignedInt sourceStyle, UnsignedInt targetStyle, Float(*)(Float) easing, Nanoseconds start, Nanoseconds duration, LayerDataHandle data, AnimationFlags flags) -> AnimationHandle

Create an animation assuming the data it's attached to belongs to the layer the animator is registered with.

template<class StyleIndex>

auto create(StyleIndex sourceStyle, StyleIndex targetStyle, Float(*)(Float) easing, Nanoseconds start, Nanoseconds duration, LayerDataHandle data, AnimationFlags flags) -> AnimationHandle

Create an animation with a style index in a concrete enum type assuming the data it's attached to belongs to the layer the animator is registered with.

void remove(AnimationHandle handle)

Remove an animation.

void remove(AnimatorDataHandle handle)

Remove an animation assuming it belongs to this animator.

auto easing(AnimationHandle handle) -> auto

Animation easing function.

auto easing(AnimatorDataHandle handle) -> auto

Animation easing function assuming it belongs to this animator.

auto advance(Nanoseconds time, Containers::MutableBitArrayView activeStorage, Containers::MutableBitArrayView startedStorage, Containers::MutableBitArrayView stoppedStorage, const Containers::StridedArrayView1D<Float>& factorStorage, Containers::MutableBitArrayView removeStorage, Containers::ArrayView<BaseLayerStyleUniform> dynamicStyleUniforms, const Containers::StridedArrayView1D<Vector4>& dynamicStylePaddings, const Containers::StridedArrayView1D<UnsignedInt>& dataStyles) -> BaseLayerStyleAnimatorUpdates

Advance the animations.

Function documentation