最近开始接触到.NET3.5的东西，看了一些老外的文章，觉得不错的也顺手翻译了一下，希望对跟我一样刚刚接触.NET3.0/3.5的朋友有所帮助。水平有限，欢迎拍砖。
下面这篇是关于WPF的，想学Silverlight的朋友也不妨一看。已经是人家1年多以前的作品了，我们的技术还是比较滞后的。
原文地址：http://www.c-sharpcorner.com/UploadFile/mgold/XAMLAnimation04042007191109PM/XAMLAnimation.aspx
原作者：Mike Gold
<Windowx:Class="XAMLAnimation.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="XAML Animation - Spinning Stars"Height="300"Width="355">
<GridName="myGrid">
<CanvasMargin="15,18,18,26"MinHeight="50"MinWidth="50"Name="canvas1">
<!-- Draw a star shape -->
<Polygon
Name ="mypolygon1"
Stroke="Blue"
StrokeThickness="1.0"
Points="176.5,50 189.2,155.003 286.485,113.5 201.9,177 286.485,240.5
189.2,198.997 176.5,304 163.8,198.997 66.5148,240.5 151.1,177
66.5148,113.5 163.8,155.003">
<Polygon.Fill>
<SolidColorBrushColor="Blue" />
</Polygon.Fill>
</Polygon>
</Canvas>
</Grid>
</Window>
myPolygon1 = new Polygon();
myPolygon.Stroke = Brushes.Blue;
myPolygon.Fill = Brushes.Blue;
myPolygon.StrokeThickness = 1;
Point Point1 = new Point(176, 50);
Point Point2 = new Point(190,155);
Point Point3 = new Point(286,113);
...
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(Point1);
myPointCollection.Add(Point2);
myPointCollection.Add(Point3);
myPolygon.Points = myPointCollection;
myGrid.Children.Add(myPolygon1);
|
变换方式
|
XAML
|
XAML示例
|
|
旋转
|
RotateTransform
|
<RotateTransformx:Name="rotateIt"CenterX="176"CenterY="145" Angle="45" /> |
|
平移
|
TranslateTransform
|
<TranslateTransformx:Name="translateIt"X ="-50"Y="50" />
|
|
拉伸
|
SkewTransform
|
<SkewTransform CenterX="50" CenterY="50" AngleX="30" AngleY="0" /> |
|
缩放
|
ScaleTransform
|
<ScaleTransformx:Name ="scaleIt"ScaleX=".25"ScaleY=".25" />
|
<Polygon.RenderTransform>
<TransformGroup>
<RotateTransformx:Name="xformRotate"CenterX="176"CenterY="145" Angle="90" />
<TranslateTransformx:Name="xformTranslate"X ="-50"Y="-50" />
<ScaleTransformx:Name ="xformScale"ScaleX=".25"ScaleY=".25" />
</TransformGroup>
XAML使用了故事板（Stroyboard）的概念来提供一个框架，在这个框架中你可以使你的图形运动起来。故事板中的元素被称为运动对象。2D XAML中一共有4种类型的运动：DoubleAnimation, ColorAnimation, VectorAnimation和PointAnimation。基本上每种运动都会在指定的时间段内改变图形的一种属性。例如，DoubleAnimation可以在一段时间内改变一个Double类型的属性，而ColorAnimation将会在一段时间内改变Color属性。你只需要指定你要改变的属性、时间轴、改变区间以及运动类型！对于运动，你可以指定这个多边形对象中你想改变的那个变换（指TransformGroup中的变换），然后改变变换的相关属性，就可以在指定的时间轴内得到需要的运动效果。对于颜色变换，你可以指定你要改变的画刷（brush）。（注意，你需要确保你为图形中的XAML变换或画刷取了名字，这样你才能在Storyboard.TargetName中引用它）
|
XAML
|
描述
|
XAML 示例
|
|
DoubleAnimation
|
在指定时间内改变图形的一个Double属性
|
<DoubleAnimationStoryboard.TargetName="KennyRotateIt" |
|
DoubleAnimationUsingKeyFrames
|
允许你在一组时间间隔内改变一个Double属性。图形的运动会被解析成从一个位置到下一个位置的线性运动。例如，它会在开始的3秒内移动到第10个位置。在下2秒内移动到第100个位置，而在最终5秒内移动到第200个位置。
|
<DoubleAnimationUsingKeyFrames |
|
ColorAnimation
|
在一定时间内将图形的Color属性从一种颜色改变到一种新的颜色。
|
<ColorAnimationStoryboard.TargetName="mybrush"Storyboard.TargetProperty="Color"From="Red"To="Blue"Duration="0:0:7"
|
|
VectorAnimation
|
允许你在一定时间内改变图形的Vector属性。
|
|
|
VectorAnimationUsingKeyFrames
|
允许你在一组时间间隔内使用向量改变一个图形。
|
|
|
PointAnimation
|
允许你在一段时间内改变图形的一个点属性。例如图形的中心。
|
<PointAnimationStoryboard.TargetProperty="Center"Storyboard.TargetName="MyAnimatedEllipseGeometry"Duration="0:0:2"From="200,100"To="450,250"RepeatBehavior="Forever" />
|
<Polygon.Triggers>
<EventTriggerRoutedEvent="Polygon.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<!-- Translate from 1 to 750 pixels, repeated, back-and-forth -->
<DoubleAnimationStoryboard.TargetName="xformTranslate"
Storyboard.TargetProperty="X"
From="1"To="750"Duration="0:0:14"
AutoReverse ="True"RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Polygon.Triggers>
<Polygon.Triggers>
<EventTriggerRoutedEvent="Polygon.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<!-- RotateTransform angle from 0 to 360 in 1 second, repeated forever -->
<DoubleAnimationStoryboard.TargetName="xformRotate"
Storyboard.TargetProperty="Angle"
From="0"To="360"Duration="0:0:01"
RepeatBehavior="Forever" />
<DoubleAnimationStoryboard.TargetName="xformTranslate"
Storyboard.TargetProperty="X"
From="1"To="750"Duration="0:0:14"
AutoReverse ="True"RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Polygon.Triggers>
<Polygon.Fill>
<SolidColorBrushx:Name ="mybrush"Color="Red" />
</Polygon.Fill>
<Polygon.Triggers>
<EventTriggerRoutedEvent="Polygon.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<!-- Animate the color from red to blue, and from blue to red in 7 seconds -->
<ColorAnimationStoryboard.TargetName="mybrush"
Storyboard.TargetProperty="Color"
From="Red"To="Blue"Duration="0:0:7"
RepeatBehavior="Forever"AutoReverse="True"/>
<DoubleAnimationStoryboard.TargetName="xformRotate"
Storyboard.TargetProperty="Angle"
From="0"To="360"Duration="0:0:01"
RepeatBehavior="Forever" />
<DoubleAnimationStoryboard.TargetName="xformTranslate"
Storyboard.TargetProperty="X"
From="1"To="750"Duration="0:0:14"
AutoReverse ="True"RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Polygon.Triggers>
<ImageMargin="75,61,0,119"Name="image1"Source="Images/KENNY.bmp"HorizontalAlignment="Left"Width="72">
<Image.RenderTransform>
<TransformGroup>
<RotateTransformx:Name="KennyRotateIt" CenterX="50"CenterY="50"Angle="45" />
<ScaleTransformx:Name="KennyScaleIt"ScaleX=".75"ScaleY=".75" />
<TranslateTransform x:Name="KennyTranslateIt"X="0"Y="100" />
</TransformGroup>
</Image.RenderTransform>
<Image.Triggers>
<EventTriggerRoutedEvent="Image.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboardx:Name="myStoryBoard1"Completed="OnCompletedAnimation">
<DoubleAnimationStoryboard.TargetName="KennyRotateIt"
Storyboard.TargetProperty="Angle"
From="0"To="360"Duration="0:0:01"
RepeatBehavior="Forever" />
<!-- Jolt Kenny across the screen at different time frames -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="KennyTranslateIt"
Storyboard.TargetProperty="X"
Duration="0:0:10"AutoReverse="True"RepeatBehavior="Forever">
<!-- These KeyTime properties are specified as TimeSpan values
which are in the form of "hours:minutes:seconds". -->
<LinearDoubleKeyFrameValue="10"KeyTime="0:0:3" />
<LinearDoubleKeyFrameValue="100"KeyTime="0:0:5" />
<LinearDoubleKeyFrameValue="200"KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Image.Triggers>