Animasi bayangan

Kedua jenis Bayangan Terlampir dapat dengan mudah dianimasikan menggunakan API Toolkit AnimationSet. Ini memberikan cara berbasis XAML yang mudah untuk menganimasikan berbagai elemen, termasuk berbagai properti bayangan. Mereka juga dapat dianimasikan dengan teknik animasi komposisi lain apa pun di code-behind, baik menggunakan AnimationBuilder maupun animasi komposisi bawaan.

API Platform:BlurRadiusDropShadowAnimation, ColorDropShadowAnimation, OffsetDropShadowAnimation, OpacityDropShadowAnimation

Catatan

AttachedCardShadow memiliki dukungan yang lebih baik untuk animasi yang melibatkan terjemahan elemen bersama dengan bayangan. Jika menganimasikan AttachedDropShadow, sebaiknya hanya menganimasikan bayangannya saja daripada memindahkan elemen tempat bayangan tersebut menempel. Ini dapat menyebabkan bayangan dan elemen menjadi tidak sinkron.

Contoh

Contoh berikut menggunakan kombinasi perilaku dan API animasi untuk membuat efek bayangan beranimasi saat kursor diarahkan ke gambar dengan 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>