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

Question

根据偏移动画文档：

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的概念，因此您如何让元素滑入视图（例如： Offset.X 将是-100 到 0）？我们只能设置Value，它代表合成动画中的“To”。

Answer 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);

Answer 2

最后发现实际上可以使用 UWP Community Toolkit 动画：

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

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