Animaciones de sombra

Cualquier tipo de Sombra adjunta se puede animar fácilmente mediante la API AnimationSet del kit de herramientas. Proporcionan una manera sencilla basada en XAML para animar una amplia variedad de elementos, incluida una variedad de propiedades de sombra. También se pueden animar con cualquier otra técnica de animación de composición en código subyacente, así como con AnimationBuilder o las animaciones de composición integradas.

API de la plataforma:BlurRadiusDropShadowAnimation, ColorDropShadowAnimation, OffsetDropShadowAnimation, OpacityDropShadowAnimation

Nota:

AttachedCardShadow tiene mejor compatibilidad con animaciones que implican la traducción del elemento junto con la sombra. Si anima AttachedDropShadow, es mejor animar solo la sombra en sí en vez de mover el elemento al que está asociado. Esto puede hacer que la sombra y el elemento se desincronicen.

Ejemplo

En el ejemplo siguiente se usa una combinación de comportamientos y API de animación para crear un efecto de sombra animado al pasar el cursor sobre una imagen con OffsetDropShadowAnimation:

    xmlns:ui="using:CommunityToolkit.WinUI"
    xmlns:media="using:CommunityToolkit.WinUI.Media"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
    xmlns:ani="using:CommunityToolkit.WinUI.Animations"
    xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"/>

    <Image Height="100" Width="100"
           Source="ms-appx:///Assets/Photos/Owl.jpg">
        <ui:Effects.Shadow>
            <media:AttachedCardShadow Offset="4" CornerRadius="0"/>
        </ui:Effects.Shadow>
        <ani:Explicit.Animations>
            <ani:AnimationSet x:Name="ShadowEnterAnimation">
                <ani:OffsetDropShadowAnimation To="12"/>
            </ani:AnimationSet>

            <ani:AnimationSet x:Name="ShadowExitAnimation">
                <ani:OffsetDropShadowAnimation To="4"/>
            </ani:AnimationSet>
        </ani:Explicit.Animations>
        <interactivity:Interaction.Behaviors>
            <interactions:EventTriggerBehavior EventName="PointerEntered">
                <behaviors:StartAnimationAction Animation="{x:Bind ShadowEnterAnimation}"/>
            </interactions:EventTriggerBehavior>
            <interactions:EventTriggerBehavior EventName="PointerExited">
                <behaviors:StartAnimationAction Animation="{x:Bind ShadowExitAnimation}"/>
            </interactions:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Image>