まえがき
ご挨拶、親愛なるhabrayuzery！ 今日は、WPFのアニメーションについてお話したいと思います。 もちろん、彼らはハブについて以前にそれについて書いたが、私はより詳細に話そうとする。 私の投稿はおそらくより理論的なものになりますが、皆さんの利益になることを願っています。
WPFのアニメーションは、その明快さとシンプルさで、以前見たものすべてとは異なります。 以前は、タイマーでシーンを手動で再描画する必要がありました。もちろん、かなり大量のコードを記述していました。 これで、C＃（または他の.Net言語）で1行のコードを記述することなく、XAMLファイルでアニメーションを作成できます。 もちろん、コード内でアニメーションを作成する機会は残っていますが、これについては後で説明します。 WPFのアニメーションは要素を再描画しませんが、特定の間隔でプロパティを変更します（デフォルトでは、ストーリーボードで変更しない限り、1秒間に約60回）。 これにより、たとえば、ボタンをアニメーション化する場合、それ自体を維持でき、アニメーション中は「ボタン」のままになります。 クリックして、さまざまな操作を行うことができます。
カットの下にある多くのコード、例、写真...
建築
WPFのアニメーションはすべてSystem.Windows.Media.Animation名前空間にあります 。 すべてのアニメーションクラスは、アニメーション化されるタイプの名前で始まります。たとえば、 DoubleAnimationはDoubleタイプのプロパティをアニメーション化します。
アニメーションは3つのカテゴリに分類されます。
1.線形補間を使用したアニメーション（ アニメーションプロパティタイプ ）
2. キーフレームを使用したアニメーション（ KeyFrames を使用したプロパティタイプの使用 ）
3.パスアニメーション（ UsingPathプロパティタイプ ）
すべてのアニメーションは、 AnimationBase PropertyTypeを継承します。 この名前空間には、ほとんどのBCLタイプのアニメーションクラスが含まれています。
はじめに、XAMLの最も単純なアニメーションを見てみましょう。
< Button >
< Button.Triggers >
< EventTrigger RoutedEvent ="Button.Click" >
< BeginStoryboard >
< Storyboard >
< ThicknessAnimation
From ="0"
To ="200"
Duration ="0:0:5"
Storyboard . TargetProperty
="Margin" />
</ Storyboard >
</ BeginStoryboard >
</ EventTrigger >
</ Button.Triggers >
</ Button >
* This source code was highlighted with Source Code Highlighter .
各クラスをさらに詳しく見てみましょう。
•ThicknessAnimation-アニメーション自体。
•ストーリーボード-「タイムライン」。 それについては後で話します。
•BeginStoryboard-Storyboardの「ラッパー」。アニメーションを開始します。
•EventTrigger-イベントでトリガーします。
ボタンをクリックすると、減少していることがわかります。
左クリックして、すぐ後に。
MSDNの同様の例。 残念ながら、objectタグはhabraparserをスキップしません。
アニメーションは、依存関係プロパティが変更されたときにトリガーすることもできます。
< Button >
< Button.Style >
< Style >
< Style.Triggers >
< Trigger Property ="Button.IsPressed"
Value ="True" >
< Trigger.EnterActions >
< BeginStoryboard >
< Storyboard >
< ThicknessAnimation
From ="0" To ="200"
Duration ="0:0:5"
Storyboard . TargetProperty
="Margin" />
</ Storyboard >
</ BeginStoryboard >
</ Trigger.EnterActions >
</ Trigger >
</ Style.Triggers >
</ Style >
</ Button.Style >
</ Button >
* This source code was highlighted with Source Code Highlighter .
ただし、この場合、同じ結果が得られます。
微調整
Storyboard.TargetPropertyプロパティ
この添付プロパティは、アニメーションのターゲットプロパティを設定します。 この場合、アニメーションをMarginプロパティに適用します。
Storyboard.TargetNameプロパティ
この添付プロパティは、XAML可視性内でターゲット要素の名前を設定します。 XAMLの別の要素にアニメーションを適用する場合に使用します。
Storyboard.Targetプロパティ
この添付プロパティは、アニメーションを適用するターゲット要素を設定します。 コードでアニメーションを作成するときに一般的に使用されます。 MSDNの例。
物件から
このプロパティは、初期値、つまり 起動時に、この値が使用されます。 ただし、このプロパティは省略でき、現在の値が初期値として使用されます。 これにより、あるアニメーションの終了を待たずに別のアニメーションを開始でき、同時に「ぎこちない」ことがなくなります。 WidthプロパティとHeightプロパティをアニメーション化する場合、プロパティの値がDouble.NaNではないことを確認してください。
プロパティへ
このプロパティは最終値を設定します。 プロパティがアニメーションの前に取得した値を使用して、省略することもできます。 たとえば、ボタンの上にカーソルを置いて拡張アニメーションを作成し、カーソルが離れたときにToプロパティなしでアニメーションを作成し、ボタンを離れると元のサイズに「狭く」なります。
プロパティによって
このプロパティは、最終プロパティが変更される値を設定します。 簡単に言えば、 Byプロパティに値を割り当てると、 ToプロパティはFrom + Byの値を取ります。 これは、XAMLでのアニメーションの使用を容易にするために行われます。
Byプロパティはすべてのクラスで実装されているわけではありません。 基本的に、このプロパティは数値アニメーションに存在します。
IsAdditiveプロパティ
このプロパティを使用すると、 FromとToの値を相対にすることができます。 大まかに言うと、このプロパティがTrueに設定されている場合、初期値は「現在の値+ から 」、最終的な「現在の値+ から 」に等しくなります。
Durationプロパティ
このプロパティは、アニメーションの継続時間を設定します。 注-このプロパティのタイプはTimeSpanではなく、 Durationです。 なぜ時間がかかるのですか？ TimeSpanへの暗黙的なキャストがあるためです。 「しかし、なぜあなたは期間が必要なのですか？」とあなたは言う。 次に、そのDurationは値Duration.Automatic （1秒に相当）およびDuration.Forever （アニメーションは何もしません）を取ることもできます。
BeginTimeプロパティ
このプロパティは、アニメーションを開始する前の遅延を設定します。 ここではすべてが明らかだと思います。 MSDNの例。
SpeedRatioプロパティ
このプロパティは、アニメーションの速度を設定します。 初期値は1Dです。 増加すると速度はそれに応じて増加し、減少すると速度が低下します。 たとえば、このプロパティに2Dを割り当てると、速度は2倍になります。
AccelerationRatioおよびDecelerationRatioプロパティ
これらのプロパティは、加速または減速ギャップを指定します。 その値はパーセンテージで示されます。 たとえば、 AccelerationRatioプロパティを0.5に設定すると、その時間の半分でアニメーションが加速されます。 または、合計時間が4秒のプロパティAccelerationRatioおよびDecelerationRatio 0.25を割り当てると、すべてが次のようになります。
1.アニメーションを1秒加速
2. 2秒間の一定速度
3.アニメーションを1秒間遅くします
これらのプロパティの値は、1より大きくしたり、0より小さくしたりすることはできません。
AutoReverseプロパティ
このプロパティがTrueの場合、アニメーションの最後に反対方向に再開されます。 つまり ボタンが増加すると、減少します。
BeginTimeはアニメーションの最初にのみ適用され、反対方向への遅延はありません。
アニメーションの種類
次に、各ビューをさらに詳しく検討します。
線形アニメーション
ここではすべてが単純です。線形補間関数を使用して、ある値から別の値にプロパティをアニメーション化します。 以前に検討したのは、線形アニメーションのみでした。
キーフレームアニメーション
このアニメーションは、キーフレームによってプロパティをアニメーション化します。 あなたが3Dアニメーションを扱っていたなら、あなたは私を理解するでしょう。
キーフレームのアニメーションは、通常のアニメーションと似ていますが、条件は1つだけです。最終値は2つ以上になる場合があります。
このXAMLスニペットを検討してください。
< Border Background ="White" >
< Border.Triggers >
< EventTrigger RoutedEvent ="Border.MouseDown" >
< EventTrigger.Actions >
< BeginStoryboard >
< Storyboard >
< ColorAnimationUsingKeyFrames
Storyboard . TargetProperty
="(Border.Background).
(SolidColorBrush.Color)" >
< LinearColorKeyFrame
KeyTime ="0:0:2"
Value ="Blue" />
< LinearColorKeyFrame
KeyTime ="0:0:4"
Value ="Red" />
< LinearColorKeyFrame
KeyTime ="0:0:6"
Value ="Green" />
</ ColorAnimationUsingKeyFrames >
</ Storyboard >
</ BeginStoryboard >
</ EventTrigger.Actions >
</ EventTrigger >
</ Border.Triggers >
</ Border >
* This source code was highlighted with Source Code Highlighter .
ColorAnimationUsingKeyFrames-キーフレームを使用して色をアニメーション化します。
LinearColorKeyFrame-補間を使用したカラーアニメーションのキーフレーム。
3つのキーがあります。 ここで、アニメーション自体を想像してみましょう。「フレームごと」と言ってください:)：
キーフレームには4つのタイプがあります。
1. 線形PropertyType KeyFrame-線形補間を使用するキーフレーム。
2. Discrete PropertyType KeyFrame-補間のないキーフレーム。 プロパティの値を大幅に変更する場合に使用します。 ObjectAnimationUsingKeyFramesの唯一の種類のキーフレーム。
3. Spline PropertyType KeyFrame-ベジェ曲線によって補間されたキーフレーム。 カーブポイントはKeySplineプロパティによって設定されます。 残りはLinearKeyFrameに似ています （簡単にするためにタイプを省略します）。
4. イージングプロパティタイプ KeyFrame - LinearKeyFrameと同様、スムーズ機能のみを使用できます。 EasingFunctionプロパティは、スムーズな関数であるタイプEasingFunctionBaseのオブジェクトを受け入れます。 利用可能なすべてのスムーズ機能をここでご覧ください。 MSDNのスムーズ機能のギャラリー。
各キーフレームには2つのプロパティがあります。
• KeyTime-プロパティがターゲット値を取る時間を設定します。
• 値 -フレームの目標値。 アニメーションのタイプに依存します。
パスベースのアニメーション
パスベースのアニメーションは、 PathGeometryオブジェクトを使用して値を設定します。
このXAMLフラグメントを詳しく見てみましょう。
< Window.Resources >
< PathGeometry x:Key ="path" >
< PathFigure IsClosed ="True" >
< ArcSegment Point ="1,0"
Size ="50,25"
IsLargeArc ="True" />
</ PathFigure >
</ PathGeometry >
< Storyboard x:Key ="storyboard"
Storyboard . TargetName ="rect" >
< DoubleAnimationUsingPath
Storyboard . TargetProperty ="(Canvas.Left)"
PathGeometry ="{StaticResource path}"
Source ="X" Duration ="0:0:5" />
< DoubleAnimationUsingPath
Storyboard . TargetProperty ="(Canvas.Top)"
PathGeometry ="{StaticResource path}"
Source ="Y" Duration ="0:0:5" />
</ Storyboard >
</ Window.Resources >
< Canvas >
< Path Data ="{StaticResource path}"
StrokeThickness ="2" Stroke ="Black"
Canvas . Left ="50" />
< Rectangle x:Name ="rect" Stroke ="Black"
StrokeThickness ="2" Width ="10"
Height ="10" >
< Rectangle.RenderTransform >
< TranslateTransform X ="45" Y ="-5" />
</ Rectangle.RenderTransform >
</ Rectangle >
</ Canvas >
* This source code was highlighted with Source Code Highlighter .
すべてが同じで、パスベースのアニメーションのみが使用されます。 PathGeometryプロパティは、パスのジオメトリを含むPathGeometryオブジェクトを設定します。 Sourceプロパティは、XまたはY座標などの出力値を設定します。
最終結果
MSDNの例。 もちろん、この例はアニメーションの再生の制御に関するものですが、これはパスベースのアニメーションを使用する唯一の例です。
ストーリーボード-これはどんな獣ですか？
あなたは私がStoryboardをよく使用することにすでに気づいています。 これはアニメーションではないことは明らかだったと思います。 このクラスを使用すると、複数のアニメーションをグループ化できます（したがって、 TimelineGroupから継承されます ）。 これはアニメーションのコンテナであると言えます。 一度にすべてを管理できるという点で非常に便利です。 たとえば、 Begin（）メソッドを使用すると、すぐに10個のアニメーションが開始されます。 もちろん、単一のアニメーションの場合、完全にオプションです。 ただし、上で書いたように、 BeginStoryboard.StoryboardプロパティはStoryboardタイプであるため、これを使用するには、アニメーションを「ラップ」する必要があります。
コードでアニメーションを作成する
XAMLを理解した場合、ここではすべてが簡単です。 1つの要素にアニメーションを適用する場合は、それを作成して、最終要素でBeginAnimation（）メソッドを呼び出します。
var animation = new ThicknessAnimation(); animation.From = new Thickness(20); animation.To = new Thickness(100); animation.Duration = TimeSpan.FromSeconds(5); button.BeginAnimation(MarginProperty, animation);
また、上記で説明したStoryboard.TargetおよびStoryboard.TargetPropertyプロパティを使用して、アニメーションの最終要素とプロパティを手動で設定することもできます。
var animation1 = new ThicknessAnimation(); animation1.From = new Thickness(5); animation1.To = new Thickness(25); animation1.Duration = TimeSpan.FromSeconds(5); Storyboard.SetTarget(animation1, button1); Storyboard.SetTargetProperty(animation1, new PropertyPath(MarginProperty)); var animation2 = new ThicknessAnimation(); animation2.From = new Thickness(5); animation2.To = new Thickness(25); animation2.Duration = TimeSpan.FromSeconds(5); Storyboard.SetTarget(animation2, button2); Storyboard.SetTargetProperty(animation2, new PropertyPath(MarginProperty)); var storyboard = new Storyboard(); storyboard.Children = new TimelineCollection {animation1, animation2}; storyboard.Begin();
PSこの機会を利用して、新年おめでとうございます！
PSSマークアップコードは、モバイルデバイスの読みやすさを向上させるために「圧縮」されています（WP7からハブをよく読みます）。