19,472
社区成员




<!-- 这是From/To/By动画例子 -->
<Rectangle Name="fromToAnimatedRectangle"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="Black">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Demonstrates the From and To properties used together.
Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="fromToAnimatedRectangle"
Storyboard.TargetProperty="Width"
From="50" To="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
<!-- 这是关键帧动画例子 -->
<Border Background="#99FFFFFF" BorderThickness="28"
Margin="0,60,0,20" Padding="20" >
<Border.BorderBrush>
<SolidColorBrush x:Name="MyAnimatedBrush" Color="Green" />
</Border.BorderBrush>
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate from green to red using a linear key frame, from red to
yellow using a discrete key frame, and from yellow back to green with
a spline key frame. This animation repeats forever. -->
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="Color"
Storyboard.TargetName="MyAnimatedBrush"
Duration="0:0:6" FillBehavior="HoldEnd" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames.KeyFrames>
<!-- Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
a smooth, linear animation between values. -->
<LinearColorKeyFrame Value="Red" KeyTime="0:0:2" />
<!-- In the next half second, go to yellow. DiscreteColorKeyFrame creates a
sudden jump between values. -->
<DiscreteColorKeyFrame Value="Yellow" KeyTime="0:0:2.5" />
<!-- 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.-->
<SplineColorKeyFrame Value="Green" KeyTime="0:0:4.5" KeySpline="0.6,0.0 0.9,0.00" />
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<TextBlock>
This example shows how to use the ColorAnimationUsingKeyFrames to create
an animation on the BorderBrush property of a Border.
</TextBlock>
</Border>
<!-- From/To/By 动画XML描述例子 -->
<StoryBoard>
<FrameSet TargetType="Int" Target="myimg" TargetAttribute="left" Reverse="true" Repeat="forever"
From="0" To="125" Duration="0:0:5" />
<FrameSet TargetType="Int" Target="myimg" TargetAttribute="top" Reverse="true" Repeat="forever"
From="20" To="120" Duration="0:0:8.2" />
</StoryBoard>
<!-- 关键帧动画XML描述例子 -->
<StoryBoard>
<KeyFrameSet TargetType="Int" Target="myimg2" TargetAttribute="left" Reverse="true" Repeat="forever">
<KeyFrame KeyTime="0" KeyValue="120" />
<KeyFrame KeyTime="2" KeyValue="160" />
<KeyFrame KeyTime="0:3" KeyValue="210" />
<KeyFrame KeyTime="0:0:5.0" KeyValue="250" />
</KeyFrameSet>
<KeyFrameSet TargetType="Int" Target="myimg2" TargetAttribute="top" Reverse="true" Repeat="forever">
<KeyFrame KeyTime="0" KeyValue="120" />
<KeyFrame KeyTime="3" KeyValue="170" />
<KeyFrame KeyTime="10.0" KeyValue="200" />
<KeyFrame KeyTime="0:0:13" KeyValue="250" />
</KeyFrameSet>
</StoryBoard>
var frameset = new FrameSet
{
TargetType = "float",
Target = "myimg",
TargetAttribute = "left",
Reverse = true,
Repeat = 3,
From = 20.0f,
To = 58.6f
};
// 普通的JS赋值代码
var frameset = new FrameSet();
frameset.targetType = "float";
frameset.target = "myimg"; // 或者 直接用 = myimg
frameset.targetAttribute = "left";
frameset.reverse = true;
frameset.repeat = 3;
frameset.from = 20.0f;
frameset.to = 58.6f;
// 合并的JS赋值代码,一个语句完成所有赋值,跟上面的代码完全等效
var frameset = new FrameSet().targetType("float").target("myimg").targetAttribute("left")
.reverse(true).repeat(3).from(20.0f).to(58.6f);
with (obj) {
abc = def; // 等效于 var abc = obj.def;
}
// 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);
};
// 演示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(); // 启动演示板动画
}