[Windows Phone] 按鈕旋轉動畫（RotateTransform）

2013-11-24

1892
0
Windows Phone
2014-01-20

使用旋轉動畫（RotateTransform）讓按鈕可以動起來。

[前言]

使用旋轉動畫（RotateTransform）讓按鈕可以動起來。

[成品]

[範例]

Step1. 新增 Windows Phone 應用程式專案。

Step2. 新增一個按鈕（Button）並設置以下屬性

Button 屬性

Name="onbtn"
Content="會旋轉的按鈕"
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5"
Background="Blue"

XAML 程式碼：


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button x:Name="onbtn" Content="會旋轉的按鈕" Grid.Row="1" HorizontalAlignment="Center" 
                    VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Background="Blue" >
                <Button.RenderTransform>
                    <RotateTransform/>
                </Button.RenderTransform>
            </Button>

Step3. 產生 onbtn 按鈕 Click 事件：


// 建構函式
        public MainPage()
        {
            InitializeComponent();
            //產生 onbtn 的 click 事件，在 += 後按 Tab 2 次
            onbtn.Click += onbtn_Click;
            
        }

Step4. onbtn 按鈕 Click 事件中內容：


void onbtn_Click(object sender, RoutedEventArgs e)
        {
            //取得按一下的按鈕
            Button btn = sender as Button;

            //取得按鈕Button的RenderTransform屬性
            RotateTransform rotateTransform = btn.RenderTransform as RotateTransform;

            //建立DoubleAnimation動畫
            DoubleAnimation anima = new DoubleAnimation();

            //開始
            anima.From = 0;

            //結束
            anima.To = 360;

            //動畫撥放的時間
            anima.Duration = new Duration(TimeSpan.FromSeconds(0.5));

            //設定動畫Target及TargetProperty的屬性
            Storyboard.SetTarget(anima, rotateTransform);
            Storyboard.SetTargetProperty(anima, new PropertyPath(RotateTransform.AngleProperty));

            //建立一個Storyboard,並增加animation然後開始動畫
            Storyboard storyboard = new Storyboard();
            storyboard.Children.Add(anima);
            storyboard.Begin();
        }

[相關參考與引用]

RotateTransform 類別

[範例下載]

按鈕旋轉動畫.rar

回首頁