WPF动画设计2—卷轴动画
T1-17 卷轴动画界面
1、窗口设计
新建项目中MainWindow的Window属性:
“外观”栏目中,WindowStyle-None,窗口最上方的控制条被去除;
“布局”栏目中,Height=600,Width=800;
“公共属性”栏目中,WindowStartupLocation-CenterScreen。
LayoutRoot属性设置为:
“画笔”栏目中,Background-纯色画笔,深紫色。
2、画面
画面由3部分元素组成。1是图片Image控件(pict1),2是背景(实际上是1个被填充图形的Rectangle控件,名为bj),3是白色矩形边框,也是Rectangle控件,名为rectanle。图片pict1“裱”在有背景图案的“矩形”上,矩形图案这样完成:在项目中“添加现有项”插入图片“背景2.jpg”、拖入【设计面板】并选中,选择菜单“工具”-“生成画笔资源”(ImageBrish资源),用此资源作为背景“矩形”属性“Fill”的“画笔资源”,具体操作可以参考“设计基础”。
这3部分元素用Grid组合在一起。
3、卷轴
共2个卷轴,每个卷轴由2个矩形组成,其中1个矩形构成轴面,选择红色渐变画笔,画笔设置如图T1-18所示。为了使白色光线沿轴向伸展,需要使用【工具】面板中的“渐变工具”调整渐变方向。
另1个矩形构成轴心,选择黑色渐变画笔,设置同前,长度略长,同时矩形边角调成“弧形”,如图T1-19所示。
T1-18 轴面画笔设置
T1-19 轴心画笔设置
将这2个矩形用Grid组合,名为zhouLeft,复制又生成1个卷轴zhouRight。
4、遮罩
动画的初始状态是2个卷轴停靠在左端,看不到画面,这实际上是被1个矩形(Rectangle控件,名为zhezhao)遮罩,此矩形的Fill颜色和窗口的Background颜色一样(可以设置1个画笔资源,窗口的background和遮罩矩形的Fill属性都采用此画笔资源)。
左边轴不动,右边轴平移到右端8秒,停止8秒,再以同样时间返回到左端;同时拖动遮罩矩形左边做同步运动(矩形的X方向变换,Y轴不动),这样动画就完成了。故事板设计如T1-19a所示。
T1-19a 卷轴动画故事板设计
T1-19b 卷轴动画触发器设计
6、鼠标点击右边的卷轴
鼠标点击右边的卷轴zhouRight,无论用鼠标的左键或右键,引发动画重复一次,使用触发器设计,如图t1-19b。
7、关闭按钮
“关闭”按钮,其Click事件代码:
Application.Current.Shutdown();
(或this.Close();)
上一篇: DNS委派
下一篇: php单文件管理器:
推荐阅读