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>

但是，没有从和到的概念，因此如何使用元素 幻灯片 进入视图（ ex：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>

或者，您可以直接使用具有“从”和“到”

的动画

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，然后将另一个动画用于实际的预期“滑入”效果。

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

2 个答案: