UWP/WPF使用XAML设置UI元素简单的动画

以Image为例，使用Xaml语法进行设置。

<img x:name="MapPinImage" source="ms-appx:///Assets/mappin.png" width="50" height="50" rendertransformorigin="0.5,0.5" />
<image.rendertransform>
    <compositetransform x:name="PinAnimation" translatey="0" scalex="1" scaley="1"></compositetransform>
</image.rendertransform>
<image.triggers>
    <eventtrigger routedevent="Image.Loaded">
        <beginstoryboard x:name="bs_pin">
            <storyboard x:name="sb_pin" repeatbehavior="Forever">
                <doubleanimation storyboard.targetname="PinAnimation" storyboard.targetproperty="TranslateY" from="0" to="-0.1" duration="0:0:0.5" autoreverse="True"></doubleanimation>
                <doubleanimation storyboard.targetname="PinAnimation" storyboard.targetproperty="ScaleX" from="1" to="1.1" duration="0:0:0.5" autoreverse="True"></doubleanimation>
                <doubleanimation storyboard.targetname="PinAnimation" storyboard.targetproperty="ScaleY" from="1" to="1.1" duration="0:0:0.5" autoreverse="True"></doubleanimation>
            </storyboard>
        </beginstoryboard>
    </eventtrigger>
</image.triggers>

目前UWP使用这种方式路由事件只能使用Loaded,UWP可以使用nuget插件Microsoft.Xaml.Behaviors.Uwp.Managed只通过xaml完成动画

https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Uwp.Managed/

参考:https://stackoverflow.com/questions/55182371/how-do-i-change-an-image-on-image-mouse-over-in-uwp