WPFのアニメーションシステム

1、基本的なアニメーション。
WPFは、より高度なモデルを提供してあなただけのこのモデルの定義アニメーションに焦点を当てることができ、関係なく、彼らのレンダリングの、このモデルは、依存関係プロパティインフラストラクチャに基づいており、本質的には、WPFのアニメーションは、単に時間間隔にわたって変化しています一つの方法に依存するプロパティの値。しかし、別の限界があり、動的特性を達成するために、必要がDoubleAnimationクラスが、ボタンを使用するために必要な動的特性を達成するために、二重のデータ型を使用して、アニメーションクラス、例えばButton.Width特性の対応するデータ型をサポートします。パディングの厚さの設定属性が使用されている、ThicknessAnimationクラスを使用する必要があります。、あなたは、対応するデータ型のアニメーションプロパティのアプリケーション用に独自のアニメーションクラスを作成することができるために、あなたは見つけるでしょう、System.Windows.Media.Animation名前空間を使用すると、ほとんどのデータ型を使用したいアニメーションクラスのために提供されています。

2、アニメーションクラス。
アニメーションの2種類が実際にあり、一方が(他の価値が突然別の値からアニメーションなるれる、アニメーションの開始と終了値の間の段階的増大様式の特性(線形補間処理)を変更することですキーフレームアニメーション)。フォーム「タイプ名+ AnimationUsingKeyFrames」を使用して、すべてのキーフレームアニメーションは、StringAnimationUsingKeyFramesとObjectAnimationUsingKeyFramesとして、命名しました。いくつかのデータ・タイプは、アニメーションのカテゴリをキーフレーム、ない補間アニメーションクラスがありません。例えば、キーフレームアニメーションアプリケーションの文字列は、アプリケーションは、文字列の補間アニメーションとして使用することができません。彼らはアニメーションをサポートしていない場合を除きしかし、すべてのデータ型は、キーフレームアニメーションをサポートしています。(補間を使用して)を有するデータのすべてのタイプの従来のアニメーションクラスはまた、DoubleAnimation DoubleAnimationUsingKyyFramesに対応する線形補間などの対応するキーフレームアニメーション種別のアニメーションを、有しています。パスベースのアニメーションもあります。線形補間、およびキーフレームのパス:このように、WPFアニメーションは、3つのメソッドを使用して。System.Windows.Media.Animationは、次の名前空間で見つかりました:

7「型クラス名+アニメーション」これらのクラスは、補間アニメーションを使用しています。

22「タイプ名+ AnimationUsingKeyFrames」これらのクラスは、キーフレームアニメーションを使用しています。

3「タイプ名+ AnimationUsingPath」カテゴリような使用パスベースのアニメーション。

3、アニメーションを作成するためのコードを使用しています。
WPF、最も一般的な技術は、線形補間アニメーション映画、標準フレームレートが60秒/フレームであり、最も簡単な方法は、上記請求アニメーションクラスに列挙されたアニメーションの使用の一例であり、次いで、修飾された要素BeginAnimationを(使用)方法であって、すべての要素がUIElementの基本クラスから開始し、WPFはIAnimatableインタフェースの一部であるBeginAnimation()メソッドを継承します。

コードXAML:

<Button Width="150" Height="60" Grid.Row="0" Click="Button_Click">点击开始动画</Button>
<Button Grid.Row="1" Name="btn1" Width="150" Height="60" Content="动画按钮"></Button>

背景コード:

private void Button_Click(object sender, RoutedEventArgs e)
{
    //实例化一个DoubleAnimation类。
    DoubleAnimation doubleAnimation = new DoubleAnimation();
    //设置From属性。
    doubleAnimation.From = btn1.Width;
    //设置To属性。
    doubleAnimation.To = 250;
    //设置Duration属性。
    doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    //为元素设置BeginAnimation方法。
    btn1.BeginAnimation(Button.WidthProperty, doubleAnimation);
}

ここに画像を挿入説明
ここでは、要素の属性値の先頭から、ためには、属性要素の属性、期間、アニメーション全体の実行時間の終了値です。値は単純値に加算されることにより使用することなくプロパティに、プロパティによって値に到達するために、使用することができます。しかし、非数値データ・タイプについて,,プロパティではそれが無意味です。

4、同時アニメーション。
アニメーションは、複数のアニメーションを作成し、要素のプロパティを設定することです。

private void Button_Click(object sender, RoutedEventArgs e)
{
    //实例化一个DoubleAnimation类。
    DoubleAnimation doubleAnimation = new DoubleAnimation();
    //设置From属性。
    doubleAnimation.From = btn1.Width;
    //设置To属性。
    doubleAnimation.To = 250;
    //设置Duration属性。
    doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    //为元素设置BeginAnimation方法。
    btn1.BeginAnimation(Button.WidthProperty, doubleAnimation);

    //实例化一个DoubleAnimation动画,用于设置元素的高。
    DoubleAnimation doubleAnimationHeight = new DoubleAnimation();
    //设置Form属性。
    doubleAnimationHeight.From = btn1.Height;
    //设置To属性的值。
    doubleAnimationHeight.By = 70;
    //设置时间。
    doubleAnimationHeight.Duration = new Duration(TimeSpan.FromSeconds(3));
    //开始动画。
    btn1.BeginAnimation(Button.HeightProperty, doubleAnimationHeight);
}

5、アニメーションのライフサイクル。
技術的な観点からは、WPFのアニメーションはアニメーションがアクティブなとき、彼らは本当に、基本属性の値を変更することができないことを意味し、一時的なもので、唯一のプロパティの値をカバーしています。

アニメーションが新しい値に、ボタンの幅を維持するために必要であるため、アニメーションの方法は、アニメーション動作の終了時に、アクティブなままになります、につながったこの時間は、一般的に質問を、あなたが完了した後に、プロパティ値を変更するために、コードを使用しようとすると、コードコードは唯一のプロパティの新しいローカル値を指定しますので、それは、動作しませんが、プロパティの値は、最初のアニメーションの後にしようとします。

アドレスに、完了後に解決するには、以下の方法を値のプロパティを変更することができます。

この属性がtrueに設定されている場合はA)、プロパティはオートリバースを設定し、動きが逆になり、アニメーションに適していない元の値が()属性の値の最後のセットは、その後、完成したが、映画の前の値まで低減される戻ります。

b)は、変更がFillBehavior属性。通常、FillBehaviorプロパティは详细アニメーションの最後に、ターゲット要素の最終的な値を適用し続けることを意味しHoldEnd、に設定されています。停止するFillBehaviorプロパティは、限り、アニメーションの最後として、プロパティが新しい値を設定するために、もう一度、アニメーションの終了後に適用される(元の値に戻ります、と一般的に1行に1つ2つの使用と組み合わせたオートリバースしていない場合)。

6、Completedイベントアニメーション。
Completedイベントを使用する場合は、それ以外の場合は動作しません、前イベントBeginAnimation()メソッドを設定します。完成品では、アニメーションは、専用のプロパティを指定して、アニメーションオブジェクトに対するヌル参照を渡す必要があるためBeginAnimation()メソッドを呼び出すことによって不活性にすることができます。

void doubleAnimationHeight_Completed(object sender, EventArgs e)
{
    MessageBox.Show("动画的高执行完毕了!!!");
    //设置空引用。
    btn1.BeginAnimation(Button.HeightProperty, null);
}

7、タイムラインクラス。

ここに画像を挿入説明

7.1)、AccelerationRatioと減速特性。
AcclerationRationは合計時間が変わらないように、アニメーションの高速化、及び他の時間延伸を補償するように、時間軸と部分DecelerationRation特性によって圧縮することができます。これら二つの特性は、パーセント値として表され、例えば、30%を使用して0.3に加速性は、フロント加速度のアニメーションの持続時間、その希望を表明しました。例えば、10秒のアニメーションに、3秒間の動作の前に減速プロパティが0.3に設定されている場合、減速バックの最後の3秒間の加速、一定速度で残りの7秒間実行されます。

private void Button_Click(object sender, RoutedEventArgs e)
{
    //实例化一个DoubleAnimation类。
    DoubleAnimation doubleAnimation = new DoubleAnimation();
    //设置From属性。
    doubleAnimation.From = btn1.Width;
    //前5秒加速度运行。
    doubleAnimation.AccelerationRatio = 0.5;
    //后2秒减速运行
    doubleAnimation.DecelerationRatio = 0.2;
    //设置To属性。
    doubleAnimation.To = 1000;
    //设置Duration属性。
    doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(10));
    //为元素设置BeginAnimation方法。
    btn1.BeginAnimation(Button.WidthProperty, doubleAnimation);
}

7.2)、RepeatBehaviorプロパティ。
繰り返し回数の希望固定数は、倍RepeatBehaviorコンストラクタの適切な数を渡す必要がある場合、アニメーションは、繰り返し実行する方法を制御するために使用するRepeataBehaviorプロパティ。

RepeatBehaviorを繰り返しても、恒久的に提供することができます。 //设置重复次数为3次。 doubleAnimation.RepeatBehavior = new RepeatBehavior(3); //设置永久重复动画。 doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

8、ストーリーバージョン。
WPFアニメーションは、開始、終了、および持続時間値として、いくつかのプロパティに関連する情報を使用して、アニメーションクラスのセットによって表されます。これは明らかに、XAMLのためにそれらは非常に適したもの、それは非常に明確ではありません、適切なタイミングでアニメーションに関連した特定のイベントやプロパティのアニメーションをトリガーする方法、及び方法です。

ストーリーボード:XAMLのストーリーボードは、等価BeginAnimation()メソッドは、適切な要素に指定されたアニメーションであり、ストーリーボードを属性。

トリガイベント:イベントトリガー応答特性の変化や事象(例えば、Clickイベント)、およびストーリーボードを制御します。

ストーリーボード:
ストーリーボードのタイムラインは、アニメーションの複数を使用することができるグループ化、強化だけでなく、コントロールアニメーション再生する能力有している-一時停止、停止、および再生位置を。しかし、ストーリーボードのクラスが提供する最も基本的な機能は、ストーリーボードのアニメーションとあなたは橋を適用したいアニメーション化されたプロパティの間、つまり、特定のプロパティと特定の要素を指すようにTargetPropertyとTargetNameは属性を使用する機能があります。前記TargetProperty TargetNameはプロパティと属性プロパティを添付しています。

<!--创建一个故事板-->
<Storyboard Storyboard.TargetProperty="Width">
    <!--创建一个DoubleAnimation类。-->
    <DoubleAnimation To="350"  RepeatBehavior="Forever" Duration="0:0:3"></DoubleAnimation>
</Storyboard>

<!--由于Storyboard.TargetProperty属性是附加属性,因此还可以写出-->
<Storyboard >
    <!--创建一个DoubleAnimation类。-->
    <DoubleAnimation Storyboard.TargetProperty = "Width" To="350"  RepeatBehavior="Forever" Duration="0:0:3"></DoubleAnimation>
</Storyboard>

イベントのトリガ:

あなたは、次の4つの場所でイベントトリガを定義することができます。

a)は、スタイルによって(Style.Triggers)がセット。

b)は、データテンプレートで(DataTemplate.Triggers)がセット。

C)、コントロールテンプレート内(ControlTemplate.Triggersコレクション)。

要素中のD)、直接定義されたイベント・トリガ(FrameworkElement.Triggersセット)。

あなたはイベントトリガーを作成するときは、イベントとトリガー1または実行するために、よりアクションをルーティング開始トリガを指定する必要があります。映画のために、最も一般的なアクションはBeginStoryboardで、このアクションはBeginAnimation()メソッドを呼び出すことと同じです。すべてのイベントトリガはアクションを開始することができ、System.Windows.TriggerActionにより、すべてのアクションが表すクラスから継承されました。

コードXAML:

<Button Width="200" Height="80" Content="事件触发器" FontSize="20">
    <!--元素触发器-->
    <Button.Triggers>
        <!--定义事件触发器-->
        <EventTrigger RoutedEvent="Button.Click">
            <!--执行一个动作-->
            <EventTrigger.Actions>
                <!--开始故事板-->
                <BeginStoryboard>
                    <!--创建一个故事板-->
                    <Storyboard >
                        <!--创建一个DoubleAnimation类。-->
                        <DoubleAnimation Storyboard.TargetProperty = "Width" To="350"  RepeatBehavior="Forever" Duration="0:0:3"></DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Button.Triggers>
</Button>

ここに画像を挿入説明
9、スタイルに関連するトリガを使用。
トリガのプロパティ、データトリガおよびイベントトリガ:WPFトリガの3つの基本タイプがあります。これは、最も一般的なアニメーションに関連付けられているトリガーを使用する方法ではなく、唯一の選択肢です。

コードXAML:

<Window.Resources>
    <Style  TargetType="Button">
        <Setter Property="FontSize" Value="20"></Setter>            
        <Style.Triggers>
            <!--使用属性触发器-->
            <Trigger Property="IsPressed" Value="True">
                <!--在这里使用的是EnterActions-->
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetProperty="Width">
                            <DoubleAnimation To="300" RepeatBehavior="Forever" Duration="0:0:3"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
    </Style>
</Window.Resources>

<Grid>
    <Button Width="200" Height="80"  Content="使用样式关联触发器"></Button>
</Grid>

ここに画像を挿入説明
10、同期されたアニメーション。
TimeLineGroupクラスからストーリーボード間接的にクラス継承は、ストーリーボードのクラスは、映画では、彼らは同時に起動することができます手段のグループとして管理することができ、複数のムービーを含めることができます。

<Window.Resources>
    <Style TargetType="Button">            
        <Setter Property="FontSize" Value="20"></Setter>            
        <Style.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width" To="300" Duration="0:0:3"></DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetProperty="Height" To="100" Duration="0:0:3"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
    
<Grid>
    <Button Width="150" Height="70" Content="同步动画"></Button>
</Grid>

ここに画像を挿入説明
11、制御再生。
これまでのところ、物語のバージョンを作成し、あなたが他のモーションコントロールストーリーボードを使用することができたら、アクション、負荷BeginStoryboardアクションアニメーションは、しかし、これらのアクションクラスはControllableStoryboardActionクラス、物語の制御バージョンから継承するイベントのトリガに使用されてきました次のように主なカテゴリは次のとおりです。

ここに画像を挿入説明
アクションのトリガーとPauseStoryboard BeginStoryboardアクショントリガが別のコレクションの中に置かれた場合、これらのアクションの実装を成功させるための、すべてのトリガーは、同じトリガコレクションに定義されている必要があり、PauseStoryboardアクションは動作しません。

コードXAML:

<Window x:Class="控制播放.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Triggers>
        <!--开始事件-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_start">
            <BeginStoryboard Name="beginstoryboard1">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="img" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:6"></DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

        <!--停止动画-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_pause">
            <PauseStoryboard BeginStoryboardName="beginstoryboard1"></PauseStoryboard>
        </EventTrigger> 
        
        <!--恢复动画-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_resume">
            <ResumeStoryboard BeginStoryboardName="beginstoryboard1"></ResumeStoryboard>
        </EventTrigger>
        
        <!--停止动画-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_stop">
            <StopStoryboard BeginStoryboardName="beginstoryboard1"></StopStoryboard>
        </EventTrigger>

        <!--移除动画-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_remove">
            <RemoveStoryboard BeginStoryboardName="beginstoryboard1"></RemoveStoryboard>
        </EventTrigger>        
    </Window.Triggers>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>   
        
        <Image  Name="img" Source="1.jpg"></Image>
        
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Name="btn_start" Content="开始" Margin="10" FontSize="20" Grid.Column="0"></Button>
            <Button Name="btn_pause" Content="暂停" Margin="10" FontSize="20" Grid.Column="1"></Button>
            <Button Name="btn_resume" Content="恢复" Margin="10" FontSize="20" Grid.Column="2"></Button>
            <Button Name="btn_stop" Content="停止" Margin="10" FontSize="20" Grid.Column="3"></Button>
            <Button Name="btn_remove" Content="移除" Margin="10" FontSize="20" Grid.Column="4"></Button>
        </Grid>
    </Grid>
</Window>

ここに画像を挿入説明
分析:トリガーのコレクションは、これらのイベントのトリガーのEventTrigger.SourceName関連するプロパティを使用して、要素の(ここではWindow.Triggersコレクション)が含まれ、そして長いボタンのプロパティsourcenameにNameプロパティの試合などとして、適切なトリガが使用されますボタン。BeginStoryboardアクションも、その後に制御すること、他のトリガーBeginStoryboardName属性が同じストーリーボードに接続され、名前を指定するように、名前を指定するように求めなければなりません。

12は、イベントをストーリーボード。
ここに画像を挿入説明
ストーリーボードイベント
完了アニメーションが終端に達した
、レート変更をCurrentGlobalSpeedInvalidated、またはアニメーションが中断され、再開停止または新しい場所に移動させます。
CurrentStateInvalidated運動が開始または終了しました。
CurrentTimeInvalidatedアニメーションクロックはそれがアニメーションを変更することで、ステップ前進しました。アニメーションが開始すると、停止、またはそれは、イベントの終わりにつながります。
RemoveRequestedアニメーションは削除されています。

アニメーションの進行状況を監視します:

あなたは映画を監視する場合は、ストーリーボードのイベントの一部を使用します。本明細書で使用する場合、フォワード各アニメーションクロック移動するイベントをリードする、イベントをCurrentTimeInvalidatedれます。CurrentTimeInvalidatedイベントをトリガすると、送信者は、オブジェクトのクロック(ColorクラスにあるSystem.Windows.Media.Animation名前空間)は、あなたが時計オブジェクトを介して、現在の時刻を取得することができます。図0と1の間の現在の進行状況の値を使用して、現在時刻TimeSpanオブジェクト表現を使用し、現在のスケジュールを取り出すことができます。

背景コード:

上記の例では、ストーリーボードCurrentTimeInvalidatedイベントとして追加され、その後(時刻を表示するための)ラベル制御インターフェースとプログレスバーを入れ制御(1の最大値の進捗状況を表示するため、最小値は0です)。

private void Storyboard_CurrentTimeInvalidated(object sender, EventArgs e)
{
    Clock storyboardClock = (Clock)sender;
    if (storyboardClock.CurrentProgress == null)
    {
        lblTime.Content = "";
        progressBar1.Value = 0;
    }
    else
    {
        lblTime.Content = storyboardClock.CurrentTime.ToString();
        progressBar1.Value = (double)storyboardClock.CurrentProgress;
    }
}

ここに画像を挿入説明
13、アニメーションイージング。
リニアアニメーションの欠点の1つは、機械的、一般的には、人々が不自然に感じさせます。アニメーションがより自然な動きになって改善し、作成するための秘訣は、変化の速度を変更することです。代わりに、固定レートでアニメーションのプロパティを変更するの作成、いくつかの方法でなり、より自然な動きを実現する最も簡単な方法は、予め設定されたイージング関数(れるeasingFunction)を使用することで、アニメーションの加速又は減速に応じて設計することの。EasyingFunctionプロパティは、単一のイージング関数オブジェクトは、同じアニメーションの異なるイージング関数の組み合わせにすることはできません受け入れることができます。

コードXAML

<Window.Resources>
    <Style TargetType="Button">
        <Style.Triggers>
            <EventTrigger RoutedEvent="Click">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetProperty="Width">
                            <DoubleAnimation To="300" Duration="0:0:5">
                                <!--使用缓动函数-->
                                <DoubleAnimation.EasingFunction>
                                    <!--设置缓动模式和振荡次数-->
                                    <ElasticEase EasingMode="EaseOut" Oscillations="5"></ElasticEase>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>   
<Grid>
     <Button Width="150" Height="50" Content="缓动动画" FontSize="20"></Button>
</Grid>

ここに画像を挿入説明
14、機能クラスを緩和。
異なるイージングクラスの分析を続ける前に、アプリケーションのタイミングを緩和する機能は非常に重要であることを理解。すべての緩和EasingFunctionBaseクラスから継承する機能のクラスと継承EasingModeプロパティ、EasingMode三つの値、すなわちあります:EasyIn(アニメーションで緩和効果を適用し始めた)、(効果を緩和アニメーションアプリケーションの終了時に)EasyOutとEasyInOutは、 (アニメーションを容易にアプリケーションの開始時と終了時)。イージング関数を適用すると、アニメーションの継続時間を変更しません。
ここに画像を挿入説明
15、カスタムイージング関数。
カスタム一般的な機能を容易に作成するには、次の手順が必要です。

A)、新しいカテゴリは、からEasingFunctionBaseクラスの継承をしましょう。

B)、EaseInCore()メソッドとCreateInstanceCore()メソッドを書き換えます。

c)は、依存関係プロパティを定義しました。

D)、参照によって。

背景コード(カスタムクラス):

public class RandomJitterEase : EasingFunctionBase
{
    //声明一个Random类,用于声明随机数。
    Random rand = new Random();
    /// <summary>
    /// 重写EaseCore方法。 
    /// </summary>
    /// <param name="normalizedTime"></param>
    /// <returns></returns>
    protected override double EaseInCore(double normalizedTime)
    {
        //几乎所有逻辑代码都在EaseInCore方法中运行。该方法接受一个规范化的时间值,本质上是表示动画进度从
        //0到1之间的值,当动画开始时,规范化的时间值是0,它从该点开始增加,直到在动画结束点达到1.
        //在动画运行期间,每次更新动画的值时,WPF都会调用EaseInCore方法,确切的调用频率取决于动画的帧率。
        if (normalizedTime == 1)
        {
            return 1;
        }
        else
        {
            return Math.Abs(normalizedTime - (double)rand.Next(0, 10) / (2010 - Jitter));
        }
    }

    protected override System.Windows.Freezable CreateInstanceCore()
    {
        return new RandomJitterEase();
    }

    //定义一个依赖属性。
    public static readonly DependencyProperty JitterProperty;

    //在静态方法中注册依赖属性。
    static RandomJitterEase()
    {
        JitterProperty = DependencyProperty.Register("Jitter", typeof(int), typeof(RandomJitterEase), new UIPropertyMetadata(1000), new ValidateValueCallback(ValidateJitter));
    }

    public int Jitter
    {
        get { return (int)GetValue(JitterProperty); }
        set { SetValue(JitterProperty, value); }
    }

    //此方法用于判断值。
    private static bool ValidateJitter(object value)
    {
        int jitterValue = (int)value;
        if (jitterValue <= 2000 && jitterValue >= 0)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

コードXAML:

<Window x:Class="自定义缓动函数.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:自定义缓动函数"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.Triggers>
        <!--事件触发器,窗体加载的Loaded事件。-->
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="480" Duration="0:0:5"></DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="480" Duration="0:0:5">
                            <DoubleAnimation.EasingFunction>
                                <!--调用自定义缓动函数类-->
                                <local:RandomJitterEase EasingMode="EaseIn" Jitter="1500"></local:RandomJitterEase>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>        
        
    <Canvas ClipToBounds="True">
        <Ellipse Name="ellipse1" Width="25" Height="25" Fill="Red"></Ellipse>
        <Ellipse Margin="0,70,0,0" Name="ellipse2" Width="25" Height="25" Fill="Green"></Ellipse>
    </Canvas>    
</Window>

ここに画像を挿入説明
16、WPFアニメーション性能およびフレームレート。
一般的に、ユーザ・インタフェース・アプリケーションのアニメーションは、単に作成し、アニメーションやオブジェクトの物語の正しいバージョンを設定します。しかし、他の場合、特に複数の同時アニメーション、により必要とされる性能を心配することがあります。最初から最後までスムーズな滑らかなアニメーションを確実にするために、60フレーム/秒でアニメーションを維持するWPF試みます。フレームレートを下げ、ジッタ現象が発生します。高いフレームレート、CPUの高い占有。TimeLine.DesiredFrameRateプロパティによって調整します。

コードXAML:

<Window x:Class="动画性能之帧率.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:动画性能之帧率"
        Title="MainWindow" Height="500" Width="525">    
    <Window.Triggers>
        <!--定义一个事件触发器,通过SourceName属性关联button-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_start">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <!--通过Timeline.DesiredFrameRate属性设置帧速率-->
                    <Storyboard Storyboard.TargetName="ellipse" Timeline.DesiredFrameRate="{Binding ElementName=txtBox1, Path=Text}">
                        <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="0"  To="300" Duration="0:0:10"></DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="250" Duration="0:0:10"></DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>    
    
    <Grid ShowGridLines="False">
        <Grid.RowDefinitions>
            <RowDefinition Height="5*"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>            
        </Grid.RowDefinitions>
        
        <Grid.ColumnDefinitions >
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>  
        
        <Canvas ClipToBounds="True" Grid.Row="0" Grid.ColumnSpan="2" Height="320" Background="Beige">
            <Ellipse Name="ellipse" Fill="Red" Width="10" Height="10"></Ellipse>
        </Canvas>
        
        <Label Grid.Row="1" Content="帧速率:" FontSize="20" HorizontalAlignment="Right" VerticalAlignment="Center"></Label>
        <TextBox Name="txtBox1" Text="1" Width="60" Height="30" FontSize="20" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBox>
        <Button  Name="btn_start" Grid.Row="2" Grid.ColumnSpan="2" Width="200" Height="60" Content="点击动画" FontSize="20"></Button>
    </Grid>
</Window>

ここに画像を挿入説明

:より転載https://www.cnblogs.com/xiezunxu/articles/8965848.html:

リリース元の4件の記事 ウォンの賞賛1 ビュー1333

おすすめ

転載: blog.csdn.net/obf2018/article/details/88944120