原文: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. libiconv库链接问题一则

    https://blog.csdn.net/jeson2090/article/details/54632063 出现过glibc中的iconv_open返回EINVAL,原因猜测是有些字符集转换不支 ...

  2. 解决gvim 8.1中zip插件打开zip文件内容时，而文件路径带有空格的问题。

    解决gvim 8.1中zip插件打开zip文件内容时,而文件路径带有空格的问题. 现象是只能打开一次,第二次打开就显示为空了. 通过 lcd切换工作目录.使得命令行操作中不再有带空格的路径 vim81 ...

  3. Android RadioGroup的RadioButton 选择改变字体颜色和背景颜色

    RadioGroup <RadioGroup android:id="@+id/client_charge_radiogroup" android:layout_width= ...

  4. matlab 下的集成学习工具箱

    matlab 当前支持的弱学习器(weak learners)类型分别为: 'Discriminant' 'knn' 'tree' 可通过 templateTree 定义: 1. fitcensemb ...

  5. ReentrantLock Condition await signal 专题

    Condition的执行方式,是当在线程T1中调用await方法后,线程T1将释放锁,并且将自己阻塞,等待唤醒, 线程T2获取到锁后,开始做事,完毕后,调用Condition的signal方法,唤醒线 ...

  6. [Angular] Implementing a ControlValueAccessor

    So when you need to create a ControlValueAccessor? When you want to use a custom component as form c ...

  7. 【转】Boost.Python

    http://edyfox.codecarver.org/html/boost_python.html Boost.Python 是 Boost 中的一个组件,使用它能够大大简化用 C++ 为 Pyt ...

  8. Python实战：如何隐藏自己的爬虫身份

    使用爬虫访问网站,需要尽可能的隐藏自己的身份,以防被服务器屏蔽,在工作工程中,我们有2种方式来实现这一目的,分别是延时访问和动态代理,接下来我们会对这两种方式进行讲解 1.延时访问 见名之意,延时访问 ...

  9. [Codevs 1107][NOIP 1107]等效表达

    主题连接:http://codevs.cn/problem/1107/ 一道非常奇妙的题目. 对于算术表达式一类的问题,能够採用编译原理里的后缀表达式的方式来做.详细做法是分别维护两个栈,一个栈里保存 ...

  10. Google Android Studio Kotlin

    Google Android Studio Kotlin 开发环境配置 Google 近日开发者大会宣布Kotlin成为Android开发的第一级语言,即Android官方开发语言,可见Google对 ...