UWP wincomposition：动画多个图像的偏移

Question

我尝试在一个Grid控件中动画多个（不同大小）的图像，但只有最大的一个是动画。目标属性是“Offset.x”。

 var container = new Grid(); 
     var compositor = ElementCompositionPreview.GetElementVisual(container).Compositor; 
     var containerVisual = compositor.CreateContainerVisual(); 

     // ------ 
     // CLOUDS 
     // ------ 
     var cloudImage1 = CreateCloudImage(60); 
     var cloudVisual1 = ElementCompositionPreview.GetElementVisual(cloudImage1); 

     var cloudImage2 = CreateCloudImage(70); 
     var cloudVisual2 = ElementCompositionPreview.GetElementVisual(cloudImage2); 

     var cloudImage3 = CreateCloudImage(50); 
     var cloudVisual3 = ElementCompositionPreview.GetElementVisual(cloudImage3); 

     container.Children.Add(cloudImage1); 
     container.Children.Add(cloudImage2); 
     container.Children.Add(cloudImage3); 

     containerVisual.Children.InsertAtTop(cloudVisual1); 
     containerVisual.Children.InsertAtTop(cloudVisual2); 
     containerVisual.Children.InsertAtTop(cloudVisual3); 

     // ---------- 
     // ANIMATIONS 
     // ---------- 
     var offsetAnimation = CreateOffsetAnimation(compositor, 50, 6); 
     cloudVisual1.StartAnimation("Offset.x", offsetAnimation); 

     offsetAnimation.InsertKeyFrame(1f, -60); 
     cloudVisual2.StartAnimation("Offset.x", offsetAnimation); // doesn't work 

     ElementCompositionPreview.SetElementChildVisual(container, containerVisual); 

     return container; 

助手方法：

static ScalarKeyFrameAnimation CreateOffsetAnimation(Compositor compositor, float endKeyFrame, double duration) { 
     var animation = compositor.CreateScalarKeyFrameAnimation(); 
     animation.InsertKeyFrame(0f, 0); 
     animation.InsertKeyFrame(1f, endKeyFrame); 
     animation.IterationBehavior = AnimationIterationBehavior.Forever; 
     animation.Direction = AnimationDirection.Alternate; 
     animation.Duration = TimeSpan.FromSeconds(duration); 

     return animation; 
} 

static Image CreateCloudImage(double size) { 
     var cloudBitmapImage = new BitmapImage(new Uri("ms-appx:///Assets/Icons/cloudy.png")); 
     var cloudImageControl = new Image() { 
      Source = cloudBitmapImage, 
      Height = size, 
      Width = size, 
     }; 

     return cloudImageControl; 
} 

需要注意的是，如果我做的第二图象最大的，它成为该动画的一个。

关于如何解决这个问题的任何想法？

在此先感谢。

Answer 1

简短回答：使用Canvas控件保存图像。

最佳答案：我找到了解决方案：罪魁祸首是使用网格控件作为托管我的图像的容器。我认为不知何故（也许是由于父级中心水平对齐 - 代码中未显示），Grid容器为我的图像添加了边距，导致了奇怪的行为，如问题中所述。

为了解决这个问题，我添加了一个Canvas控件来保存我的图像，并将此Canvas添加为网格容器的子节点。

 var container = new Grid(); 
     var compositor = ElementCompositionPreview.GetElementVisual(container).Compositor; 
     var containerVisual = compositor.CreateContainerVisual(); 

     var canvas = new Canvas(); 

     // ------ 
     // CLOUDS 
     // ------ 
     var cloudImage1 = CreateCloudImage(60); 
     var cloudVisual1 = ElementCompositionPreview.GetElementVisual(cloudImage1); 

     var cloudImage2 = CreateCloudImage(70); 
     var cloudVisual2 = ElementCompositionPreview.GetElementVisual(cloudImage2); 

     var cloudImage3 = CreateCloudImage(50); 
     var cloudVisual3 = ElementCompositionPreview.GetElementVisual(cloudImage3); 

     canvas.Children.Add(cloudImage1); 
     canvas.Children.Add(cloudImage2); 
     canvas.Children.Add(cloudImage3); 

     containerVisual.Children.InsertAtTop(cloudVisual1); 
     containerVisual.Children.InsertAtTop(cloudVisual2); 
     containerVisual.Children.InsertAtTop(cloudVisual3); 

     // ---------- 
     // ANIMATIONS 
     // ---------- 
     var offsetAnimation = CreateOffsetAnimation(compositor, 50, 6); 
     cloudVisual1.StartAnimation("Offset.x", offsetAnimation); 

     offsetAnimation.InsertKeyFrame(1f, -60); 
     cloudVisual2.StartAnimation("Offset.x", offsetAnimation); // work 

     offsetAnimation.InsertKeyFrame(1f, 100); 
     cloudVisual3.StartAnimation("Offset.x", offsetAnimation); // work 

     ElementCompositionPreview.SetElementChildVisual(canvas, containerVisual); 

     container.Children.Add(canvas); 
     return container; 

（用Canvas容器替换Grid容器也应该可以）。