0

放射状に配置された画像を、それぞれの位置を隣の位置と入れ替えて円を描くように移動する機能を作成しようとしています。最終的な効果は、画像が円を描くように回転することです。S (反時計回り) または D (時計回り) キーを押すと、変換がアクティブになります。配列を使用して画像の位置を追跡し、それらの座標を実際に変換を行う関数に送信しています。

どちらの方向への最初の回転も正常に機能します。しかし、同じ方向に連続して回転すると、奇妙な不要な動きが生じます。本質的に、新しい回転ごとに、画像はすべて円の中心に向かって内側に移動してから、再び外側に移動して最終的な位置を取ります。キーを押すたびに内向きの動きの量が悪化します。

このメールに画像を添付することは許可されていないため、ここに投稿しました: http://i1266.photobucket.com/albums/jj532/ik_al/screencap.jpg

この画像は、現象を説明する一連のスクリーンショットを示しています。スクリーンショットはすべて 1 回のローテーションで行われていることに注意してください。

これが私の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 に答える