用开发语言创建动画的例子：
C#创建动画的例子：
// C# 创建From/To/By 动画的例子
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"fromToAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Black;
// Demonstrates the From and To properties used together.
// Animates the rectangle's Width property from 50 to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
// C# 创建关键帧动画的例子
Background = Brushes.White;
Margin = new Thickness(20);
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
StackPanel myStackPanel = new StackPanel();
myStackPanel.Orientation = Orientation.Vertical;
myStackPanel.HorizontalAlignment = HorizontalAlignment.Center;
// Create the Border that is the target of the animation.
SolidColorBrush animatedBrush = new SolidColorBrush();
animatedBrush.Color = Color.FromArgb(255, 0, 255, 0);
Border myBorder = new Border();
// Set the initial color of the border to green.
myBorder.BorderBrush = animatedBrush;
myBorder.BorderThickness = new Thickness(28);
myBorder.Padding = new Thickness(20);
myStackPanel.Children.Add(myBorder);
// Create a TextBlock to host inside the Border.
TextBlock myTextBlock = new TextBlock();
myTextBlock.Text = "This example shows how to use the ColorAnimationUsingKeyFrames"
+ " to create an animation on the BorderBrush property of a Border.";
myBorder.Child = myTextBlock;
// Assign the Brush a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"AnimatedBrush", animatedBrush);
// Create a ColorAnimationUsingKeyFrames to
// animate the BorderBrush property of the Button.
ColorAnimationUsingKeyFrames colorAnimation
= new ColorAnimationUsingKeyFrames();
colorAnimation.Duration = TimeSpan.FromSeconds(6);
// Create brushes to use as animation values.
Color redColor = new Color();
redColor = Color.FromArgb(255, 255, 0, 0);
Color yellowColor = new Color();
yellowColor = Color.FromArgb(255, 255, 255, 0);
Color greenColor = new Color();
greenColor = Color.FromArgb(255, 0, 255, 0);
// Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
// a smooth, linear animation between values.
colorAnimation.KeyFrames.Add(
new LinearColorKeyFrame(
redColor, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0))) // KeyTime
);
// In the next half second, go to yellow. DiscreteColorKeyFrame creates a
// sudden jump between values.
colorAnimation.KeyFrames.Add(
new DiscreteColorKeyFrame(
yellowColor, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))) // KeyTime
);
// In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame
// creates a variable transition between values depending on the KeySpline property. In this example,
// the animation starts off slow but toward the end of the time segment, it speeds up exponentially.
colorAnimation.KeyFrames.Add(
new SplineColorKeyFrame(
greenColor, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)), // KeyTime
new KeySpline(0.6, 0.0, 0.9, 0.0) // KeySpline
)
);
// Set the animation to repeat forever.
colorAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the animation to target the Color property
// of the object named "AnimatedBrush".
Storyboard.SetTargetName(colorAnimation, "AnimatedBrush");
Storyboard.SetTargetProperty(
colorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
// Create a storyboard to apply the animation.
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(colorAnimation);
// Start the storyboard when the Border loads.
myBorder.Loaded += delegate(object sender, RoutedEventArgs e)
{
myStoryboard.Begin(this);
};
我用JS创建动画的例子：
// 演示From/To/By动画的函数
function doframe() {
return StoryBoard() // 创建演示板
.addTo(window) // 添加演示板至窗口
// 在演示板中添加两个FROM/TO/BY动画帧
.newFrameSet(
// 此动画帧控制 myimg 控件的 left 属性，类型为整数，在5秒内使其值从0变成120，自动回转，动画不停止
FrameSet.TargetType('int').Target(myimg).TargetAttribute('left').Reverse(true).Repeat('forever').From(0).To(120).Duration(5)
)
.newFrameSet(
// 此动画帧控制 myimg 控件的 top 属性，类型为整数，在8.2秒内使其值从20变成120，自动回转，动画不停止
FrameSet.TargetType('int').Target(myimg).TargetAttribute('top').Reverse(true).Repeat('forever').From(20).To(120).Duration(8.2)
)
.start(); // 启动演示板动画
}
// 演示关键帧动画的函数
function dokeyframe() {
return StoryBoard() // 创建演示板
.addTo(window) // 添加演示板至窗口
// 创建两个关键帧集，分别控制 myimg2 控件的left和top属性
.newFrameSet(
// 此关键帧集控制 myimg2 控件的 left 属性，类型为整数，自动回转，动画不停止
KeyFrameSet.TargetType('int').Target(myimg2).TargetAttribute('left').Reverse(true).Repeat('forever')
// 关键帧集添加 4 个关键帧，时间从 0 到 5 秒，关键帧的值从 120 到 250
.newKeyFrame(KeyFrame.KeyTime(0).KeyValue(120))
.newKeyFrame(KeyFrame.KeyTime(2).KeyValue(160))
.newKeyFrame(KeyFrame.KeyTime(3).KeyValue(210))
.newKeyFrame(KeyFrame.KeyTime(5).KeyValue(250))
)
.newFrameSet(
// 此关键帧集控制 myimg2 控件的 top 属性，类型为整数，自动回转，动画不停止
KeyFrameSet.TargetType('int').Target(myimg2).TargetAttribute('top').Reverse(true).Repeat('forever')
// 关键帧集添加 4 个关键帧，时间从 0 到 13 秒，关键帧的值从 120 到 250
.newKeyFrame(KeyFrame.KeyTime(0).KeyValue(120))
.newKeyFrame(KeyFrame.KeyTime(3).KeyValue(170))
.newKeyFrame(KeyFrame.KeyTime(10).KeyValue(200))
.newKeyFrame(KeyFrame.KeyTime(13).KeyValue(250))
)
.start(); // 启动演示板动画
}
