CODEWITHSUNDEEP
win-universal-appuwpwindows-10-universal
SebastianR
SebastianR

Reputation: 2193

Composition animation on a visual sub channel

I use the new Composition Animation API in UWP (Windows 10 1607) to animate a custom control. I want changes of the vertical offset of its children to be animated, but not changes to the horizontal offset.

I can animate the whole offset (X and Y) like this:

var offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
offsetAnimation.Target = "Offset";
offsetAnimation.Duration = TimeSpan.FromSeconds(0.5);            
offsetAnimation.InsertExpressionKeyFrame(1.0f, "This.FinalValue");
animationCollection["Offset"] = offsetAnimation;
var visual = ElementCompositionPreview.GetElementVisual(child);
visual.ImplicitAnimations = animationCollection;

I expected this code to only animate the Y offset of the child, but it doesn't display any animation at all:

 var offsetAnimation = compositor.CreateScalarKeyFrameAnimation();
 offsetAnimation.Target = "Offset.Y";
 offsetAnimation.Duration = TimeSpan.FromSeconds(0.5);
 offsetAnimation.InsertExpressionKeyFrame(1.0f, "This.FinalValue");
 animationCollection["Offset"] = offsetAnimation;
 var visual = ElementCompositionPreview.GetElementVisual(child);
 visual.ImplicitAnimations = animationCollection;

Setting Target to "Offset.y" or the trigger to "Offset.Y" doesn't help.

I haven't found an example using visual sub channels in the documentation, so I would appreciate any help on how to only animate the y channel of the offset.

Upvotes: 1

Views: 100

Answers (1)

Sunteen Wu
Sunteen Wu

Reputation: 10627

According to your code snippet, you set a Offset trigger for the animation. That means once the offset of child is changed, this animation will started. And you set 'This.FinalValue' for the ExpressionKeyFrame, so it will bind the value you set to the new offset and it will animate to that new value.

So we if we just set the new offset to only have y value changed (let x and z be same as the old one), the animation will only animate the y channel.

Code like follows:

<TextBlock x:Name="txtanimation" Text="animation test" Height="30" Width="100" Foreground="Red" ></TextBlock>
<Button x:Name="btnanimate" Click="btnanimate_Click" Content="Animate y" Margin="60"></Button>

Code behind:

Visual visual;  
public MainPage()
{
    this.InitializeComponent();
    visual = ElementCompositionPreview.GetElementVisual(txtanimation);
    Compositor compositor = ElementCompositionPreview.GetElementVisual(txtanimation).Compositor;
    ImplicitAnimationCollection animationCollection = compositor.CreateImplicitAnimationCollection();
    Vector3KeyFrameAnimation offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
    offsetAnimation.Target = "Offset";
    offsetAnimation.Duration = TimeSpan.FromSeconds(2.5);
    offsetAnimation.InsertExpressionKeyFrame(1.0f, "This.FinalValue");    
    animationCollection["Offset"] = offsetAnimation;
    visual.ImplicitAnimations = animationCollection; 
}

private void btnanimate_Click(object sender, RoutedEventArgs e)
{        
     visual.Offset=visual.Offset+ new System.Numerics.Vector3(0f, 400f, 0f);
}

And the result: enter image description here

More samples please reference WindowsUIDevLabs. And more details you can reference videos like Implicit Animations.

Upvotes: 0

Related Questions