將腳本動畫套用至多個 XAML 物件

以下是如何避免必須建立多個腳本動畫,而是將同一個腳本套用至多個物件。

看看應用程式中的這個 XAML 頁面,它顯示鍵台影像的格線。使用者點選其中一個按鈕時,我們要讓它出現動畫效果,感覺像是在移動一樣。

包含多個按鈕的 XAML 檔案:您真的想要為每個動畫建立一個腳本動畫嗎?

如同我們在套用面板與製作按鈕的動畫效果主題中所看到的,有別於 iOS 中改變參數 (如動畫區塊中隨時間變化的不透明度),Windows 8 則是使用腳本物件。 如果您在螢幕上有數個類似的 XAML 物件 (例如,我們的按鈕格線),您可能想知道我們是否需要為每個按鈕建立個別的腳本。 好消息是不用個別建立:以下是如何將相同的動畫套用到多個物件的做法。

注意   還記得在 Windows 8 中,腳本是動畫,而不是如 Xcode 來配置應用程式的方式。

祕訣就是以程式設計來變更腳本的 TargetName 屬性,如下列範例所示。

定義腳本

首先是定義腳本動畫。您可以使用 Blend,或在 XAML 中以手動方式加以定義。如需使用 Blend 的範例,請參閱套用面板與製作按鈕的動畫效果。如果是使用 Blend,請移除任何 TargetName 屬性,否則動畫只會套用到該特定目標。這裡提供一個範例:


    <Page.Resources>
        <Storyboard x:Name="TapAnimation">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" >
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0.95"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" >
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0.95"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
    </Page.Resources>

務必在腳本要變更的任何 XAML 物件中新增一個 <RenderTransform> 標記,以及對產生動畫效果的特定轉換新增一個預留位置,否則應用程式會擲回例外狀況。以下是一個準備好套用腳本的 Image 物件的範例:


 <Image x:Name="myImage" Width="256" Height="160" RenderTransformOrigin= "0.5,0.5" >
                        <Image.RenderTransform>
                            <CompositeTransform/>
                        </Image.RenderTransform>
                    </Image>

注意  使用 RenderTransformOrigin= "0.5,0.5" 屬性可確保任何動畫都會被放在物件中間的中心位置。

套用腳本

接下來是將腳本與物件關聯,並依需要觸發。這有一個缺點 - 在動畫播放時不能變更 TargetName 屬性,否則應用程式會擲回例外狀況。為了避免這種情形,變更目標前要先呼叫 Stop()

秘訣  呼叫 GetCurrentState() 可偵測目前是否執行腳本。

以下是觸發特定 Image 物件的動畫的程式碼。例如,這個程式碼可以是回應使用者使用 PointerPressed 事件點選影像。使用 Click 事件就和將它套用到 Button 一樣簡單。


 // Add using Windows.UI.Xaml.Media.Animation;
            TapAnimation.Stop();
            TapAnimation.SetValue(Storyboard.TargetNameProperty,"myImage");
            TapAnimation.Begin();

當您從觸發事件的控制項自動產生新的目標名稱時,這個方法尤其更為有用,就像這樣:


  private void someImages_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            TapImage.Stop();
            TapImage.SetValue(Storyboard.TargetNameProperty, (sender as Image).Name);
            TapImage.Begin();
        }

以下是使用者點選的 Image 物件建立事件,我們要使用它的名稱做為目標。如果頁面上的所有影像在點選時產生相同的事件,它們就會使用相同的腳本來產生動畫。所以,在我們的鍵台範例中,每個按鍵都會產生動畫效果,而我們只需要建立一個腳本就可以了。

注意  您可能從來沒有看過 as 鍵盤:它會在傳送者上執行轉換,讓它成為一個 Image

多個按鈕,一個事件處理常式

對於包含多個類似按鈕的應用程式,使用一個主要事件處理常式而不是為每個按鈕個別使用事件處理常式是合理的做法。每個按鈕都可以使用相同的 Click 事件,但是我們需要一種方法可在程式碼中區別各個按鈕:這時就是使用 tags 的恰當時機。

在 iOS 中,每個控制項或物件都可以有一個標記:它是用來唯一識別控制項或物件的值。例如,在我們的鍵台範例中,我們可以在這個 XAML 中定義按鈕:請注意,按鈕幾乎相同但標記值不同。


	<Button Content="1" HorizontalAlignment="Left" Margin="446,78,0,0" VerticalAlignment="Top" Width="120" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="1">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>
        <Button Content="2" HorizontalAlignment="Left" Margin="446,543,0,0" VerticalAlignment="Top" Width="460" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="2">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>
        <Button Content="3" HorizontalAlignment="Left" Margin="446,393,0,0" VerticalAlignment="Top" Width="120" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="3">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>

所有的按鈕會指向同一個事件處理常式,也就是 Button_Click。以下是我們如何讀取標記值,並在處理常式內適當的回應:


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var tag = (sender as Button).Tag;

            int t = Convert.ToInt16(tag);

            switch (t)
            {
                case 0: break;
                case 1: break;
                case 2: break;
                default: break;
            }
        }

相關主題

以程式設計方式使用動畫
開始使用:動畫
使用方法:使用 XAML 和 Expression Blend 建立使用者介面
腳本動畫

 

 

顯示:
© 2015 Microsoft