WPF中的動畫 (4)

2021-09-08 21:06:37 字數 2067 閱讀 3354

學習wpf

的動畫,非常值得一提的是關鍵幀動畫。普通的動畫實現的是從乙個值到另乙個值的線性內插(或者有限形式的非線性內插,歸功於

accelerationratio

和decelerationratio

)。而關鍵幀動畫,指定了在指定的時間達到指定的值(由

***keyframe

的keytime

、value

決定),因此,可以實現更加複雜的動畫。

除了from、to

和by屬性外,關鍵幀動畫類與它們對應的普通動畫類擁有相同的屬性和事件。但是,它們還有乙個

keyframe

集合來放置一些特定型別動畫的關鍵幀例項。

wpf中,關鍵幀型別有

3種,它們是線性關鍵幀(

linear***keyframe

)、樣條關鍵幀(

spline***keyframe

)和離散關鍵幀(

discrete***keyframe)。

1、線性關鍵幀(

linear***keyframe)

線性關鍵幀動畫例如:

每個lineardoublekeyframe

都有乙個特定的值,以及應用該值所對應的時間。

keytime

的設定不是必須的,如果忽略了某乙個

keytime

,則wpf

會假設該關鍵幀發生在前後兩個關鍵幀中間。如果忽略了所有的

keytime

,它們幾個就會平均的瓜分動畫的時間,當然,你也可以通過「

keytime="uniform"

」來顯示設定。另外,

keytime

可以是乙個百分比——「

keytime="33.3%"

」,它表示時間點為總時間的

1/3。

keytime

可以是「

keytime="paced"

」,表示整個動畫值的改變速率是個常數,依據各自的改變量設定相應的

keytime。

lineardoublekeyframe

表示它在

keytime

時刻,值達到

value

指定的值。而值的變化是從前乙個狀態的值以線性內插的方式到達現在狀態的值。

doubleanimationusingkeyframes

中不光可以容納線性關鍵幀,還可以容納同型別的樣條關鍵幀和離散關鍵幀,因為

keyframes

屬性乙個

***keyframe

(抽象)物件的集合。

2、樣條關鍵幀(

spline***keyframe)

如果把上面**中的

lineardoublekeyframe

替換成splinedoublekeyframe

,產生的效果是一樣一樣的。

樣條關鍵幀與線性關鍵幀的區別在於它有乙個

keyspline

屬性,可以設定成乙個

keyspline

物件的例項,該例項將想要的動作描述為乙個三次貝賽爾曲線。在

xaml

中,keyspline

屬性需要設定兩個控制點(起點預設為

0,結束點預設為

1),由這四個點可以產生貝賽爾曲線。而樣條關鍵幀中值的變化快慢將由產生的貝賽爾曲線決定。因此,在相同的時間內,依據不同的貝賽爾曲線,可以產生快慢、慢快、快慢快、慢快慢等一系列複雜的值的變化組合。由於是三次方曲線,因此,值的變化相對而言,能以一種優美的姿態變化。

3、離散關鍵幀(

discrete***keyframe)

離散關鍵幀只是表示在它與前乙個關鍵幀之間不需要插值,值的變化是跳躍的。

17個型別都有相應的線性、樣條和離散關鍵幀,但

wpf還有

5個額外的離散關鍵幀,它們沒有對應的線性和樣條關鍵幀:

boolean

、char

、matrix

、object

和string

。之所以只支援這些資料型別的離散關鍵幀動畫,是因為對這些型別來說,實現內插沒有意義且不太可能。

wpf 動畫 WPF中監視動畫進度

前台xaml 1.新增乙個progressbar監視進度,注意這裡最大值設定為1,因為動畫始終clock的currentprocess屬性最大值是1。2.響應故事板的currenttimeinvalidated事件 後台 該事件在動畫前進乙個步長時發生 private void storyboard...

WPF中的動畫 (二)From To By 動畫

我們所實現的的動畫中,很大一部分是讓乙個屬性在起始值和結束值之間變化,例如,我在前文中實現的改變寬度的動畫 varwidthanimation newdoubleanimation button.beginanimation widthproperty,widthanimation 這個動畫實現了寬...

WPF中基於路徑的動畫

wpf中有三種動畫型別 線性插值 關鍵幀和路徑動畫。這三種動畫都是在system.windows.media.animation命名空間中,其中路徑動畫有三種 matrixanimationusingpath pointanimationusingpath doubleanimationusingp...