silverlight,WPF动画终极攻略之阳光灿烂篇(Blend 4开发)

简介: 原文:silverlight,WPF动画终极攻略之阳光灿烂篇(Blend 4开发)前面我们画了一只会飞动的小鸟,今天我们在目标是一个会发光的太阳。本章节的动画虽然简单,但是实现的效果可是一点也不打折。
原文: silverlight,WPF动画终极攻略之阳光灿烂篇(Blend 4开发)

前面我们画了一只会飞动的小鸟,今天我们在目标是一个会发光的太阳。本章节的动画虽然简单,但是实现的效果可是一点也不打折。

开始我们今天的阳光灿烂。大家觉的好的帮忙推荐下,谢谢了。不懂的随时欢迎提问。

很多人都说自己美工不行,做不出来,其实你自己做了就会发现不是那么难,我的配色方案都给出了,自己试一下挺简单的。

我们的目标是没有代码,偶也!

img_5006ed81d19f3fd7c41af4ce697436f1.jpe

1.在part文件夹中新建一个usercontrol,命名为sun。

img_c0d3d2210edbdba1009b5f9e6d045f31.jpe

2.在最外面的布局grid上面右击,将grid转变为canvas。

img_99b1fae894aaaffed4d7a475ff738001.jpe

3.选择椭圆工具,按住shift键画一个圆。使用渐变填充(径向渐变)。(0%出颜色#FFF6EB08,42.7%处颜色#FFFAEF0C,84.7%处颜色#FFFAAD0A)

img_6011d94557f295c86734226854b07abd.jpeimg_c81007c7522c1975ae94002bdfce51cd.jpeimg_e96b4e7bcedfbb55d508d6e852420608.jpe

4.选择渐变方向工具,对圆的渐变调整。适当调整位置。

img_28a747ccb68d7ddc3fa0095fd68f1520.jpe

5.添加阴影效果。在effect后面点击NEW新建。按照下图设置属性。

img_1d170e23d3756079590a547274cacf88.jpeimg_c3fca91d188237ffcbcd42adb8c562e6.jpeimg_25a6d4d614c8a0923633b1c8398abcc6.jpe

img_b356fcb03eaf00f0883607d752ca9148.jpe

6.为stroke选择纯色画刷。

img_e3460e70f0b33b7ff7dfce7f468bec42.jpeimg_8877c5852e188035cd68fa0bf4eb3361.jpeimg_196ad66e7deb61cfd0661d48008b40f7.jpe

7.选择钢笔工具,绘制太阳的光芒。用钢笔工具绘制路径,使用线性渐变填充。去掉stroke。

img_c1f1843fe484c0bde92b939f922f7569.jpeimg_e5533d163310e545ae56810b4f899ab2.jpeimg_2430bd452e9ab20c0682db9230106ed2.jpe

8.使用选择工具,选中路径,出现边框以后将中间的点拉到圆心

img_cb93f338c7070ae076b5fe6000f88b2d.jpe

9.调整好以后复制路径17次。然后选择路径的angle属性,每个路径增加20.17个路径都设置后正好将圆围城一个圈。

img_f71a784e2274f56244ac373b87fe8137.jpeimg_4af2e404d924c73a90a03a0475f8e524.jpeimg_91a4e4ee74beaa96e665c769eb03c68b.jpeimg_093ffb014658b4d312be430d18f96f08.jpe

10.将18条路径选中,右击合并路径。

img_9b2960590fbebb8a7402de47b15c98aa.jpe

11.选择渐变工具,设置渐变方向,并将线性渐变改为径向渐变。

img_8e9d0798d0606e54fcb8c27a34fe0096.jpeimg_a8c8c25ce71de198c04b9c4d87e87a3e.jpe

我设置的渐变数据,参考下。

img_9d31a68e5dbbd066a478bcb9db4e6676.jpeimg_f8a4b175155797ba4944a54a402f8c74.jpeimg_579f0bfd9da786043bbc0046cf9b6ce1.jpeimg_dc0164864a05fd5f2b39c593eeecf686.jpeimg_441864536b2b859321e3801aaca541ff.jpeimg_fd8606bded24c3c8823454788e4721dd.jpe

12.在此使用钢笔工具画一个比刚才路径大点的路径。步骤与上一个路径相同。画路径,设置渐变画刷,渐变方式改为线性渐变,使用渐变工具调整位置。(将我们前一个完成的路径隐藏)

img_8280852204169ec10fe619b6d4fafa34.jpeimg_2e9f224d599b9e87ec348e8fd6f212c3.jpeimg_f849e23b07bbc9e6c25533cde0296955.jpeimg_596d7f98abda26699107fb050c79e58f.jpeimg_b4674b0e400020381bfd17f9b4fb4139.jpeimg_6a3fb77de361e76714cbeabe6611a457.jpe

img_e68f2c4973a970a834756ef317d09304.jpe

13.然后开始重复第8-10步的步骤,做成如下形状。

img_f6b6baa7ff84ea294a33e0f0e4482a70.jpe

14.将路径的线性渐变改为径向渐变。然后使用渐变工具,调整渐变。

img_46a1a11b9e299d69961fac0910253569.jpe

我用的渐变值

img_3e7bef9198f4361c4becb17a25fe266d.jpeimg_e4dc52ee326711ed5126ddc8c36768d6.jpeimg_f4acff1fb3b809ded8eb26829354b9de.jpeimg_5d3e3071a25f8afade80e06612a32283.jpeimg_0ad277ceb0286753afc4fd6683492995.jpeimg_e363741928c1a9ddda5be43365af11da.jpeimg_4caeadbda3655866d2aa65c0b460bc70.jpe

15.转动第二个路径,调整位置形成以下形状。

img_136a9e0cbd09c3d5705af98f1487ea5c.jpe

16.基本工作完成后,开始我们的动画。今天的动画是stroybroad.新建stroybroad,命名为movesun。

img_2d0956b584af452a86b7bce5ef0c7889.jpeimg_58dabb9ce5aee728a228db460417a67e.jpe

17.按F6进入动画模式。

18.选中第一个路径,然后再属性面板的transform类别中设置如下图属性(只要设置projection中的z的值为180就好了)

img_ed2dc45b37f87ce740b97fc9fff74d50.jpe

19.选中第二个路径,然后重复18的步骤。

img_ab225993dd12a820304b57f410430948.jpe

20.你现在可以按播放键预览以下了,是不是有阳光闪动的感觉了。

21.选中movesun,在右边的属性面板中设置repeatbehavior属性为forever。

img_7a50c8817e916face168b4d3c2b034e3.jpeimg_3ef41e8200b7e11384168c00bb38816e.jpe

21.最后一步,让动画执行。在projects中打开sun.xaml.cs文件,加一句代码,让动画执行。

img_7d0ad6a54a4a50a79a532e5261927601.jpe

22.完工,修改APP中的执行文件查看下效果吧,是不是很帅了,阳光灿烂……

img_154458ff86445bcfe49a719a1340a575.jpe

好了本章结束了,谢谢大家的支持,期待下回合吧。

目录
相关文章
|
3月前
|
C# 开发者 Windows
WPF 应用程序开发:一分钟入门
本文介绍 Windows Presentation Foundation (WPF),这是一种用于构建高质量、可缩放的 Windows 桌面应用程序的框架,支持 XAML 语言,方便 UI 设计与逻辑分离。文章涵盖 WPF 基础概念、代码示例,并深入探讨常见问题及解决方案,包括数据绑定、控件样式与模板、布局管理等方面,帮助开发者高效掌握 WPF 开发技巧。
174 65
|
4月前
|
C#
WPF中动画教程(DoubleAnimation的基本使用)
WPF中动画教程(DoubleAnimation的基本使用)
85 0
|
3月前
|
算法 C# Windows
不可不知的WPF动画(Animation)
【9月更文挑战第19天】在 WPF(Windows Presentation Foundation)中,动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画,可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发,支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化,可创建引人入胜的用户界面。
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
|
4月前
|
C# UED 开发者
WPF与性能优化:掌握这些核心技巧,让你的应用从卡顿到丝滑,彻底告别延迟,实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法,详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈,如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着,通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画,从而有效提升应用性能。通过这些优化措施,WPF应用将更加流畅,用户体验也将得到显著改善。
309 1
|
4月前
|
容器 C# Docker
WPF与容器技术的碰撞:手把手教你Docker化WPF应用,实现跨环境一致性的开发与部署
【8月更文挑战第31天】容器技术简化了软件开发、测试和部署流程,尤其对Windows Presentation Foundation(WPF)应用程序而言,利用Docker能显著提升其可移植性和可维护性。本文通过具体示例代码,详细介绍了如何将WPF应用Docker化的过程,包括创建Dockerfile及构建和运行Docker镜像的步骤。借助容器技术,WPF应用能在任何支持Docker的环境下一致运行,极大地提升了开发效率和部署灵活性。
152 1
|
4月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(10) -- 在DataGrid上直接编辑保存数据
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(10) -- 在DataGrid上直接编辑保存数据
|
4月前
|
测试技术 C# 开发者
“代码守护者:详解WPF开发中的单元测试策略与实践——从选择测试框架到编写模拟对象,全方位保障你的应用程序质量”
【8月更文挑战第31天】单元测试是确保软件质量的关键实践,尤其在复杂的WPF应用中更为重要。通过为每个小模块编写独立测试用例,可以验证代码的功能正确性并在早期发现错误。本文将介绍如何在WPF项目中引入单元测试,并通过具体示例演示其实施过程。首先选择合适的测试框架如NUnit或xUnit.net,并利用Moq模拟框架隔离外部依赖。接着,通过一个简单的WPF应用程序示例,展示如何模拟`IUserRepository`接口并验证`MainViewModel`加载用户数据的正确性。这有助于确保代码质量和未来的重构与扩展。
110 0
|
4月前
|
前端开发 C# 设计模式
“深度剖析WPF开发中的设计模式应用:以MVVM为核心,手把手教你重构代码结构,实现软件工程的最佳实践与高效协作”
【8月更文挑战第31天】设计模式是在软件工程中解决常见问题的成熟方案。在WPF开发中,合理应用如MVC、MVVM及工厂模式等能显著提升代码质量和可维护性。本文通过具体案例,详细解析了这些模式的实际应用,特别是MVVM模式如何通过分离UI逻辑与业务逻辑,实现视图与模型的松耦合,从而优化代码结构并提高开发效率。通过示例代码展示了从模型定义、视图模型管理到视图展示的全过程,帮助读者更好地理解并应用这些模式。
120 0