C#
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media.Animation; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace AnimationTest { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); DoubleAnimation a = new DoubleAnimation();//定义 a.RepeatBehavior = new RepeatBehavior(2);//重复次数,延迟不重复 //a.RepeatBehavior = new RepeatBehavior(TimeSpan.Parse("0:0:15"));//整个动画持续时间,中途停止动画 //a.RepeatBehavior = RepeatBehavior.Forever;//无限重复 a.BeginTime=TimeSpan.Parse("0:0:1");//延迟开始时间 //a.SpeedRatio = 2;//动画速度快2倍,影响TimeSpan.Parse //a.AccelerationRatio = 0.33;//加速阶段从时间百分比0%到33% //a.DecelerationRatio = 0.33;//减速阶段从时间百分比100%-33%到100%; //a.IsCumulative = true;//仅与RepeatBehavior一起使用在a.By下50-150-50跳150-200-150 //a.IsAdditive = true;//获取属性默认值,从默认值开始动画 //a.FillBehavior = FillBehavior.Stop;//动画完之后恢复原始值 //a.From = 50;//起始,若默认值不是50则跳到50在进行动画 a.AutoReverse = true;//往返 //a.To = 100; a.By = 100;//等于a.To = 100 + a.Form; a.Duration = new Duration(TimeSpan.Parse("0:0:5"));//花费时间 b.BeginAnimation(Button.WidthProperty,a);//调用开始 } } }
XMAL
<Window x:Class="AnimationTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Style x:Key="bt1" TargetType="{x:Type Button}"> <Setter Property="Background" Value="Yellow"/> <Style.Triggers> <EventTrigger RoutedEvent="Button.Click"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard TargetProperty="Width"> <DoubleAnimation To="100" Duration="0:0:5" AutoReverse="True" IsAdditive="True"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <Canvas Margin="12,12,359,187"> <Button x:Name="b" Width="25"> CS </Button> <Button Canvas.Top="28" Width="50" Style="{StaticResource ResourceKey=bt1}"> XAML </Button> <Button Canvas.Top="55"> Color <Button.Background> <LinearGradientBrush> <GradientStop Color="Blue" Offset="0"/> <GradientStop Color="Black" Offset="0.5"/> <GradientStop Color="Blue" Offset="1"/> </LinearGradientBrush> </Button.Background> <Button.Triggers> <EventTrigger RoutedEvent="Button.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard > <ColorAnimation From="Black" To="White" Duration="0:0:2" AutoReverse="True" Storyboard.TargetProperty="Background.GradientStops[1].Color" RepeatBehavior="Forever"/> <DoubleAnimation From="0" To="1" Duration="0:0:2" AutoReverse="True" Storyboard.TargetProperty="Background.GradientStops[1].Offset" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </Button> <Button Canvas.Top="84" Canvas.Left="0"> Color <Button.Background> <LinearGradientBrush> <GradientStop Color="Blue" Offset="0"/> <GradientStop Color="White" Offset="0.5"/> <GradientStop Color="Blue" Offset="1"/> </LinearGradientBrush> </Button.Background> <Button.Triggers> <EventTrigger RoutedEvent="Button.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation From="0" To="1" Duration="0:0:2" AutoReverse="True" Storyboard.TargetProperty="Background.GradientStops[1].Offset" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </Button> </Canvas> <Canvas Margin="161,12,114,174"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard TargetName="p2" TargetProperty="Opacity"> <DoubleAnimation From="1" To="0" AutoReverse="True" RepeatBehavior="Forever" Duration="0:0:5"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> <Image Name="p1" Source="/AnimationTest;component/Images/p1.bmp" /> <Image Name="p2" Source="/AnimationTest;component/Images/p2.bmp" /> </Canvas> <Canvas Margin="400,12,12,264" Background="Black" TextBlock.Foreground="White" TextBlock.FontSize="30"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard TargetProperty="Opacity" RepeatBehavior="Forever"> <DoubleAnimation Storyboard.TargetName="title1" BeginTime="0:0:2" From="0" To="1" Duration="0:0:2" AutoReverse="True"/> <DoubleAnimation Storyboard.TargetName="title2" BeginTime="0:0:6" From="0" To="1" Duration="0:0:2" AutoReverse="True"/> <DoubleAnimation Storyboard.TargetName="title3" BeginTime="0:0:10" From="0" To="1" Duration="0:0:2" AutoReverse="True"/> <DoubleAnimation Storyboard.TargetName="title4" BeginTime="0:0:14" From="0" To="1" Duration="0:0:2" AutoReverse="True"/> <DoubleAnimation Storyboard.TargetName="title5" BeginTime="0:0:18" From="0" To="1" Duration="0:0:2" AutoReverse="True"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0" Name="title1">title1</TextBlock> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0" Name="title2">title2</TextBlock> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0" Name="title3">title3</TextBlock> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0" Name="title4">title4</TextBlock> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0" Name="title5">title5</TextBlock> </Canvas> <Canvas Margin="0,144,12,89" Background="Black"> <Image Source="/AnimationTest;component/Images/1.bmp" Height="25" Width="25"> <Image.Triggers> <EventTrigger RoutedEvent="Image.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="400" Duration="0:0:9" RepeatBehavior="Forever" AutoReverse="True"/> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:9" RepeatBehavior="Forever" AutoReverse="True"> <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/> <LinearDoubleKeyFrame Value="30" KeyTime="0:0:1"/> <LinearDoubleKeyFrame Value="20" KeyTime="0:0:2"/> <LinearDoubleKeyFrame Value="50" KeyTime="0:0:3"/> <SplineDoubleKeyFrame Value="0" KeySpline="0,1 1,0" KeyTime="0:0:4"/> <SplineDoubleKeyFrame Value="50" KeySpline="0,1 1,0" KeyTime="0:0:5"/> <SplineDoubleKeyFrame Value="0" KeySpline="0,1 1,0" KeyTime="0:0:6"/> <DiscreteDoubleKeyFrame Value="50" KeyTime="0:0:7"/> <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:8"/> <DiscreteDoubleKeyFrame Value="50" KeyTime="0:0:9"/> <!--KeyTime省略则匀速动画,也可以用百分比设值、Paced速率--> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Image.Triggers> </Image> </Canvas> <Canvas Margin="400,67,66,223" Background="Black" TextBlock.Foreground="White"> <TextBlock Width="37" Height="21" Text="play"> <TextBlock.Triggers> <EventTrigger RoutedEvent="Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <StringAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Duration="0:0:5" RepeatBehavior="Forever" AutoReverse="True"> <DiscreteStringKeyFrame Value="play"/> <DiscreteStringKeyFrame Value="Play"/> <DiscreteStringKeyFrame Value="PLay"/> <DiscreteStringKeyFrame Value="PLAy"/> <DiscreteStringKeyFrame Value="PLAY"/> <DiscreteStringKeyFrame Value="PLAY"/> </StringAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </TextBlock.Triggers> </TextBlock> </Canvas> </Grid> </Window>
源自《WPF 揭秘》一书