■ その１　画像を切り替えるアニメーション　　　　　　　【１】　２　３　４

2つの画像を、アニメーションをつけて切り替える方法を紹介します。
今回作成するアニメーションは「フェードイン」「スライド」「ズーム」の3種類です。

結果はこのようになります。

プロジェクトファイルはこちら　
プロジェクトは以下の環境で作成しています。
Visual Studio 2010 C# / .NET Framework 4.0

今回はコードビハインドでアニメーションを実装します。
まず、Imageコントロールを２つ用意し、表示する画像をあらかじめセットしておきます。

-- MainWindow.xaml --

<Grid>     <Image Name=”image1” Margin="6" Stretch="Fill" Source="/Image/Sea.png" />     <Image Name=”image2” Margin="6" Stretch="Fill" Source="/Image/Tree.png" /> </Grid>

表示対象の画像を前面に出すためにZIndexを切り替えます。各アニメーションを実行する直前にこの処理を実行します。

-- MainWindow.xaml.cs --

Canvas.SetZIndex(<表示対象のImage>, 2); Canvas.SetZIndex(<表示対象ではないImage>, 1);

１　２　３　４　　>>　次へ