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容器也應該可以）。