私には非常に特殊なユースケースがあり、それを実装する際にはかなり奇妙な問題があります。私のMetroアプリには、ユーザーインタラクションで移動したい画像がいくつかあります。たとえば、チェスの駒の画像を考えてみましょう。ここではポインタの動きを追ってアニメーション化することができないため、ストーリーボードアニメーションを使用して作業を行っています。
つまり、私が基本的に持っているのは、ゲームボード全体のキャンバスと、下隅にある小さなチェスの駒の画像です。チェスの駒のTopプロパティとLeftプロパティを手動で設定できるため、初期設定は簡単です。チェスの駒を移動するために、移動に応じて新しいTopプロパティとLeftプロパティを計算しています。たとえば、プレーヤーがポーンを上に移動すると、Topの値は(Canvas.Height / 8)だけ変化しますが、Leftプロパティは同じままです。さて、ここまで、すべてが順調です。唯一の問題は、これにより、画像がスムーズな動きではなく、最初の場所から最後の場所にジャンプすることです。
そこで、以下のように上下の位置をアニメートする絵コンテを作成しました。
<Storyboard x:Key="storyboard">
<DoubleAnimation x:Name="playerLeftAnimation" Storyboard.TargetName="playerPiece"
Storyboard.TargetProperty="Canvas.Left"
EnableDependentAnimation="True"
Duration="0:0:2" />
<DoubleAnimation x:Name="playerTopAnimation" Storyboard.TargetName="playerPiece"
Storyboard.TargetProperty="Canvas.Top"
EnableDependentAnimation="True"
Duration="0:0:2" />
</Storyboard>
Fontsizeのような通常の依存関係プロパティにこのメソッドを使用する場合、これはうまく機能します。ここでplayerPieceは画像名です。Canvasには名前がありません。ただし、ここでは「ストーリーボードの対象物を解決できない」という例外があります。設定するものが足りませんか?または、画像の位置をアニメーション化する別の方法を試す必要がありますか?はいの場合、どのアイデアが最善の方法ですか?