原文: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. MFC屏蔽 WindowS按键

    LRESULT CALLBACK LowLevelKeyboardPorc(int nCode,WPARAM wParam,LPARAM lParam)//屏蔽按键的真正实现方法{ BOOL fEat ...

  2. HDU4911-Inversion

    题意:依据题目要求交换相邻的两个元素k次,使得最后剩下的逆序对数最少 思路:假设逆序数大于0,存在0 <= i < n使得交换Ai,Ai+1后逆序数降低1,所求答案就为max(invers ...

  3. js进阶 12-1 jquery的鼠标事件有哪些

    js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...

  4. java痛苦学习之路[十二]JSON+ajax+Servlet JSON数据转换和传递

    1.首先client须要引入 jquery-1.11.1.js 2.其次javawebproject里面须要引入jar包  [commons-beanutils-1.8.0.jar.commons-c ...

  5. linux下dd命令详解及应用实例

    名称: dd使用权限: 任何使用者dd 这个指令在 manual 里的定义是 convert and copy a file使用方式:dd [option]查看帮助说明dd --help或是info ...

  6. java.lang.ClassNotFoundException: org.codehaus.jackson.JsonProcess******

    http://blog.csdn.net/jrainbow/article/details/38764039

  7. 海思hi3716c机顶盒接usb摄像头和usb无线耳机时，无线耳机有时没有声音

    两个USB设备各自是: A:USB摄像头带录音功能,但不带放音功能. B:USB无线耳机是使用USB转2.4G的无线耳机. 详细现象: 1, A,B两者同一时候插上机顶盒,并开机进入android,此 ...

  8. Android菜鸟的成长笔记（26）——普通广播与有序广播

    BroadcastReceiver是Android系统的四大组件之一,BroadcastReceiver是一个全局的系统级监听器,它拥有自己的独立进程. 我们来写一个最简单的广播接收过程 先在mani ...

  9. 【codeforces 765B】Code obfuscation

    [题目链接]:http://codeforces.com/contest/765/problem/B [题意] 让你把每个变量都依次替换成a,b,c,-.d这些字母; 且要按顺序先用a再用b-.c.d ...

  10. 毕设一:python 爬取苏宁的商品评论

    毕设需要大量的商品评论,网上找的数据比较旧了,自己动手 代理池用的proxypool,github:https://github.com/jhao104/proxy_pool ua:fake_user ...