silverlight,可视状态及简单动画
代码
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