silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)

简介: 原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来。 1.新建一个usercontrol,命名为menu. 2.按照下图设置一下属性。
原文: silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)

这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来。

1.新建一个usercontrol,命名为menu.

img_a31dd97b3487e9d60c7581953138aa4b.jpe

2.按照下图设置一下属性。宽度为1000,高度为40,边框宽度为2,圆角为10。

img_6308265334a4dc59ec565d18fd48af85.jpe

3.按照下图设置border的background。

img_27c8d19324b0cacc1cc25dbd818c9d7a.jpeimg_5909f3332e94445cb1489010c35eba87.jpeimg_bf03613582192cd8d31613a3e8de8484.jpeimg_a97b3867be6a9473e74b8f4cff437edb.jpeimg_0b94f3a2b030dd6f2a16f8494b0d5319.jpe

4.选择渐变工具,设置渐变方向。img_1175e847a7aa0d452ddf04fc18708c85.jpe(渐变工具)

img_d1c213876ac8ec6679ee8ad178330840.jpe

5.给border加上阴影特效。边框颜色设置为透明。

img_6039f52fa5140367715e08b97f15a636.jpeimg_e23aba35e9ce489679bcf5c5aa5dfd5a.jpe

6.在border内画出1个按钮,命名为title1.高和宽分别为30,160.

img_ba6c558ee38874a4931899dbac5f0f55.jpe

7.按照下图分别设置brushs。

background

img_8e67c20226fec952dd5ff3d0ca2ad1ec.jpe

borderbrush

img_aef406c7f1c91d34711a91287507968b.jpeimg_ae46ca6b439289922950d2ded9132010.jpeimg_ec2c9dbf4458f8d6707030ed06a4d345.jpeimg_15c6c70059f869269ced166d59078bf0.jpe

foreground

img_4b5c08da9f131f9ca78dcc2cbdb58d74.jpeimg_35959b91c1a9c9c005096a0cb77b18ee.jpe

8.将按钮复制5个,排列在border内,然后合并到stackpanel内。

img_a89e887c5bfd77c72efc16e4cfb457fe.jpeimg_85629622f1926debceb332e9d9e3a54a.jpe

9.新建一个canvas,然后在其中使用矩形工具,画一个圆角矩形。

img_99948b691d2f160f29af4550c0b3b65e.jpeimg_05b6ff433e6e9fdaae4d7d161af82e77.jpe

10.使用矩形工具绘制出一下图形。途中白色为矩形绘制的背景,黑色为一个视频。

img_d947486e5b3e18dc9cbbdc3e186fab65.jpeimg_0672331d6460fca30f7f6fc0d95b936c.jpe

11.然后将最外面的canvas命名为canvas1,然后visibility设置为collapsed.

img_b7b0ae8651b7342cf7dc04450127cfe7.jpe

12.按照上面步骤设置其他5个界面。下面给出我做的效果,大家参考下。

img_19f4d365fbf0bb31b90a2f14343249da.jpe

这边有一个richtextbox,说一下怎么修改他的样式。

1.先创建一个空的模板edit a copy

img_1e4baf4e98292c98ee14c7db54364248.jpeimg_11f6cbc2a1bdedfe93b717cd98241f6b.jpe

2.下面说一下怎么修改左边的滑动条样式。选中如图所示的元素,然后编辑样式。

img_fee474ac75955c09dac112a3e30cff98.jpeimg_e0b118bce60c42cd95f3dcb7912563c6.jpeimg_7a3ccdc97028ccdb25f9381016368ef9.jpe

3.选中verticalscrollbar,然后继续编辑样式。

img_c93471938a2c7b3db5aa62336e43f068.jpe

4.按照下图开始设置属性。

img_eced044be5f6988feaf4dbb35c8aa154.jpeimg_eba0a390dd1002c3058780be6a96ef9e.jpe

img_14dfdffca6e9f710b6075bff2c056a4c.jpeimg_47ffa8fb36329d1fa6c9cc2cd4375af6.jpe

img_ffe8da1171d88ed3d9a20617ae8371bd.jpeimg_975bbce24555c54259c6a2edcdffd0f0.jpe

5.选中verticalsmalldecrease,然后选择edit current,编辑样式。设置一下样式,样式就是改变颜色,大家自己设置下不同颜色就知道哪个属性操控的那块。

img_c12e2ec2106fca5e0e9fbd06f0363903.jpeimg_33e13a14c88aa15944ee36138e21df9e.jpe

6.其他的都是按照这个步骤,大家有不明白的可以看源码,或者留言。

TITLE 3的界面

img_5e308b2d19a5e8483229c5d9bfe228bb.jpe

TITLE 4的界面

img_f0f9fcea974c0db52975c575ffac11b8.jpe

下面开始我们动画的设置。

1.新建一个stroyboard,选中border,在oS出和1S初添加关键帧。

img_402ffcf6249809cc4530f4b2caee1906.jpe

2.在0s处将border的transfrom的ration设置为-90(这边是立体变形),然后在1S处将border的transfrom的ration设置为0

img_8d47799bce3f165fd63dded2ecc5f697.jpeimg_2cb1d5697b20d9bf8f6601dc1f22e9ff.jpe

3.选中canvas1,在0S处和1S处设置关键帧。然后1S和0S处得属性都设置如下

img_62d9013c8dcf28b7031cf0872073ce19.jpe

4.接着新建一个stroyboard,命名为canvast1.在0s,0.8S,1.6S处添加关键帧。

img_d0474e954ec937599634d9c5359c2203.jpeimg_c826a4f24ee109da7c9742410b6a6ef8.jpeimg_2c10ef04aa85222e3b2d79b93e374e8a.jpe

5.继续新建一个stroyboard,命名为canvast1out,在0s,0.8S,1.6S处添加关键帧。

img_22a457c8201ab2efdcd24e1b7b8825ea.jpeimg_0a6986bb167abebab03327dff86bf055.jpeimg_05c8466c6a36b7f7b41483035fcd4bb3.jpe

6.用同样的属性,分别对canvas2,3,4,5,6做动画。

7。完成后,在VS中打开,添加一些代码。代码大家下源码研究下吧,我这里就不啰嗦了,都是简单的代码

目录
相关文章
|
1月前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放,可沿X或Y轴调整。在故事板中,通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性,并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时,EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后,展示了如何将动画集成到自定义按钮样式中。
36 0
|
9月前
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
150 0
|
C#
WPF中的PathAnimation(路径动画)
原文:WPF中的PathAnimation(路径动画)                                   WPF中的PathAnimation(路径动画)                                                               周...
1268 0
|
API C# 索引
WPF中的动画——(一)基本概念
原文:WPF中的动画——(一)基本概念 WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面。首先,我们来复习一下动画的基本概念。计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生动画效果。
1050 0
|
C# 测试技术
WPF中的动画——(二)From/To/By 动画
原文:WPF中的动画——(二)From/To/By 动画 我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画:     var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.
976 0
|
算法 C#
WPF中的动画——(五)关键帧动画
原文:WPF中的动画——(五)关键帧动画 与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值。 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个状态之间变化,例如,对于前面那个改变按钮宽度的例子,如果我们要实现如下效果: 在2秒时将宽度从 0变为350 在7秒时将宽度变为50 在9秒的时候将其宽度变为200 虽然我们可以用三个From/To/By 动画组合实现类似效果,但是这样一来麻烦,二来要感知动画完成事件,不方便在XAML中使用。
1346 0
|
C#
WPF中的动画——(四)缓动函数
原文:WPF中的动画——(四)缓动函数 缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样。它们一般应用在From/To/By动画上,可以使得其动画更加平滑。     var widthAnimation = new DoubleAnimation()    {    ...
946 0
|
C#
WPF中的动画——(三)时间线(TimeLine)
原文:WPF中的动画——(三)时间线(TimeLine) 时间线(TimeLine)表示时间段。 它提供的属性可以让控制该时间段的长度、开始时间、重复次数、该时间段内时间进度的快慢等等。在WPF中内置了如下几种TimeLine: AnimationTimeline :前面已经介绍过,主要用于属性的过渡,这种是最常见的动画。
1460 0
|
C# 容器 调度
WPF中的动画——(六)演示图板
原文:WPF中的动画——(六)演示图板 前面所介绍的都是单一的动画,它只能修改单一属性。有的时候,我们需要将一组动画一起进行,对于一个按钮,我们可能有如下需求: 选择该按钮时,该按钮增大并更改颜色。
742 0
|
前端开发 C#
WPF中的动画——(五)路径动画
原文:WPF中的动画——(五)路径动画 路径动画是一种专门用于将对象按照指定的Path移动的动画,虽然我们也可以通过控制动画的旋转和偏移实现对象的移动,但路径动画更专业,它的实现更加简洁明了。 路径动画中最常用的是MatrixAnimationUsingPath,它通常用于控制对象的MatrixT...
1264 0

热门文章

最新文章