silverlight
发布时间:2022-05-04 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
概述
[索引页] [源码下载] 稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画 作者: webabcd 介绍 Silverlight 2.0 动画: ColorAnimation - 在两个 Color 值之间做线性内插动画处理 DoubleAnimation - 在
[索引页]
[源码下载]
稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation,DoubleAnimation,PointAnimation,内插关键帧动画
作者:
@L_
403_2@
介绍
Silverlight 2.0 动画:
ColorAnimation - 在两个 Color 值之间做线性内插动画处理
DoubleAnimation - 在两个 Double 值之间做线性内插动画处理
PointAnimation - 在两个 Point 值之间做线性内插动画处理
内插关键帧动画 - 在 Color 或 Double 或 Point 动画中内插关键帧,以做线性, 离散,三次贝塞尔曲线的动画处理
动态改变动画 - 通过程序控制,动态地改变动画
在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html
示例
1、ColorAnimation.xaml
<
UserControl
x:Class
="Silverlight20.Animation.ColorAnimation"
xmlns
="http://scheR_485_11845@as.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://scheR_485_11845@as.microsoft.com/winfx/2006/xaml"
>
<
StackPanel
HorizontalAlignment
="Left"
>
<
Ellipse
x:Name
="ellipse"
Fill
="Red"
Width
="200"
Height
="100"
>
<
Ellipse.triggers
>
<!--
routedEvent - 所属对象的路由事件,仅有Loaded这个事件
-->
<
Eventtrigger
RoutedEvent
="Ellipse.Loaded"
>
<
BeginStoryboard
x:Name
="beginStoryboard"
>
<
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
>
</
BeginStoryboard
>
</
Eventtrigger
>
</
Ellipse.triggers
>
</
Ellipse
>
</
StackPanel
>
</
UserControl
>
2、DoubleAnimation.xaml
<
UserControl
x:Class
="Silverlight20.Animation.DoubleAnimation"
xmlns
="http://scheR_485_11845@as.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://scheR_485_11845@as.microsoft.com/winfx/2006/xaml"
>
<
StackPanel
HorizontalAlignment
="Left"
>
<
Rectangle
x:Name
="rectangle"
Width
="200"
Height
="100"
stroke
="Black"
strokeThickness
="6"
radiusX
="25"
radiusY
="25"
>
<
Rectangle.Fill
>
<
ImageBrush
Imagesource
="/Silverlight20;component/Images/logo.jpg"
Stretch
="Fill"
/>
</
Rectangle.Fill
>
</
Rectangle
>
<
StackPanel.resources
>
<
BeginStoryboard
x:Name
="beginStoryboard"
>
<
Storyboard
x:Name
="storyboard"
>
<!--
DoubleAnimation - 在两个 Double 值之间做线性内插动画处理
-->
<!--
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, 3x
Forever - 永久播放
SpeedRatio - 时间线的速率的倍数。默认值 1
FillBehavior - 动画结束后的行为 [System.Windows.Media.Animation.FillBehavior枚举]
FillBehavior.HoldEnd - 动画结束后,保留动画属性的结束值。默认值
FillBehavior.Stop - 动画结束后,恢复动画属性为其初始值
-->
<
DoubleAnimation
Storyboard.TargetName
="rectangle"
Storyboard.TargetProperty
="Width"
From
="100"
By
="100"
BeginTime
="0:0:3"
Duration
="00:00:03"
AutoReverse
="false"
repeatBehavior
="Forever"
>
</
DoubleAnimation
>
</
Storyboard
>
</
BeginStoryboard
>
</
StackPanel.resources
>
</
StackPanel
>
</
UserControl
>
3、PointAnimation.xaml
<
UserControl
x:Class
="Silverlight20.Animation.PointAnimation"
xmlns
="http://scheR_485_11845@as.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://scheR_485_11845@as.microsoft.com/winfx/2006/xaml"
>
<
StackPanel
HorizontalAlignment
="Left"
>
<
StackPanel
Orientation
="Horizontal"
>
<
Button
Click
="Animation_Begin"
Width
="65"
Height
="30"
Margin
="2"
Content
="Begin"
/>
<
Button
Click
="Animation_Pause"
Width
="65"
Height
="30"
Margin
="2"
Content
="Pause"
/>
<
Button
Click
="Animation_Resume"
Width
="65"
Height
="30"
Margin
="2"
Content
="Resume"
/>
<
Button
Click
="Animation_Stop"
Width
="65"
Height
="30"
Margin
="2"
Content
="Stop"
/>
</
StackPanel
>
<
Path
Fill
="Red"
>
<
Path.Data
>
<
EllipseGeometry
x:Name
="ellipseGeometry"
Center
="50,50"
radiusX
="15"
radiusY
="15"
/>
</
Path.Data
>
</
Path
>
<
StackPanel.resources
>
<
Storyboard
x:Name
="storyboard"
>
<!--
PointAnimation - 在两个 Point 值之间做线性内插动画处理
-->
<!--
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, 3x
Forever - 永久播放
SpeedRatio - 时间线的速率的倍数。默认值 1
FillBehavior - 动画结束后的行为 [System.Windows.Media.Animation.FillBehavior枚举]
FillBehavior.HoldEnd - 动画结束后,保留动画属性的结束值。默认值
FillBehavior.Stop - 动画结束后,恢复动画属性为其初始值
-->
<
PointAnimation
Storyboard.TargetName
="ellipseGeometry"
Storyboard.TargetProperty
="Center"
BeginTime
="00:00:00"
From
="50,50"
To
="300,500"
Duration
="0:0:3"
AutoReverse
="True"
repeatBehavior
="00:00:10"
>
</
PointAnimation
>
</
Storyboard
>
</
StackPanel.resources
>
</
StackPanel
>
</
UserControl
>
PointAnimation.xam
l.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
namespace
Silverlight20.Animation
{
public partial class PointAnimation : UserControl
{
public PointAnimation()
{
initializeComponent();
}
private void Animation_Begin(object sender, routedEventArgs E)
{
// 播放
storyboard.begin();
}
private void Animation_Pause(object sender, routedEventArgs E)
{
// 暂停
storyboard.Pause();
}
private void Animation_Resume(object sender, routedEventArgs E)
{
// 继续
storyboard.Resume();
}
private void Animation_Stop(object sender, routedEventArgs E)
{
// 停止
storyboard.Stop();
}
}
}
4、KeyFrame.xaml
<
UserControl
x:Class
="Silverlight20.Animation.KeyFrame"
xmlns
="http://scheR_485_11845@as.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://scheR_485_11845@as.microsoft.com/winfx/2006/xaml"
>
<
StackPanel
HorizontalAlignment
="Left"
>
<!--
ColorAnimationUsingKeyFrames - 在一组 KeyFrame 中所设置的多个 Color 值之间做动画处理
DoubleAnimationUsingKeyFrames - 在一组 KeyFrame 中所设置的多个 Double 值之间做动画处理
PointAnimationUsingKeyFrames - 在一组 KeyFrame 中所设置的多个 Point 值之间做动画处理
-->
<!--
LinearColorKeyFrame - 在前一个关键帧的 Color 值及其自己的 Value 之间进行线性内插动画处理
DiscreteColorKeyFrame - 在前一个关键帧的 Color 值及其自己的 Value 之间进行离散内插动画处理
SplineColorKeyFrame - 在前一个关键帧的 Color 值及其自己的 Value 之间按 三次贝塞尔曲线 进行内插动画处理
LinearDoubleKeyFrame - 在前一个关键帧的 Double 值及其自己的 Value 之间进行线性内插动画处理
DiscreteDoubleKeyFrame - 在前一个关键帧的 Double 值及其自己的 Value 之间进行离散内插动画处理
SplineDoubleKeyFrame - 在前一个关键帧的 Double 值及其自己的 Value 之间按 三次贝塞尔曲线 进行内插动画处理
LinearPointKeyFrame - 在前一个关键帧的 Point 值及其自己的 Value 之间进行线性内插动画处理
DiscretePointKeyFrame - 在前一个关键帧的 Point 值及其自己的 Value 之间进行离散内插动画处理
SplinePointKeyFrame - 在前一个关键帧的 Point 值及其自己的 Value 之间按 三次贝塞尔曲线 进行内插动画处理
-->
<!--
Value - 关键帧的目标值
KeyTime - 到达关键帧目标值的时间
KeySpline - 三次贝塞尔曲线的两个控制点:x1,y1 x2,y2(该三次贝塞尔曲线的起点为0,0,终点为1,1)
-->
<
Grid
@H_457_59
@margin
="5"
>
<
Grid.resources
>
<
Storyboard
x:Name
="caStoryboard"
>
<
ColorAnimationUsingKeyFrames
Storyboard.TargetName
="caBrush"
Storyboard.TargetProperty
="Color"
Duration
="0:0:10"
>
<
LinearColorKeyFrame
Value
="Green"
KeyTime
="0:0:3"
/>
<
DiscreteColorKeyFrame
Value
="Blue"
KeyTime
="0:0:4"
/>
<
SplineColorKeyFrame
Value
="Red"
KeySpline
="0.6,0.0 0.9,0.00"
KeyTime
="0:0:6"
/>
</
ColorAnimationUsingKeyFrames
>
</
Storyboard
>
</
Grid.resources
>
<
Rectangle
x:Name
="caRectangle"
MouSELEftButtonDown
="caRectangle_MouSELEftButtonDown"
Width
="100"
Height
="50"
>
<
Rectangle.Fill
>
<
SolidColorBrush
x:Name
="caBrush"
Color
="Red"
/>
</
Rectangle.Fill
>
</
Rectangle
>
</
Grid
>
<
Grid
@H_457_59
@margin
="5"
>
<
Grid.resources
>
<
Storyboard
x:Name
="daStoryboard"
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetName
="daTransform"
Storyboard.TargetProperty
="X"
Duration
="0:0:10"
>
<
LinearDoubleKeyFrame
Value
="500"
KeyTime
="0:0:3"
/>
<
DiscreteDoubleKeyFrame
Value
="400"
KeyTime
="0:0:4"
/>
<
SplineDoubleKeyFrame
Value
="0"
KeySpline
="0.6,0.00"
KeyTime
="0:0:6"
/>
</
DoubleAnimationUsingKeyFrames
>
</
Storyboard
>
</
Grid.resources
>
<
Rectangle
x:Name
="daRectangle"
MouSELEftButtonDown
="daRectangle_MouSELEftButtonDown"
Fill
="Red"
Width
="100"
Height
="50"
>
<
Rectangle.RenderTransform
>
<
TranslateTransform
x:Name
="daTransform"
X
="0"
Y
="0"
/>
</
Rectangle.RenderTransform
>
</
Rectangle
>
</
Grid
>
<
Grid
@H_457_59
@margin
="5"
>
<
Grid.resources
>
<
Storyboard
x:Name
="paStoryboard"
>
<
PointAnimationUsingKeyFrames
Storyboard.TargetName
="paGeometry"
Storyboard.TargetProperty
="Center"
Duration
="0:0:10"
>
<
LinearPointKeyFrame
Value
="100,100"
KeyTime
="0:0:3"
/>
<
DiscretePointKeyFrame
Value
="200,200"
KeyTime
="0:0:4"
/>
<
SplinePointKeyFrame
Value
="50,50"
KeySpline
="0.6,0.00"
KeyTime
="0:0:6"
/>
</
PointAnimationUsingKeyFrames
>
</
Storyboard
>
</
Grid.resources
>
<
Path
Fill
="Red"
MouSELEftButtonDown
="paPath_MouSELEftButtonDown"
>
<
Path.Data
>
<
EllipseGeometry
x:Name
="paGeometry"
Center
="50,50"
radiusX
="15"
radiusY
="15"
/>
</
Path.Data
>
</
Path
>
</
Grid
>
</
StackPanel
>
</
UserControl
>
KeyFrame.xam
l.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
namespace
Silverlight20.Animation
@H_560_
3270@
{
public partial class KeyFrame : UserControl
@H_736_3301@{
public KeyFrame()
{
initializeComponent();
}
private void caRectangle_MouSELEftButtonDown(object sender, MouseButtonEventArgs E)
{
caStoryboard.begin();
}
private void daRectangle_MouSELEftButtonDown(object sender, MouseButtonEventArgs E)
{
daStoryboard.begin();
}
private void paPath_MouSELEftButtonDown(object sender, MouseButtonEventArgs E)
@H_301_3456@
{
paStoryboard.begin();
}
}
}
5、Progr
AMMatically.xaml
<
UserControl
x:Class
="Silverlight20.Animation.ProgrAMMatically"
xmlns
="http://scheR_485_11845@as.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://scheR_485_11845@as.microsoft.com/winfx/2006/xaml"
>
<
StackPanel
HorizontalAlignment
="Left"
>
<!--
MouSELEftButtonDown - 在该Canvas上单击鼠标后所执行的事件
-->
<
Canvas
x:Name
="canvas"
BACkground
="Yellow"
Width
="640"
Height
="480"
MouSELEftButtonDown
="Canvas_MouSELEftButtonDown"
>
<
Path
Fill
="Red"
>
<
Path.Data
>
<
EllipseGeometry
x:Name
="ellipseGeometry"
Center
="200,100"
radiusX
="15"
radiusY
="15"
/>
</
Path.Data
>
</
Path
>
</
Canvas
>
<
StackPanel.resources
>
<
Storyboard
x:Name
="storyboard"
>
<
PointAnimation
x:Name
="pointAnimation"
Storyboard.TargetProperty
="Center"
Storyboard.TargetName
="ellipseGeometry"
Duration
="0:0:2"
/>
</
Storyboard
>
</
StackPanel.resources
>
</
StackPanel
>
</
UserControl
>
Progr
AMMatically.xam
l.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
namespace
Silverlight20.Animation
{
public partial class ProgrAMMatically : UserControl
{
public ProgrAMMatically()
@H_992_4892@
@H_175_4896@{
initializeComponent();
}
private void Canvas_MouSELEftButtonDown(object sender, MouseButtonEventArgs E)
@H_378_4047@
{
// 鼠标相对与canvas的坐标
double newX = e.GetPosition(canvas).X;
double newY = e.GetPosition(canvas).Y;
Point myPoint = new Point(newX, newY);
// 将动画的结束值设置为鼠标的当前坐标
pointAnimation.To = myPoint;
// 播放动画
storyboard.begin();
}
}
}
OK
[源码下载]
大佬总结
以上是大佬教程为你收集整理的稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画全部内容,希望文章能够帮你解决稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。