6

DoubleAnimationマップのズームインとパンアウトに使用しています。私の地図は超高解像度 (15,000 x 8,438) の画像です。問題は、最初はズーム アニメーションが非常に不安定で滑らかではなく、2 回目は良くなっていくということです。アニメーションをよりスムーズにしたり、イメージやアニメーションを実行する前にキャッシングしたり、他の形式のアニメーションを使用したりするにはどうすればよいですか?

私のコード: 

namespace AnimationTest
{

public partial class MainWindow : Window
{
    ScaleTransform transP;
    TranslateTransform trans2P;

    DoubleAnimation animP;
    DoubleAnimation animYP;
    DoubleAnimation animXP;
    TransformGroup myTransformGroupP;

    public MainWindow()
    {
        InitializeComponent();

        transP = new ScaleTransform();
        trans2P = new TranslateTransform();

        myTransformGroupP = new TransformGroup();
        myTransformGroupP.Children.Add(transP);
        myTransformGroupP.Children.Add(trans2P);

        animP = new DoubleAnimation(1, 20, TimeSpan.FromMilliseconds(3000));

        animXP = new DoubleAnimation(0, -14000, TimeSpan.FromMilliseconds(3000));
        animYP = new DoubleAnimation(0, -4000, TimeSpan.FromMilliseconds(3000));
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {

        image1.RenderTransform = myTransformGroupP;
        transP.BeginAnimation(ScaleTransform.ScaleXProperty, animP);
        transP.BeginAnimation(ScaleTransform.ScaleYProperty, animP);

        trans2P.BeginAnimation(TranslateTransform.XProperty, animXP);
        trans2P.BeginAnimation(TranslateTransform.YProperty, animYP);

    }

}
}
4

4 に答える 4

4

私はあなたのアニメーションアプローチを試していません。これに独自のロジックを実装しようとしました。

まず、 Picasaで使用されているズーム アニメーションに触発されました。そこで、同様のタイプのアニメーションを実装しようとしましたが、これは、画像サイズが 10000x5000 の私の core2duo プロセッサで遅延なく正常に動作します。このアプローチは多くのメモリを消費しましたが、メモリ使用量をPicasa ImageViewerと比較すると、ほぼ同じでした。このアプローチにより、アプリケーションの読み込み時間が長くなる可能性がありますが、これは処理可能であり、ここでは問題ではありません。

これは、私が使用したメイン ウィンドウ グリッドのコードです。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Button Grid.Row="0" Height="30" Width="100" Content="Zoom" Click="ButtonZoom_OnClick" />
    <Image RenderOptions.BitmapScalingMode="HighQuality" Stretch="Uniform" Width="100" Height="100" Grid.Row="1"
           Margin="30" VerticalAlignment="Center" HorizontalAlignment="Center" Source="mad1.jpg" Name="ImageMain"
           x:FieldModifier="private" />

</Grid>

ボタン クリック イベント コード

private void ButtonZoom_OnClick(object sender, RoutedEventArgs e)
{
    Task.Factory.StartNew(() =>
        {
            var i = 0;
            while (i++ < 100)
            {
                var i1 = i;
                //var i1 = (-0.00092)*(i*i) + (0.092)*i + 0.2;
                Dispatcher.Invoke(new Action(() =>
                    {
                        if (i1 < 10 || i1 > 90)
                        {
                            ImageMain.Height += 0.5;
                            ImageMain.Width += 0.5;
                        }
                        else if (i1 < 30 || i1 > 70)
                        {
                            ImageMain.Height += 1;
                            ImageMain.Width += 1;
                        }
                        else
                        {
                            ImageMain.Height += 3;
                            ImageMain.Width += 3;
                        }
                    }));
                Thread.Sleep(30);
            }

        });
}

このコードのコメント行は、アニメーションの加速と加速のための滑らかなアニメーションの二次方程式です。ルートは、[0-100] の範囲で 0.2 と 2.5 で半分のズームを開始し、0.2 で停止するように計算されます。完全にカスタマイズされたアニメーションを作成したい場合は、WolframAlphaを使用してアニメーション グラフを確認できます。しかし、簡単な方法は、単純な制御ステートメントを使用してアニメーションを制御することです。

このコードは画像をズームするためだけのものです。アプローチはズームアウトにも似ています。

于 2013-07-14T18:51:33.660 に答える