如何:建立 FrameworkElement 大小的動畫
若要以動畫顯示 的大小,您可以建立其 和 屬性的 FrameworkElement 動畫效果,或使用動畫 ScaleTransform 。 HeightWidth
在下列範例中,使用這兩種方法以動畫顯示兩個按鈕的大小。 一個按鈕會藉由建立屬性 Width 的動畫來調整大小,另一個按鈕則是透過 ScaleTransform 動畫方式調整套用至其 RenderTransform 屬性的大小。 每個按鈕都包含一些文字。 一開始,這兩個按鈕中的文字看起來都一樣,但隨著按鈕的大小調整,第二個按鈕中的文字會扭曲。
範例
<!-- AnimatingSizeExample.xaml
This example shows two ways of animating the size
of a framework element. -->
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.Animation.AnimatingSizeExample"
WindowTitle="Animating Size Example">
<Canvas Width="650" Height="400">
<Button Name="AnimatedWidthButton"
Canvas.Left="20" Canvas.Top="20"
Width="200" Height="150"
BorderBrush="Red" BorderThickness="5">
Click Me
<Button.Triggers>
<!-- Animate the button's Width property. -->
<EventTrigger RoutedEvent="Button.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="AnimatedWidthButton"
Storyboard.TargetProperty="(Button.Width)"
To="500" Duration="0:0:10" AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button
Canvas.Left="20" Canvas.Top="200"
Width="200" Height="150"
BorderBrush="Black" BorderThickness="3">
Click Me
<Button.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform"
ScaleX="1" ScaleY="1" />
</Button.RenderTransform>
<Button.Triggers>
<!-- Animate the ScaleX property of a ScaleTransform
applied to the button. -->
<EventTrigger RoutedEvent="Button.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedScaleTransform"
Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
To="3.0" Duration="0:0:10" AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>
</Page>
當您轉換專案時,會轉換整個元素及其內容。 當您直接改變元素的大小時,如同第一個按鈕的情況,除非元素的大小和位置取決於其父元素的大小,否則元素的內容不會調整大小。
藉由將動畫轉換套用至其 RenderTransform 屬性,以動畫顯示元素的大小,可提供比建立動畫 WidthHeight 效果更好的效能,因為 RenderTransform 屬性不會觸發版面配置傳遞。
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應