Question

我正在尝试创建一个功能，通过将每个人的位置与他们的邻居位置交换，将以径向布局排列的图像移动到圆圈中。最终效果是图像围绕圆圈旋转。按下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);
    }

有谁知道导致此行为的原因或解决方法？

Answer 1

经过多次调查后，我终于弄清楚我的代码中出错了什么。

我不明白在使用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个图像被转换在一起时产生的动画比单独移动每个图像时更复杂和有趣。因此，如何计算产生紧急输出的图像变换之间必须存在一些相互作用。我看到的输出让我觉得解决方案比实际复杂得多。

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

1 个答案: