Silverlightアニメーション学習ノート(3):緩動関数
12146 ワード
(一)定義:
緩動関数:カスタム算術式をアニメーションに適用できます.
(二)なぜ緩動関数を使うのか:
オブジェクトをリアルに跳ね返すか、スプリングのように動作させることができます.これらの効果をほぼシミュレートするには、キーフレームアニメーションやFrom/to/Byアニメーションを使用しますが、計算式を使用するよりもアニメーションの精度が低下する場合があります.
(三)実例説明:
記事:http://www.cnblogs.com/Joetao/articles/2054250.html
緩動関数:カスタム算術式をアニメーションに適用できます.
(二)なぜ緩動関数を使うのか:
オブジェクトをリアルに跳ね返すか、スプリングのように動作させることができます.これらの効果をほぼシミュレートするには、キーフレームアニメーションやFrom/to/Byアニメーションを使用しますが、計算式を使用するよりもアニメーションの精度が低下する場合があります.
(三)実例説明:
1 <UserControl x:Class="AnimationStudy.EasingFunctionAnimation"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 mc:Ignorable="d"
7 d:DesignHeight="300" d:DesignWidth="400">
8
9 <StackPanel x:Name="LayoutRoot" Background="White">
10 <StackPanel.Resources>
11 <!--
12 ：
13 (1)EasingFunction :
14 (2)EasingMode : ( :EaseIn、EaseOut、EaseInOut )
15 (3) EasingMode ：
16 EaseIn ： 。
17 EaseOut ： 100% 。
18 EaseInOut ： EaseIn ， EaseOut 。
19 (4) :
20 From/To/By
21
22 （5） ：
23 BackEase ： 。
24 BounceEase ： 。
25 CircleEase ： / 。
26 ElasticEase ： 。
27 SineEase ： / 。
28 ExponentialEase ： / 。
29 【 PowerEase 】 Power CubicEase、QuadraticEase、QuarticEase QuinticEase
30 PowerEase ： f(t) = tp（ ，p Power ） / 。
31 CubicEase ： f(t) = t3 / 。
32 QuadraticEase ： f(t) = t2 / 。
33 QuarticEase ： f(t) = t4 / 。
34 QuinticEase ： f(t) = t5 / 。
35 （6） EasingFunctionBase
36 EaseInCore ， ， ：
37 namespace CustomEasingFunction
38 {
39 public class CustomSeventhPowerEasingFunction : EasingFunctionBase
40 {
41 public CustomSeventhPowerEasingFunction() : base()
42 {
43 }
44 protected override double EaseInCore(double normalizedTime)
45 {
46 return Math.Pow(normalizedTime, 7);
47 }
48 }
49 }
50 -->
51 <Storyboard x:Name="myStoryboard">
52 <DoubleAnimationUsingKeyFrames
53 Storyboard.TargetProperty="Height"
54 Storyboard.TargetName="myRectangle">
55 <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
56 <EasingDoubleKeyFrame.EasingFunction>
57 <CubicEase EasingMode="EaseOut"/>
58 </EasingDoubleKeyFrame.EasingFunction>
59 </EasingDoubleKeyFrame>
60
61 <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
62 <EasingDoubleKeyFrame.EasingFunction>
63 <BounceEase Bounces="5" EasingMode="EaseOut"/>
64 </EasingDoubleKeyFrame.EasingFunction>
65 </EasingDoubleKeyFrame>
66 </DoubleAnimationUsingKeyFrames>
67 </Storyboard>
68 </StackPanel.Resources>
69 <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked"
70 Fill="Blue" Width="200" Height="200" />
71 </StackPanel>
72 </UserControl>記事:http://www.cnblogs.com/Joetao/articles/2054250.html