動畫的圖像產生意想不到的額外運動

我試圖創建一個函數，通過交換每個人的位置與他們的鄰居的位置，以徑向佈局圍繞一個圓圈移動圖像。最終的效果是圖像以圓圈旋轉。按下S（逆時針）或D（順時針）鍵時，變換被激活。我正在使用一個數組來跟蹤圖像的位置並將這些座標發送到實際進行轉換的函數。動畫的圖像產生意想不到的額外運動

在任一方向的第一個旋轉工作正常。但是任何連續的同向旋轉都會產生奇怪的不想要的運動。實質上，在每次新的旋轉中，圖像都向內移動到圓的中心，然後再移出以獲得最終位置。每次按鍵時向內移動的數量都會變差。

因爲我不能將圖像附加到此電子郵件我已經發布了一個位置： http://i1266.photobucket.com/albums/jj532/ik_al/screencap.jpg

的圖像顯示了一系列的截圖來說明現象。請注意，截圖全部都在一次旋轉中發生。

這是我的XAML文件：

<Window x:Class="radialLayout.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:MyNamespace="clr-namespace:radialLayout" 
     Title="MainWindow" Height="350" Width="525" KeyUp="Window_KeyUp"> 
<Grid Width="1024" Height="768"> 

    <MyNamespace:RadialPanel Margin="27,21,31,32" MouseWheel="RadialPanel_MouseWheel" x:Name="ImagePanel"> 
     <!--Must use same namespace declared above--> 

     <!--Each image must have a unique name--> 
     <Image Height="49" Name="image1" Width="74" Source="/radialLayout;component/Images/profile.jpg" /> 
     <Image Height="49" Name="image2" Width="74" Source="/radialLayout;component/Images/IMG_0841.JPG" /> 
     <Image Height="49" Name="image3" Width="74" Source="/radialLayout;component/Images/profile.jpg" /> 
     <Image Height="49" Name="image4" Width="74" Source="/radialLayout;component/Images/IMG_0841.JPG" /> 
     <Image Height="49" Name="image5" Width="74" Source="/radialLayout;component/Images/profile.jpg" /> 
     <Image Height="49" Name="image6" Width="74" Source="/radialLayout;component/Images/IMG_0863.JPG" /> 
     <Image Height="49" Name="image7" Width="74" Source="/radialLayout;component/Images/profile.jpg" /> 
     <Image Height="49" Name="image8" Width="74" Source="/radialLayout;component/Images/IMG_1043.JPG" /> 
     <Image Height="49" Name="image9" Width="74" Source="/radialLayout;component/Images/profile.jpg" /> 
     <Image Height="49" Name="image10" Width="74" Source="/radialLayout;component/Images/IMG_0863.JPG" /> 
     <Image Height="49" Name="image11" Width="74" Source="/radialLayout;component/Images/profile.jpg" /> 
     <Image Height="49" Name="image12" Width="74" Source="/radialLayout;component/Images/IMG_0863.JPG" /> 

    </MyNamespace:RadialPanel>

這裏是函數調用和功能實現：

for (int o = 0; o < VisualTreeHelper.GetChildrenCount(ImagePanel); o++) 
      { 
       Visual childVisual = (Visual)VisualTreeHelper.GetChild(ImagePanel, o); 
       MyExtensions.MoveTo((Image)childVisual, lastPosition[o, 0], lastPosition[o, 1], ImagePanel.imageCoordinates[o, 0], ImagePanel.imageCoordinates[o, 1]); 

      } 

     public static void MoveTo(this Image target, double currentX, double currentY, double newX, double newY) 
    { 
     Vector offset = VisualTreeHelper.GetOffset(target); 
     var top = offset.Y; 
     var left = offset.X; 
     TranslateTransform trans = new TranslateTransform(); 
     target.RenderTransform = trans; 
     DoubleAnimation anim1 = new DoubleAnimation(0, newY - top, TimeSpan.FromSeconds(1)); 
     DoubleAnimation anim2 = new DoubleAnimation(0, newX - left, TimeSpan.FromSeconds(1)); 
     trans.BeginAnimation(TranslateTransform.YProperty, anim1); 
     trans.BeginAnimation(TranslateTransform.XProperty, anim2); 
    }

有誰知道是什麼原因造成這種行爲或如何解決它？

來源

2012-07-26 Aaron

經過很多調查，我終於明白我在代碼中做錯了什麼。

我不明白，使用translateTranform時，圖像的原始位置被保留作爲所有連續變換的起點;我認爲它已更新到最新的最新位置。另外，這個起點始終由座標（0,0）引用。

因此，要解決我的動畫的問題，我不得不抵消從屏幕上的圖像的當前位置減去（第一變換之前）每個圖像的原始位置開始和停止我的圖片的位置（如存儲在數組中）。對於第一次通過這些值將總是加起來爲0.

我已經完成這個偏移量的停止職位，因爲有必要甚至第一次轉換工作。但事實證明，這個減法是需要更新開始職位。

在代碼圖像的原始位置被存儲在左和頂部變量哪個參考X和Y分別座標。

下面是我改變了代碼的一部分：

 DoubleAnimation anim1 = new DoubleAnimation(currentY-top, newY - top, TimeSpan.FromSeconds(1)); 
     DoubleAnimation anim2 = new DoubleAnimation(currentX-left, newX - left, TimeSpan.FromSeconds(1));

什麼是有趣關於此錯誤是，當所有12個圖像轉化一起生成的動畫是更爲複雜和有趣的比它本來如果每個圖像單獨移動。所以在計算圖像變換產生緊急輸出的方式之間必須存在一些相互作用。我看到的結果讓我覺得解決方案比實際情況複雜得多。

來源

2012-07-29 18:01:54 Aaron

動畫的圖像產生意想不到的額外運動

回答

相關問題