原文: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. irms模拟数据生成及数据分析 分类： H_HISTORY 2015-03-06 14:17 212人阅读 评论(0) 收藏

    一.数据准备 1.每天生成随机一个文本,每小时向文本中追加2次数据,每次10万条 随机数据生成: 2,32  * * * *  bash /mnt/jediael/irms/signalGenerat ...

  2. web中的重定向与转发

    Redirect:重定向(客户端重定向) 是HTTP协议规定的一种机制:当client向server发送一个请求,要求获取一个资源时,在server接收到这个请求后发现请求的这个资源实际存放在另一个位 ...

  3. docker 在运行 aspnetcore 镜像时提示 命令找不到

    不要讲路径映射到镜像中的应用根文件夹 例如默认的 /app

  4. 新版itunes添加铃声

    iTunes 铃声制作-图文教程 ① 点选设备iPhone - 勾选手动管理音乐和视频 - 点击应用 注意:因本操作涉及iPhone内音乐和视频,请操作前先对音乐和视频进行相关备份,以免同步后被刷掉造 ...

  5. AOP概述：

    AOP可以在不修改源代码的情况下,对程序进行增强. AOP面向切面进行编程,Spring将AOP引入到框架中,但是也需要遵守AOP联盟的规范. 通过预编译的方式和运行期动态代理实现程序功能的同意维护的 ...

  6. 用Java对CSV文件进行读写操作

    需要jar包:javacsv-2.0.jar 读操作 // 读取csv文件的内容 public static ArrayList<String> readCsv(String filepa ...

  7. Error while trying to retrieve text for error ORA-12705

    今天, 按照以前的学习笔记, 配置ProC 但是, 却发生了如题的错误. Google一下, 都是NLS_LANG环境变量设置有问题, 我核一下没有问题. 问题在哪? 原来是ORACLE_HOME环境 ...

  8. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  9. Vert.x ——概述

    Vert.x是什么 Vert.x(http://vertx.io/)是一个基于JVM.轻量级.高性能的应用平台,非常适用于最新的移动端后台.互联网.企业应用架构. Vert.x框架基于事件和异步,依托 ...

  10. 新技能 get —— Python 断点续传下载文件

    from urllib.request import urlretrieve import sys import os prev_reported_download_percent = None # ...