Animazioni primaverili

Questo articolo illustra come usare spring NaturalMotionAnimations in WinUI.

Prerequisiti

In questo caso si presuppone che si abbia familiarità con i concetti illustrati in questi articoli:

• Animazioni di movimento naturale

Perché le sorgenti?

Le molle sono un'esperienza di movimento comune che abbiamo tutti sperimentato a un certo punto della nostra vita; che vanno dai giocattoli Slinky alle esperienze in classe di fisica con un blocco collegato a una molla. Il movimento oscillante di una primavera spesso cita una risposta emotiva giocosa e spensierata da coloro che lo osservano. Di conseguenza, il movimento di una molla si traduce bene nell'interfaccia utente dell'applicazione per coloro che cercano di creare un'esperienza di movimento più dinamica e coinvolgente per l'utente finale rispetto a quella di un tradizionale Cubic Bezier. In questi casi, il movimento di primavera non solo crea un'esperienza di movimento più vivace, ma può anche aiutare a attirare l'attenzione su contenuti nuovi o attualmente animati. A seconda della personalizzazione dell'applicazione o del linguaggio del movimento, l'oscillazione è più pronunciata e visibile, ma in altri casi è più sottile.

Uso delle molle nell'interfaccia utente

Come accennato in precedenza, le molle possono essere un movimento utile per integrarle nella tua app WinUI per offrire un'esperienza utente molto familiare, interattiva e dinamica. L'uso comune delle molle nell'interfaccia utente è:

Descrizione utilizzo spring	Esempio di oggetto visivo
Rendere un'esperienza di movimento più dinamica e apparire più vivace. (Scala animata)
Far sì che un'esperienza di movimento sembri più dinamica (Offset di animazione)

In ognuno di questi casi, il movimento della molla può essere attivato muovendosi verso un nuovo valore e oscillando intorno ad esso, oppure oscillando intorno al valore corrente con una velocità iniziale.

Definizione del movimento della molla

Si crea un'esperienza spring usando le API NaturalMotionAnimation. In particolare, si crea un oggetto SpringNaturalMotionAnimation usando i metodi Create* da Compositor. È quindi possibile definire le proprietà seguenti del movimento:

• DampingRatio : esprime il livello di smorzamento del movimento di primavera usato nell'animazione.

• Periodo : il tempo necessario per la molla per eseguire una singola oscillazione.
• Valore finale/iniziale: definite posizioni iniziali e finali del movimento di molla (se non definito, il valore iniziale e/o finale sarà il valore corrente).
• Velocità iniziale: velocità iniziale programmatica per il movimento.

È anche possibile definire un set di proprietà del movimento uguali a KeyFrameAnimations:

• Tempo di ritardo / Comportamento del ritardo
• StopBehavior

Nei casi comuni di animazione di Offset e Scale/Size, i valori seguenti sono consigliati dal team di progettazione di Windows per DampingRatio e Period per diversi tipi di molla:

Dopo aver definito le proprietà, è possibile inserire la NaturalMotionAnimation della molla nel metodo StartAnimation di un CompositionObject o nella proprietà Motion di un InteractionTracker InertiaModifier.

Esempio

In questo esempio si crea un'esperienza di navigazione e un'interfaccia utente basata su canvas in cui, quando l'utente fa clic su un pulsante di espansione, un riquadro di navigazione viene esteso con un movimento elastico e oscillante.

Iniziare definendo l'animazione spring all'interno dell'evento selezionato per quando viene visualizzato il riquadro di spostamento. Si definiscono quindi le proprietà dell'animazione, usando la funzionalità InitialValueExpression per usare un'espressione per definire FinalValue. Tieni anche traccia dell'apertura o meno del riquadro e, quando sei pronto, avvia l'animazione.

private void Button_Clicked(object sender, RoutedEventArgs e)
{
    _springAnimation = _compositor.CreateSpringScalarAnimation();
    _springAnimation.DampingRatio = 0.75f;
    _springAnimation.Period = TimeSpan.FromSeconds(0.5);

    if (!_expanded)
    {
        _expanded = true;
        _propSet.InsertBoolean("expanded", true);
        _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue + 250";
    }
    else
    {
        _expanded = false;
        _propSet.InsertBoolean("expanded", false);
        _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue - 250";
    }

    _naviPane.StartAnimation("Offset.X", _springAnimation);
}

E se volessi legare questo movimento all'input? Quindi, se l'utente finale scorre verso l'esterno, i riquadri vengono visualizzati con un movimento Spring? Più importante, se l'utente scorre più duramente o più velocemente, il movimento si adatta in base alla velocità dell'utente finale.

A tale scopo, puoi prendere la stessa animazione Spring e passarla in un InertiaModifier con InteractionTracker. Per altre informazioni su InputAnimations e InteractionTracker, vedere Esperienze di manipolazione personalizzate con InteractionTracker. Si presuppone che per questo esempio di codice sia già stato configurato InteractionTracker e VisualInteractionSource. Ci concentreremo sulla creazione di InertiaModifiers che accetteranno un NaturalMotionAnimation, in questo caso una molla.

// InteractionTracker and the VisualInteractionSource were previously set up.
// The open and close ScalarSpringAnimations were defined earlier.
private void SetupInput()
{
    // Define the InertiaModifier to manage the open motion.
    var openMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the open animation if the pane is not expanded.
    openMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == false");
    openMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    openMotionModifier.NaturalMotion = _openSpringAnimation;

    // Define the InertiaModifier to manage the close motion.
    var closeMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the close animation if the pane is expanded.
    closeMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == true");
    closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    closeMotionModifier.NaturalMotion = _closeSpringAnimation;

    _tracker.ConfigurePositionXInertiaModifiers(new InteractionTrackerInertiaNaturalMotion[]
    {
        openMotionModifier,
        closeMotionModifier,
    });

    // Take the InteractionTracker output and assign it to the pane.
    var exp = _compositor.CreateExpressionAnimation("-tracker.Position.X");
    exp.SetReferenceParameter("tracker", _tracker);

    ElementCompositionPreview.GetElementVisual(pageNavigation)
        .StartAnimation("Translation.X", exp);
}

Ora hai un'animazione a molla sia programmatica che basata su input nell'interfaccia utente.

In sintesi, i passaggi per l'uso di un'animazione spring nell'app:

1. Crea la tua SpringAnimation dal Compositor.
2. Definire le proprietà di SpringAnimation se si desiderano valori non predefiniti:
   • Fattore di smorzamento
   • Period
   • Valore finale
   • Valore iniziale
   • Velocità iniziale
3. Assegna all'obiettivo.
   • Se si sta animando una proprietà CompositionObject, passare SpringAnimation come parametro a StartAnimation.
   • Se si vuole usare con l'input, impostare la proprietà NaturalMotion di un Oggetto InertiaModifier su SpringAnimation.