如何使用 UWP 社区工具包为“幻灯片”制作动画？答案

【问题标题】：How do you animate a "slide in" using the UWP Community Toolkit?如何使用 UWP 社区工具包为“幻灯片”制作动画？
【发布时间】：2017-11-02 17:44:02
【问题描述】：

根据偏移动画文档：

https://docs.microsoft.com/en-us/windows/uwpcommunitytoolkit/animations/offset

您只需为您的元素设置一个 Offset 值，它就会滑动到目标值：

<interactivity:Interaction.Behaviors>
    <behaviors:Offset x:Name="OffsetBehavior" 
            OffsetX="25.0" 
            OffsetY="25.0"
            Duration="2500" 
            Delay="250" 
            AutomaticallyStart="True"/>
</interactivity:Interaction.Behaviors>

但是，没有 From 和 To 的概念，因此您如何处理 slide 元素> 进入视野（ex：Offset.X 将是 -100 到 0）???我们只能设置Value，它代表合成动画中的“To”。

【问题讨论】：

标签： uwp uwp-xaml windows-community-toolkit

【解决方案1】：

没有From 值，因为对于此行为，From 相对于分配行为的元素为 0,0。您可以将 Margin 分配给将其放在一边并使用该行为的元素。

<Image Margin="-50,0,0,0">
    <interactivity:Interaction.Behaviors>
        <behaviors:Offset x:Name="OffsetBehavior" 
                OffsetX="25.0" 
                Duration="2500" 
                Delay="250" 
                AutomaticallyStart="True"/>
    </interactivity:Interaction.Behaviors>
</Image>

或者，您可以直接使用具有 From 和 To 的动画

var animation = compositor.CreateVector3KeyFrameAnimation();
animation.Duration = TimeSpan.FromMilliseconds(duration);
animation.DelayTime = TimeSpan.FromMilliseconds(delay);
animation.InsertKeyFrame(0f, new Vector3(-100,0,0));
animation.InsertKeyFrame(1f, new Vector3(0,0,0));
animationSet.AddCompositionAnimation("Offset", animation);

【讨论】：

【解决方案2】：

最后发现实际上可以使用 UWP 社区工具包动画：

this.MyElement.Offset(-200, duration: 0).Fade(0, duration: 0)
    .Then()
    .Offset(0).Fade(1)
    .Start();

我假设 Xaml 的解决方案相同，技巧是将初始值设置为持续时间 0，然后使用另一个动画来实现实际预期的“滑入”效果。

【讨论】：