0

我正在尝试创建一个函数，通过将每个人的位置与其邻居的位置交换来移动以放射状布局排列的图像。最后的效果是图像围绕一个圆圈旋转。当按下 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);
    }

有谁知道是什么导致了这种行为或如何解决它？

4

1 回答 1

0

经过大量调查，我终于弄清楚我在代码中做错了什么。

我不明白在使用 translateTranform 时，图像的原始位置被保留为所有连续变换的起点；我认为它已更新到最新的最新位置。此外，此起点始终由坐标 (0,0) 引用。

因此，为了解决我的动画问题，我必须通过从屏幕上图像的当前位置（存储在数组中）减去每个图像的原始位置（第一次变换之前）来偏移图像的开始和停止位置。对于第一次通过，这些值将始终加起来为 0。

我已经完成了停止位置的偏移，因为即使是第一次转换也需要工作。但事实证明，这个减法也需要更新起始位置。

在代码中，图像的原始位置存储在分别引用 X 和 Y 坐标的left和top变量中。

这是我更改的代码部分：

        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-29T18:01:54.163 回答