代码
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Net;
5 using System.Windows;
6 using System.Windows.Controls;
7 using System.Windows.Documents;
8 using System.Windows.Input;
9 using System.Windows.Media;
10 using System.Windows.Media.Animation;
11 using System.Windows.Shapes;
12
13 namespace StoryboardDemo
14 {
15 public partial class MainPage : UserControl
16 {
17 public MainPage()
18 {
19 InitializeComponent();
20 sb1.Begin();
21 }
22 }
23 }
24
以Button为例，可视状态：
|
VisualState 名称 |
VisualStateGroup 名称 |
说明 |
|---|---|---|
|
Normal |
CommonStates |
默认状态。 |
|
MouseOver |
CommonStates |
鼠标指针悬停在控件上。 |
|
Pressed |
CommonStates |
控件已按下。 |
|
Disabled |
CommonStates |
控件被禁用。 |
|
Focused |
FocusStates |
控件具有焦点。 |
|
Unfocused |
FocusStates |
控件不具有焦点。 |
参考：http://msdn.microsoft.com/zh-cn/library/cc278069(VS.95).aspx
简单动画包含：
<DoubleAnimation From="0" To="1" Duration="0:0:5" AutoReverse="True" Storyboard.TargetName="rect1" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
ColorAnimation - 在两个 Color 值之间做线性内插动画处理
DoubleAnimation - 在两个 Double 值之间做线性内插动画处理
PointAnimation - 在两个 Point 值之间做线性内插动画处理
<Storyboard x:Name="storyboard">
<!--ColorAnimation - 在两个 Color 值之间做线性内插动画处理-->
<!--
Storyboard.TargetName - 要进行动画处理的对象的名称
Storyboard.TargetProperty - 要进行动画处理的对象的属性
BeginTime - 时间线在被触发 BeginTime 的时间后才能开始播放
TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]（可为正；可为负；可为空；默认值为 0）
From - 动画的起始值
To - 动画的结束值
By - 动画从起始值开始计算，所需变化的总量（To 优先于 By）
Duration - 时间线的持续时间
TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]
Automatic - 自动确定
Forever - 无限长
AutoReverse - 动画完成后是否要原路返回。默认值为 false
RepeatBehavior - 动画重复播放的时间、次数或类型
TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]
nx - 播放次数。1x, 2x, 3x
Forever - 永久播放
SpeedRatio - 时间线的速率的倍数。默认值 1
FillBehavior - 动画结束后的行为 [System.Windows.Media.Animation.FillBehavior枚举]
FillBehavior.HoldEnd - 动画结束后，保留动画属性的结束值。默认值
FillBehavior.Stop - 动画结束后，恢复动画属性为其初始值
-->
<ColorAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
BeginTime="00:00:0"
From="Red"
To="Yellow"
Duration="Automatic"
AutoReverse="True"
RepeatBehavior="3x">
</ColorAnimation>
</Storyboard>
示例代码：
代码
1 <UserControl x:Class="StoryboardDemo.MainPage"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 mc:Ignorable="d"
7 d:DesignHeight="300" d:DesignWidth="400">
8
9 <Grid x:Name="LayoutRoot" Background="White">
10 <StackPanel >
11 <StackPanel.Resources>
12 <Storyboard x:Name="sb1">
13 <DoubleAnimation From="0" To="1" Duration="0:0:5" AutoReverse="True" Storyboard.TargetName="rect1" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
14 <ColorAnimation From="Red" To="Blue" Duration="0:0:5" Storyboard.TargetName="rect1" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"></ColorAnimation>
15 <PointAnimation From="0,0" To="100,100" Duration="0:0:5" Storyboard.TargetName="elli" Storyboard.TargetProperty="Center"></PointAnimation>
16 </Storyboard>
17 <Style TargetType="Button">
18 <Setter Property="Template">
19 <Setter.Value>
20 <ControlTemplate>
21 <Grid>
22 <VisualStateManager.VisualStateGroups>
23 <VisualStateGroup x:Name="CommonStates">
24 <VisualState x:Name="MouseOver">
25 <!--鼠标放上时的样式-->
26 <Storyboard BeginTime="0:0:0">
27 <ColorAnimation From="Red" To="Yellow" Duration="0:0:1.0010000" Storyboard.TargetName="abc" Storyboard.TargetProperty="(Border.Stroke).(SolidColorBrush.Color)"></ColorAnimation>
28 <DoubleAnimation From="0" To="1" Duration="0:0:1" Storyboard.TargetName="linearGradientBrushTest" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
29 </Storyboard>
30 </VisualState>
31 <VisualState x:Name="Pressed">
32 <!--点击样式-->
33 <Storyboard BeginTime="0:0:0">
34 <DoubleAnimation From="1" To="0" Duration="0:0:1" Storyboard.TargetName="linearGradientBrushTest" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
35 </Storyboard>
36 </VisualState>
37 <VisualState x:Name="Normal">
38 <!--默认样式-->
39 </VisualState>
40 </VisualStateGroup>
41 <VisualStateGroup x:Name="FocusStates">
42 <VisualState x:Name="Focused"/>
43 <VisualState x:Name="Unfocused">
44 <Storyboard BeginTime="0:0:0">
45 <ColorAnimation From="Yellow" To="Red" Duration="0:0:1.0010000" Storyboard.TargetName="abc" Storyboard.TargetProperty="(Border.Stroke).(SolidColorBrush.Color)"></ColorAnimation>
46 <DoubleAnimation From="1" To="0" Duration="0:0:1" Storyboard.TargetName="linearGradientBrushTest" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
47 </Storyboard>
48
49 </VisualState>
50 </VisualStateGroup>
51 </VisualStateManager.VisualStateGroups>
52 <Rectangle x:Name="abc" RadiusX="15" RadiusY="15" Stroke="Red" StrokeThickness="1">
53 <Rectangle.Fill>
54 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0" x:Name="linearGradientBrushTest">
55 <GradientStop Color="#FFFDEEB4" Offset="0"/>
56 <GradientStop Color="#FFFDFCE8" Offset="1"/>
57 <GradientStop Color="#FFFDE38A" Offset="0.335"/>
58 </LinearGradientBrush>
59 </Rectangle.Fill>
60
61
62 </Rectangle><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
63
64 </Grid>
65 </ControlTemplate>
66
67 </Setter.Value>
68 </Setter>
69 </Style>
70 </StackPanel.Resources>
71 <Rectangle x:Name="rect1" Width="100" Height="100" Stroke="Red" StrokeThickness="1" Fill="Black">
72 <Rectangle.Clip>
73 <EllipseGeometry RadiusX="50" RadiusY="30" Center="50,50" x:Name="elli"></EllipseGeometry>
74 </Rectangle.Clip>
75 </Rectangle>
76 <Button Content="这是一个按钮哦" Width="200" Height="40"></Button>
77 <Button Content="按一下试试" Width="200" Height="40"></Button>
78 </StackPanel>
79
80 </Grid>
81 </UserControl>
82
浙公网安备 33010602011771号