如何使用 UWP 社区工具包为 "slide in" 制作动画？

Question

根据 Offset 动画文档：

https://docs.microsoft.com/en-us/windows/uwpcommunitytoolkit/animations/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。您可以为元素分配一个边距，将其放在一边并使用该行为。

<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 社区工具包动画：

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

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

如何使用 UWP 社区工具包为 "slide in" 制作动画？

How do you animate a "slide in" using the UWP Community Toolkit?

uwp

uwp-xaml

windows-community-toolkit