原文:Expression Design与Blend制作滚动的小球动画教程

一,开发工具

Microsoft Expression Design & Blend 4.0 (3.0亦可)。


这两款软件可以在微软Expression官方网站上下载:http://expression.microsoft.com/en-us/default.aspx

二,建立解决方案

在Blend中建立解决方案,菜单栏->File->New Project 输入解决方案名称为WPFAnimations,如下:


建立后视图如下:

三,建立小球控件

选中WPFAnimations项目,右击在ContextMenu中选择New Item,输入名称Ball


从工具栏拖入一个Ellipse,取名为EllipseBall,调整其效果如下:

Ball.xaml的内容如下:

<UserControl
xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="
http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="
http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="
http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="WPFAnimations.Ball"
x:Name="UserControl"
d:DesignWidth="200" d:DesignHeight="200">

<Grid x:Name="LayoutRoot">
   <Ellipse x:Name="EllipseBall" Height="200" Margin="0,0" Stroke="Black" VerticalAlignment="Top">
    <Ellipse.Fill>
     <RadialGradientBrush>
      <GradientStop Color="#FF1A1747" Offset="0.99"/>
      <GradientStop Color="#FF4B5DFB"/>
      <GradientStop Color="#FF161FAD" Offset="0.604"/>
     </RadialGradientBrush>
    </Ellipse.Fill>
   </Ellipse>
</Grid>
</UserControl>

四,建立整体场景添加小球到MainWindow.xaml

打开MainWindow.xaml文件,调整其背景,添加Canvas,以及相关的元素,并将小球拖拽至其中。

注意:添加用户控件可以通过生成项目后在Assets下面添加:


最终效果如下:

MainWindow.xaml的内容如下:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WPFAnimations"
x:Class="WPFAnimations.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="800" Height="480">

<Grid x:Name="LayoutRoot">
   <Grid.Background>
    <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
     <GradientStop Color="#FF3594ED" Offset="1"/>
     <GradientStop Color="White"/>
    </LinearGradientBrush>
   </Grid.Background>
   <Canvas x:Name="CanvasMain" Margin="50,20,20,20">
   
    <local:Ball Canvas.Left="-23.333" Canvas.Top="196.667" Width="200" Height="200" RenderTransformOrigin="0.5,0.5">
     <local:Ball.RenderTransform>
      <TransformGroup>
       <ScaleTransform ScaleX="0.4" ScaleY="0.4"/>
       <SkewTransform/>
       <RotateTransform/>
       <TranslateTransform/>
      </TransformGroup>
     </local:Ball.RenderTransform>
    </local:Ball>
   
   </Canvas>
</Grid>
</Window>

五,添加动画效果

用钢笔工具在Canvas中添加如下如所示的路径:

路径的XML为

<Path Data="M70.5,210.5 C175.5,143 181,136.5 244,136.5 307,136.5 319,189 331,207 343,225 347.5,298.5 347.5,298.5 L491.5,340.5 C491.5,340.5 520,391.5 551.5,325.5 583,259.5 622,359.99974 610,244.49988 598,129.00001 614.50012,179.99995 595.00012,135 575.50011,90.000054 664.90289,84.724203 664.90289,84.724203 L489.72622,50.377374 462.77596,162.37791 C462.77596,162.37791 570.57699,278.85847 462.77596,207.17812 354.97494,135.49778 347.48875,72.77748 347.48875,72.77748 L170.81485,65.310778 70.5,78.750842 45.046979,116.08435" Height="310.3" Canvas.Left="45" Stretch="Fill" Canvas.Top="50" Width="621"/>

如果你足够熟悉,这里的路径数据也可以直接通过XML构建或者通过自己编写路径数据,具体参考http://msdn.microsoft.com/en-us/library/ms752293.aspx

在菜单栏将工作区切换为Animation,如下:


选中Ball对象,在Triggers选项卡中点击Events按钮,添加

单击+event按钮后,设置事件为窗体Window加载后Loaded,单击+按钮添加StoryBoard:

在弹出对话框,点击okay按钮,建立Storyboard后,修改其名称为BeginRollBall

如下图:

在0秒与12秒之间为小球添加路径动画,最终MainWindow.xaml的代码如下:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WPFAnimations"
x:Class="WPFAnimations.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="800" Height="480">
<Window.Resources>
   <PathGeometry x:Key="MyPath" Figures="M70.5,210.5 C175.5,143 181,136.5 244,136.5 307,136.5 319,189 331,207 343,225 347.5,298.5 347.5,298.5 L491.5,340.5 C491.5,340.5 520,391.5 551.5,325.5 583,259.5 622,359.99974 610,244.49988 598,129.00001 614.50012,179.99995 595.00012,135 575.50011,90.000054 664.90289,84.724203 664.90289,84.724203 L489.72622,50.377374 462.77596,162.37791 C462.77596,162.37791 570.57699,278.85847 462.77596,207.17812 354.97494,135.49778 347.48875,72.77748 347.48875,72.77748 L170.81485,65.310778 70.5,78.750842 45.046979,116.08435"/>
   <Storyboard x:Key="BeginRollBall" RepeatBehavior="Forever">
   <DoubleAnimationUsingPath Duration="0:0:12" PathGeometry="{StaticResource MyPath}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X" Storyboard.TargetName="ball">
   </DoubleAnimationUsingPath>
    <DoubleAnimationUsingPath Duration="0:0:12" PathGeometry="{StaticResource MyPath}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y" Storyboard.TargetName="ball">
   </DoubleAnimationUsingPath>
   </Storyboard>
</Window.Resources>
<Window.Triggers>
   <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    <BeginStoryboard x:Name="BeginRollBall_BeginStoryboard" Storyboard="{StaticResource BeginRollBall}"/>
   </EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
   <Grid.Background>
    <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
     <GradientStop Color="#FF3594ED" Offset="1"/>
     <GradientStop Color="White"/>
    </LinearGradientBrush>
   </Grid.Background>
   <Canvas x:Name="CanvasMain" Margin="50,20,20,20">
   
    <local:Ball x:Name="ball" Canvas.Left="10.25" Canvas.Top="95.25" Width="200" Height="200" RenderTransformOrigin="0.5,0.5">
     <local:Ball.RenderTransform>
      <TransformGroup>
       <ScaleTransform ScaleX="0.4" ScaleY="0.4"/>
       <SkewTransform/>
       <RotateTransform/>
       <TranslateTransform/>
      </TransformGroup>
     </local:Ball.RenderTransform>
    </local:Ball>

    <Path Data="M70.5,210.5 C175.5,143 181,136.5 244,136.5 307,136.5 319,189 331,207 343,225 347.5,298.5 347.5,298.5 L491.5,340.5 C491.5,340.5 520,391.5 551.5,325.5 583,259.5 622,359.99974 610,244.49988 598,129.00001 614.50012,179.99995 595.00012,135 575.50011,90.000054 664.90289,84.724203 664.90289,84.724203 L489.72622,50.377374 462.77596,162.37791 C462.77596,162.37791 570.57699,278.85847 462.77596,207.17812 354.97494,135.49778 347.48875,72.77748 347.48875,72.77748 L170.81485,65.310778 70.5,78.750842 45.046979,116.08435" Height="310.3" Canvas.Left="45" Stretch="Fill" Canvas.Top="50" Width="621"/>
   
   </Canvas>
</Grid>
</Window>

运行我们可以看到效果:

由于刚才添加了Canvas导致了小球移动的路径并不是按照钢笔所画路径而是有所偏移。

六,总结

在整个实例中由于对路径的数据处理不是很好 所以导致最终的效果和路径有所偏移,大家可以针对自己的情况作相应的调整。如果对WPF足够的熟悉所有的代码都可以自己的编写,所有的效果动画也都都可以通过code-behind中用c#或者VB.NET等直接编写代码来实现。

如需要本示例源码请回复你的邮箱地址或者发消息~~~

原谅地址:http://kosmisch.net/archive/2010/08/09/befecb03aea741e108fa9301.aspx

Expression Design与Blend制作滚动的小球动画教程的更多相关文章

  1. Blend制作的下载动画

    最近使用Blend制作了一个下载动画,感觉很有意思,所以这篇给各位介绍下如何使用Blend制作一个简单的下载动画的步骤 首先拖出一个圆,参数如下: 选中椭圆后单击Properties面板,选择“Fil ...

  2. WPF学习笔记-用Expression Design制作矢量图然后导出为XAML

    WPF学习笔记-用Expression Design制作矢量图然后导出为XAML 第一次用Windows live writer写东西,感觉不错,哈哈~~ 1.在白纸上完全凭感觉,想象来画图难度很大, ...

  3. WPF学习笔记-用Expression Blend制作自定义按钮

    1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点击此按钮,选择Edit control parts(template)>Edit a cop ...

  4. Expression Blend制作自定义按钮(转)

    来源:http://www.cnblogs.com/iChina/archive/2011/11/25/2262854.html Expression Blend制作自定义按钮 1.从Blend工具箱 ...

  5. 如何获取Expression Design 4工具与Expression Blend 4工具

    在VS2010+C#+WPF 开发项目过程中涉及到界面的布局与设计,网上有人讲采用Expression Design 4与Expression Blend 4工具相当方便, 于是决定试看看,下面将这个 ...

  6. 零元学Expression Design 4 - Chapter 1 入门界面简介

    原文:零元学Expression Design 4 - Chapter 1 入门界面简介 Expression Design 是Expression系列里面的一员,更是Blend跟Web的好帮手 而在 ...

  7. 零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果

    原文:零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Path ...

  8. 零元学Expression Design 4 - Chapter 4 教你如何自制超炫笔刷

    原文:零元学Expression Design 4 - Chapter 4 教你如何自制超炫笔刷 在Chapter 2 有稍微讲过Design内建笔刷的用法,本章将教大家如何自制独一无二的笔刷,并且重 ...

  9. 零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页

    原文:零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页 本章将用带大家熟悉Design 4并制作简易的网页版面,也会让你了 ...

随机推荐

  1. 8、hzk16的介绍以及简单的使用方法

    HZK16 字库是符合GB2312标准的16×16点阵字库,HZK16的GB2312-80支持的汉字有6763个,符号682个.其中一级汉字有3755个,按 声序排列,二级汉字有3008个,按偏旁部首 ...

  2. java实现微信支付宝等多个支付平台合一的二维码支付(maven+spring springmvc mybatis框架)

    首先申明,本人实现微信支付宝等支付平台合多为一的二维码支付,并且实现有效时间内支付有效,本人采用的框架是spring springmvc mybatis 框架,maven管理.其实如果支付,不需要my ...

  3. [Angular2 Animation] Delay and Ease Angular 2 Animations

    By default, transitions will appear linearly over time, but proper animations have a bit more custom ...

  4. 【35.37%】【codeforces 556C】Case of Matryoshkas

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  5. ios开发Base64编码以及加密相关学习

    一:.Base64补充 ```objc 1.Base64简单说明 描述:Base64可以成为密码学的基石,非常重要. 特点:可以将任意的二进制数据进行Base64编码 结果:所有的数据都能被编码为并只 ...

  6. Annotation研究的一些学习资料

    转自chanyinhelv原文Annotation研究的一些学习资料 下面是我最近对Annotation研究的一些学习资料,收集于此,供大家学习之用. 一.Annotation要素类介绍 在GeoDa ...

  7. linux上电自启动应用程序具体解释

    每当我学习一个新的东西得时候都是会 遇到一些错误.可是我会很努力的去解决它,今天这个自启动应用程序花了我两个小时的时间才攻克了.所以说遇到问题的时候要去思考.分析.以下我就来谈谈linux上电自启动应 ...

  8. 记录一次mysql由5.6升级到5.7出现的异常---Expression #23 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'c.commentCount' which is not functionally dependent on columns in GROUP BY clause;

    ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Expre ...

  9. 【poj1442】Black Box

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 10890   Accepted: 4446 Description Our ...

  10. 【STL】各容器成员对比表

    http://www.cnblogs.com/fangyukuan/archive/2010/09/21/1832675.html Sequence containers Associative co ...