WPFのDrawingContextでアニメーション - プログラムの事とか

DrawingContextの謎メソッド（自分の中で）の実験

WPFでちょっと変わった表現をしたい時とか結局自分で描きますよね（WPFに限らずですが）

例えば

public class DrawTest : FrameworkElement
{
    protected override void OnRender(DrawingContext drawingContext)
    {
        base.OnRender(drawingContext);

        var center = new Point(this.ActualWidth / 2, this.ActualHeight / 2);

        drawingContext.DrawEllipse(Brushes.Orange, null, center, 20, 20);
    }
}

こんなクラス作ってMainWindowに張り付けると

f:id:puni-o:20180409100051j:plain

こんな感じに中央にオレンジの円を描画します

上で使ったDrawingContext.DrawEllipseが円を描くメソッドなわけですがこいつには

public abstract void DrawEllipse(Brush brush, Pen pen, Point center, double radiusX, double radiusY);
public abstract void DrawEllipse(Brush brush, Pen pen, Point center, AnimationClock centerAnimations, double radiusX, AnimationClock radiusXAnimations, double radiusY, AnimationClock radiusYAnimations);

こんな感じにオーバーロードな奴がもう一つあります

AnimationClockを引数に持つんですが、AnimationClockってことはアニメーションしてくれんの？でもアニメーションってOnRenderで一コマずつ描くんじゃないの？？どういうこと？？？といつも疑問に思って試していませんでした

ためしてみよう

簡単に試せるんだから試してみました

protected override void OnRender(DrawingContext drawingContext)
{
    base.OnRender(drawingContext);

    var center = new Point(this.ActualWidth / 2, this.ActualHeight / 2);

    var pointAnimation = new PointAnimation(new Point(this.ActualWidth, this.ActualHeight / 2), new Duration(TimeSpan.FromSeconds(3)));
    pointAnimation.AutoReverse = true;

    var doubleAnimation = new DoubleAnimation(20, 5, new Duration(TimeSpan.FromSeconds(5)));
    doubleAnimation.AutoReverse = true;

    drawingContext.DrawEllipse(Brushes.Orange, null, center, pointAnimation.CreateClock(), 20, doubleAnimation.CreateClock(), 20, doubleAnimation.CreateClock());
}