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

Question

According to the Offset animation documentation:

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

You simply set an Offset value to your element and it will slide to the target value:

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

However, there's no concept of From and To, therefore how do you go about having an element slide into view (ex: Offset.X would be -100 to 0) ??? We can only set Value, which represents the "To" in a composition animation.

score 1 · Answer 1 · edited Nov 15 '17 at 06:47

There is no From value because with this behavior the From is 0,0 relative to the element the behavior is assigned to. You can assign a Margin to the element that places it to the side and uses the behavior.

<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>

Alternatively, you can use the animations directly which do have a From and 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);

score 0 · Accepted Answer · answered Sep 16 '18 at 03:48

Finally figured out that is in fact possible using the UWP Community Toolkit animations:

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

I'm assuming the same solution for Xaml, the trick being to set the initial value with a duration of 0, and then using another animation for the actual intended "slide-in" effect.

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

2 Answers2