Animacje niejawne

Typ ImplicitAnimationSet jest odpowiednikiem AnimationSet w kontekście niejawnych animacji kompozycji. Reprezentuje zestaw niejawnych animacji, które można uruchamiać tylko w warstwie Kompozycja i które są dostępne w trzech kategoriach: pokazywanie, ukrywanie i niejawne animacje. ImplicitAnimationSet Ogranicza typ zawartych animacji do obiektów implementujących interfejs, IImplicitTimeline aby zapewnić dodatkowy poziom bezpieczeństwa w czasie kompilacji podczas konstruowania animacji z języka XAML. Podobnie jak inne interfejsy używane do jawnego definiowania animacji, ta architektura również jest rozszerzalna, dzięki czemu użytkownicy mogą łatwo dodawać własne typy implementujące ten interfejs do kolekcji ImplicitAnimationSet.

Interfejsy API platformy:ImplicitAnimationSet, AnimationSet, , IImplicitTimelineImplicit

Jak to działa

Element ImplicitAnimationSet jest najczęściej używany niejawnie podczas dołączania niejawnych animacji za pośrednictwem Implicit klasy, która uwidacznia dołączone właściwości w celu ustawienia niejawnych animacji na elementy interfejsu użytkownika. Jak wspomniano powyżej, animacje kompozycji niejawnej można ustawić tak, aby wyzwalać, gdy element jest wyświetlany lub ukryty, albo za każdym razem, gdy jedna z docelowych właściwości się zmienia. Dzięki temu można bardzo łatwo tworzyć animacje, które dynamicznie reagują na zmiany w stanie wizualnym elementów interfejsu użytkownika, dzięki czemu można ładnie przechodzić między różnymi pozycjami lub układami.

Oto przykład pokazujący, jak różne animacje można dołączyć do elementu interfejsu Implicit użytkownika przy użyciu klasy :

<!--Implicit show animations-->
<animations:Implicit.ShowAnimations>
  <animations:TranslationAnimation Duration="0:0:1" From="0,-200,0" To="0"/>
  <animations:OpacityAnimation Duration="0:0:1" From="0" To="1.0"/>
</animations:Implicit.ShowAnimations>

<!--Implicit hide animations (using both default and custom animations)-->
<animations:Implicit.HideAnimations>
  <animations:OpacityAnimation Duration="0:0:1" To="0"/>
  <animations:ScalarAnimation Target="Translation.Y" Duration="0:0:1" To="-200">
    <animations:ScalarKeyFrame Key="0.1" Value="30"/>
    <animations:ScalarKeyFrame Key="0.5" Value="0.0"/>
  </animations:ScalarAnimation>
</animations:Implicit.HideAnimations>

<!--Implicit animations (using an expression keyframe as well).
    These animations can also bind to other properties as triggers: in this
    example we are animating the rotation whenever the Offset changes.-->
<animations:Implicit.Animations>
  <animations:OffsetAnimation Duration="0:0:1"/>
  <animations:RotationInDegreesAnimation ImplicitTarget="Offset" Duration="0:0:1.5">
    <animations:ScalarKeyFrame Key="1.0" Expression="this.Target.Offset.X"/>
  </animations:RotationInDegreesAnimation>
  <animations:ScaleAnimation Duration="0:0:1"/>
</animations:Implicit.Animations>

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="AnimationsExperiment.Samples.AnimationsImplicitSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:animations="using:CommunityToolkit.WinUI.Animations"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:AnimationsExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:ui="CommunityToolkit.WinUI"
      mc:Ignorable="d">
    <Grid Height="480">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Canvas>
            <Border x:Name="Element"
                    Canvas.Left="100"
                    Canvas.Top="100"
                    Width="100"
                    Height="100"
                    Background="{ThemeResource AccentFillColorDefaultBrush}"
                    CornerRadius="{StaticResource ControlCornerRadius}">

                <animations:Implicit.ShowAnimations>
                    <animations:TranslationAnimation From="0, -200, 0"
                                                     To="0"
                                                     Duration="0:0:1" />
                    <animations:OpacityAnimation From="0"
                                                 To="1.0"
                                                 Duration="0:0:1" />
                </animations:Implicit.ShowAnimations>

                <animations:Implicit.HideAnimations>
                    <animations:OpacityAnimation To="0.0"
                                                 Duration="0:0:1" />
                    <animations:ScalarAnimation Target="Translation.Y"
                                                To="-200"
                                                Duration="0:0:1">
                        <animations:ScalarKeyFrame Key="0.1"
                                                   Value="30" />
                        <animations:ScalarKeyFrame Key="0.5"
                                                   Value="0.0" />
                    </animations:ScalarAnimation>
                </animations:Implicit.HideAnimations>

                <animations:Implicit.Animations>
                    <animations:OffsetAnimation Duration="0:0:1" />
                    <animations:RotationInDegreesAnimation ImplicitTarget="Offset"
                                                           From="0"
                                                           To="0"
                                                           Duration="0:0:1.2">
                        <animations:ScalarKeyFrame Key="0.9"
                                                   Value="80" />
                    </animations:RotationInDegreesAnimation>
                    <animations:ScaleAnimation Duration="0:0:1" />
                </animations:Implicit.Animations>

            </Border>
        </Canvas>
        <StackPanel Grid.Row="1"
                    HorizontalAlignment="Center"
                    Orientation="Horizontal"
                    Spacing="8">
            <Button Click="Visibility_Click"
                    Content="Toggle visibility" />
            <Button Click="Move_Click"
                    Content="Move" />
            <Button Click="Scale_Click"
                    Content="Scale" />
        </StackPanel>
    </Grid>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

#if WINAPPSDK
using Microsoft.UI.Xaml.Hosting;
#else
using Windows.UI.Xaml.Hosting;
#endif
using System.Numerics;

namespace AnimationsExperiment.Samples;

[ToolkitSample(id: nameof(AnimationsImplicitSample), "Implicit animations", description: $"A sample for showing how to create and use implicit animations.")]
public sealed partial class AnimationsImplicitSample : Page
{
    private Random _random = new Random();
    public AnimationsImplicitSample()
    {
        this.InitializeComponent();
    }

    private void Visibility_Click(object sender, RoutedEventArgs e)
    {
        Element.Visibility = Element.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
    }

    private void Move_Click(object sender, RoutedEventArgs e)
    {
        Canvas.SetTop(Element, _random.NextDouble() * this.ActualHeight);
        Canvas.SetLeft(Element, _random.NextDouble() * this.ActualWidth);
    }

    private void Scale_Click(object sender, RoutedEventArgs e)
    {
        var visual = ElementCompositionPreview.GetElementVisual(Element);
        visual.Scale = new Vector3(
            (float)_random.NextDouble() * 2,
            (float)_random.NextDouble() * 2,
                            1);
    }
}