原文: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. 极光特效 html,FLASH教程：用Flash制作极光文字特效动画教程 - 学无忧

    案例描述: 本例主要讲解用Flash制作极光文字特效动画教程,本例主要使用"发光"."模糊''滤镜和遮罩功能来制作极光文字效果. 学习要点:文字处理的基本技法,关键帧动画 ...

  2. Blend制作的下载动画

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

  3. 用 Microsoft Expression Design 制作图形资源

    用 Microsoft Expression Design 制作图形资源 转自http://www.cnblogs.com/allofalan/archive/2012/04/09/2439010.h ...

  4. 使用expression design制作silverlight LOGO那种烟雾效果教程（翻译）

    很久没有给网站更新东西了,因为很忙,马上又要考四级了,多半又过不了.惨啊....因为英语的原因吧,就翻译了国外的一篇技术文章,这样即更新了网站又学了英语. 原文地址:http://geekswithb ...

  5. WPF 使用 Expression Design 画图导出及使用 Path 画图

    WPF 使用 Expression Design 画图导出及使用 Path 画图 目录 WPF 使用 Expression Design 画图导出及使用 Path 画图 一.软件介绍 二.Micros ...

  6. 用Tableau制作滚动时间轴（下）

    上一篇文章<用Tableau制作滚动时间轴(上)>我们介绍了滚动时间轴的基本制作方法.这篇文章我们继续丰富和美化时间轴. 制作内容显示工作表 由于数据集内有大量的文字描述内容,那么让这些内 ...

  7. 图片向上滚动字幕代码html,如何通过制作滚动字幕的软件实现这种片尾的向上滚动字幕效果...

    如何制作滚动字幕 特殊滚动类字幕制作 向上向下向左向右滚动字幕制作效果 含拖动和消失全程 真是酷B了爽呆了,赶快学习吧! 电影.连续剧等影视作品片尾,都会在播放片尾曲时,出现向上滚动的字幕,显示演员表 ...

  8. marquee滚动起始位置_巧用喵影关键帧制作滚动水印，让视频小偷无可盗

    视频创作者最奔溃瞬间,不是翻遍了所有网站还找不到合适的素材,也不是作品快完成了却发现电脑死机,而是自己呕心沥血做出来的视频被盗了,结果盗版视频的播放量还更高!! ​理想的解决方法就是给视频打上水印. ...

  9. html 字幕飘动效果,html 滚动字幕 制作滚动字幕效果 参数

    制作滚动字幕效果:marquee标签 如下:<MARQUEE direction=up height=146 οnmοuseοut=start() οnmοuseοver=stop() scro ...

最新文章

  1. 利用opencv进行移动物体检测
  2. HDU1002 大数相加
  3. idea2020.2.2怎么创建web项目_创建Vue3.0的项目
  4. mysql5.7 的 user表的密码字段从 password 变成了 authentication_string
  5. MINIGUI交叉编译【转】
  6. exchange功能在线测试
  7. tcp/udp/socket 端口映射，转发小工具
  8. msfconsole php,msfconsole从入门到放弃
  9. OP-TEE 编译流程
  10. 分号（；）和逗号（，）的用法
  11. svchost.exe 占用网络资源
  12. 解决vite-plugin-eslint缓存导致eslint一直报错的方案
  13. 【基础数学】单射、满射和双射的定义、区别
  14. pyqt5中sender方法介绍_PyQt5学习记录(二):Event sender
  15. 短代码 html,WooCommerce 默认提供的简码短代码
  16. 2022-2028年全球与中国机身导线行业产销需求与投资预测分析
  17. 怎么学python入门？python新手学习路线
  18. 如何用python抓取文献_浅谈Python爬虫技术的网页数据抓取与分析
  19. Windows远程桌面出现CredSSP加密数据修正问题解决方案
  20. 替代RTD2171U|CS5266设计电路|TYPEC转HDMI方案|CS5266AN

热门文章

  1. JavaScript 条件语句和循环语句
  2. MySQL_数据类型
  3. kail linux更新源、挂载
  4. numpy.random模块常用函数
  5. 2013递归求解单链表中的结点个数（C++，附递归函数思路讲解与手绘图）
  6. bootstrap之glyphicon字体图标
  7. exec vs sp_executesql
  8. c++刷题（18/100）树
  9. Mobx | 强大的状态管理工具 | 可以用Mobx来替代掉redux
  10. python中的tab补全功能添加