WPF中 Storyboard容器时间线的讲解

最新推荐文章于 2025-11-01 14:52:48 发布

原创最新推荐文章于 2025-11-01 14:52:48 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#c#

python 专栏收录该内容

76 篇文章

订阅专栏

本文深入讲解了WPF中Storyboard的使用方法，包括平移、颜色变换、边框粗细及旋转动画的实现过程，通过实例代码展示了如何控制动画的播放、重复及方向。

WPF中 Storyboard容器时间线的讲解

一、介绍

Storyboard表示：一个容器时间线，该时间线为自动化提供对象，和属性确定信息

简单来说Storyboard就是一个故事板或者说剧本，上面写了动画情节，可以控制动画的播放等等

二、这里用到三个属性

属性	说明	参数说明
SetTarget	使指定TimeLin依赖对象为目标	第一个参数为创建的动画处理对象，第二个为要进行某种行为的对象
SetTargetProperty	使指定TimeLin目标成为指定的依赖属性	第一个参数就是创建的动画处理对象，第二个参数需要new PropertyPath()表示进行某种行为的位置
Children	获取对象的集合	采用Add方法，将创建动画处理的对象添加到这个故事板中
Begin	开启关联的动画	无

代码如下：

Storyboard story = new Storyboard();//实例化容器时间线（故事板）
Storyboard.SetTarget(da, bord);
Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));
story.Children.Add(da);
story.Begin();

三、回顾动画

1、平移

storyboard story = new Storyboard();//实例化容器时间线（故事板）
DoubleAnimation da = new DoubleAnimation(Canvas.GetLeft(bord),100,new Duration(timeSpan:TimeSpan.FromSeconds(3)));//实例化double动画处理对象，并取值
            da.AutoReverse = true;//按相反的顺序返回
            da.RepeatBehavior = RepeatBehavior.Forever;//无限循环
            Storyboard.SetTarget(da, bord);//将动画处理的对象和控件关联起来
            Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));//设置这个动画的播放位置
            story.Children.Add(da);//将动画处理对象添加到故事板中
            story.Begin();//开启时间线动画

注意：

Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));

如想要垂直平移那么就将Left改为Top

如想斜着那么就就设置两个平移，一个向下，一个向右

2、颜色和边框颜色，并且边框粗细的动画

（1）设置背景颜色动画

 Storyboard story = new Storyboard();//实例化容器时间线（故事板）
ColorAnimation ca = new ColorAnimation(Colors.LightBlue, Colors.LightPink, new Duration(TimeSpan.FromSeconds(3)));//实例化颜色动画处理对象
            ca.AutoReverse = true;
            ca.RepeatBehavior = RepeatBehavior.Forever;
            Storyboard.SetTarget(ca, bord);
            Storyboard.SetTargetProperty(ca, new PropertyPath("(Border.Background).(SolidColorBrush.Color)"));//背景颜色变换
            //SolidColorBrush表示实心画刷
            story.Children.Add(ca);
            //story.Begin();

（2）设置边框颜色动画

 Storyboard story = new Storyboard();//实例化容器时间线（故事板）
ColorAnimation ca = new ColorAnimation(Colors.Green, Colors.Red, new Duration(TimeSpan.FromSeconds(3)));//实例化颜色动画处理对象
            ca.AutoReverse = true;
            ca.RepeatBehavior = RepeatBehavior.Forever;
            Storyboard.SetTarget(ca, bord);
            Storyboard.SetTargetProperty(ca, new PropertyPath("(Border.BorderBrush).(SolidColorBrush.Color)"));//边框颜色变换
            //SolidColorBrush表示实心画刷
            story.Children.Add(ca);
           // story.Begin();

（3）设置边框粗细动画

 Storyboard story = new Storyboard();//实例化容器时间线（故事板）
ThicknessAnimation da = new ThicknessAnimation(new Thickness(1),new Thickness(10),new Duration(TimeSpan.FromSeconds(3)));//实例化边框动画处理对象
            da.AutoReverse = true;
            da.RepeatBehavior = RepeatBehavior.Forever;
            Storyboard.SetTarget(da, bord);
            Storyboard.SetTargetProperty(da, new PropertyPath("BorderThickness"));//边框粗细变换
            story.Children.Add(da);
            //story.Begin();

3、设置旋转

		   Storyboard story = new Storyboard();//实例化容器时间线（故事板）
		   RotateTransform tate = new RotateTransform();//实例化旋转对象
            bord.RenderTransform = tate;//控件的位置为旋转
            bord.RenderTransformOrigin = new Point(0.5, 0.5);//旋转点为中心点
            DoubleAnimation da = new DoubleAnimation(0, 360, new Duration(timeSpan: TimeSpan.FromSeconds(3)));//double动画处理对象
            da.AutoReverse = true;//返回
            da.RepeatBehavior = RepeatBehavior.Forever;//无限循环
            Storyboard.SetTarget(da, bord);
            Storyboard.SetTargetProperty(da, new PropertyPath("RenderTransform.Angle"));//旋转一个角
            story.Children.Add(da);
            //story.Begin();