我正在尝试创建一个函数,通过将每个人的位置与其邻居的位置交换来移动以放射状布局排列的图像。最后的效果是图像围绕一个圆圈旋转。当按下 S(逆时针)或 D(顺时针)键时,变换被激活。我正在使用一个数组来跟踪图像的位置,并将这些坐标发送到一个实际执行转换的函数。
任一方向的第一次旋转都可以正常工作。但是在同一方向上的任何连续旋转都会产生奇怪的不需要的运动。本质上,随着每一次新的旋转,图像都会向内移动到圆的中心,然后再次向外移动以占据最终位置。每按一次键,向内运动的量就会变得更糟。
由于我不允许在这封电子邮件中附加图片,因此我在此处发布了一张图片:http: //i1266.photobucket.com/albums/jj532/ik_al/screencap.jpg
该图显示了一系列截图来说明这一现象。请注意,屏幕截图都发生在 ONE 轮换中。
这是我的 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);
}
有谁知道是什么导致了这种行为或如何解决它?