DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> XAML 實例演示之八 –動畫:緩慢旋轉的按鈕
XAML 實例演示之八 –動畫:緩慢旋轉的按鈕
編輯:XML詳解     

在WPF中實現動畫,對象必須滿足三個條件:

  1. 必須有一個依賴屬性(Dependency Property)。

  2. 必須繼承DependencyObject對象,並實現了IAnimatable接口。常用的控件Button,Panel和Shape都繼承DependencyObject,並實現了IAnimatable接口,因此這不是一個問題。

  3. 必須有一個兼容的動畫類型變量。

  實現動畫的第一步是選擇一個屬性來動畫。在范例中,我們通過改變Button的角度來實現動畫。Angel屬性值是Double類型,因此我們使用DoubleAnimation創建從開始值到終點值的漸變。同時,還需要指定Duration屬性值,也就是從開始到結束所持續的時間。Duration值越大,動畫就會越慢。

  第二步是創建Storyboard,在Storyboard中放置DoubleAnimation元素。DoubleAnimation通過Storyboard.TargetName屬性指定在哪裡應用動畫,也就是指定動畫的對象。本范例指定Button按鈕應用動畫。

    <BeginStoryboard>
     <Storyboard>
      <DoubleAnimation
      Storyboard.TargetName="AnimatedRotateTransform"
      Storyboard.TargetProperty="Angle"
      To="360" Duration="0:0:5" FillBehavior="Stop" />
     </Storyboard>
    </BeginStoryboard>

  最後一步是關聯Storyboard和Trigger,也就是指定啟動動畫的事件。

<EventTrigger RoutedEvent="Button.Click">

  完整的范例代碼如下:

<Page XMLns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
XMLns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title=" Welcome to EntLib.com | Graphics: Animated Rotation"
Background="White" Margin="50">
<StackPanel>
  <Button Content="Slow Spinning Button" Width="200" RenderTransformOrigin="0.5,0.5">
   <Button.RenderTransform>
    <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
   </Button.RenderTransform>
   <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
    <BeginStoryboard>
     <Storyboard>
      <DoubleAnimation
      Storyboard.TargetName="AnimatedRotateTransform"
      Storyboard.TargetProperty="Angle"
      To="360" Duration="0:0:5" FillBehavior="Stop" />
     </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
   </Button.Triggers>
  </Button>
</StackPanel>
</Page>

  演示效果如下:

  XAML 實例演示之八 –動畫:緩慢旋轉的按鈕

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved