【WPF】アニメーションがうまく表示されないときの対処方法【Storyboard】

以前、画像を使ったアニメーションの制御について記事を書きました。

2019年1月7日 WPFで画像を使用したアニメーション（画像の切り替え）

この記事の方法は間違ってはいないのですが、アニメーションのチラツキが起きてしまう場合があったのでその対応をしました。

コードビハインドにアニメーションの処理を記述する

コードビハインドにアニメーションの処理を書くことでちらつきがなくなりました。

<Canvas>
    <!--xaml側でアニメーション制御をするとちらつくのでコードビハインド側に処理を記述-->
    <Image Name="main" Source="{StaticResource CardInsertionBooth001}" Width="365" Height="375"/>
</Canvas>

public Constructor()
{
    InitializeComponent();

    InitAnimation();
}

public void InitAnimation()
{

    //切り替えていく画像
    var animationImages = new BitmapImage[3];
    animationImages[0] = new BitmapImage(new Uri($@"anime_1.png", UriKind.Relative));
    animationImages[1] = new BitmapImage(new Uri($@"anime_2.png", UriKind.Absolute));
    animationImages[2] = new BitmapImage(new Uri($@"anime_3.png", UriKind.Absolute));

    //画像切り替え間隔
    var frameSpan = new TimeSpan(0, 0, 0, 0,200);

    var image = FindName("main") as Image;

    var storyboard = new Storyboard();
    var animation = new ObjectAnimationUsingKeyFrames();

    Storyboard.SetTargetName(animation, targetName);
    Storyboard.SetTargetProperty(animation, new PropertyPath("Source"));

    //ずっとリピート
    animation.RepeatBehavior = RepeatBehavior.Forever;

    var nowFrame = TimeSpan.Zero;
    foreach (var i in animationImages)
    {
        DiscreteObjectKeyFrame key = new DiscreteObjectKeyFrame
        {
            KeyTime = nowFrame,
            Value = i
        };

        animation.KeyFrames.Add(key);

        nowFrame += frameSpan;
    }

    animation.Duration = nowFrame;
    storyboard.Children.Add(animation);

    storyboard.Begin(image);
}

こちらのサイトを参考にさせていただいています。
http://ofuton-usagi.hatenablog.com/entry/2015/03/30/220652

アニメーションがうまく表示されない原因を推測

アニメーションをUserControlに定義しているのですが、そのUserControlのVisibility（表示・非表示）を切り替える処理を加えていました。

Hiddenだとうまく動くのですが、Collapsedだとうまく動きません。おそらく、Hiddenはコントロールを予約しているのでアニメーションがそのまま動作している？っぽいのですが、Collapsedだとコントロールを予約しているのでその都度アニメーションを作っている感じになります。

コードビハインドで書いてうまく動くならxamlに書いてもうまく動いてほしいところですが・・・

ひとまずコードビハインドにアニメーションの処理を記述することでちらつきを解決しました。