动画的图像产生意想不到的额外运动

我试图创建一个函数，通过交换每个人的位置与他们的邻居的位置，以径向布局围绕一个圆圈移动图像。最终的效果是图像以圆圈旋转。按下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

动画的图像产生意想不到的额外运动

回答

相关问题