原文:Silverlight & Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化、波感特效

  当我们在进行Silverlight & Blend进行动画设计的过程中,可能需要设计出很多效果不一的图形图像出来作为动画的基本组成元素。然而在设计过程中可能会出现许多的问题,比如当前绘制了一个椭圆,但是在动画中仅仅只需要椭圆的一半或是更多更少的部分用作与动画元素,这时候就需要对椭圆对象进行相应的处理才能满足我们的需求,那到底该怎么做才能实现最终想要的效果呢?本篇将介绍在Microsoft Expression Blend中进行动画设计的一些常用的功能点和动画设计技巧。

一、转换对象为路径

  将一个对象元素转化为路径是非常有用的,通过路径选择工具可以将转化后的路径对象进行任意拉动变形,以达到理想的设计效果。可以通过Blend菜单中的对象-->路径-->转换为路径以实现对象到路径的转换,也可以使用下图所示的方法进行对象到路径的转换:

        

  就以上面截取椭圆中的一部分为例,就需要将圆(Ellipse)转化为路径后才能才能通过路径工具对路径进行拖动变形,最终以实现想要的图形效果。如下图所示就是对椭圆进行变形处理后将其多余的部分剪切掉,实现了最终的图形效果:

      

<Ellipse Height="174" Width="240" Canvas.Left="64" Canvas.Top="274" Fill="#FF87A50F"/>

  在XAML编码级则将会从Ellipse对象转化为Path对象,如上图最终的图形效果Path对应的XAML编码为:

<Path Fill="#FF87A50F" Stretch="Fill" Height="174" Width="240" Canvas.Left="64" Canvas.Top="274" Data="M240,87 C240,135.04877 186.27417,174 120,174 C53.72583,174 0,135.04877 0,87 C0,38.951225 53.72583,0 120,0 C186.27417,0 240,38.951225 240,87 z"/>

二、波感特效

     波感效果也称幽灵效果,如果为某个对象使用了波感效果,通过对象某种行为触发了该效果则对象边框将会出现像波浪一样的效果,直到动画执行完成后隐藏行为对象。如果从技术实现的角度来理解的话,也就是一个对象的的放大动画行为,通过在放大过程中动态改变其透明度来实现。如果不清楚波感效果具体是什么样的效果的可以查看http://eyeonearth.cloudapp.net/这个站点,点击里面的菜单导航(my location,sms,about,help)中的任意一个就可以进行在线体验。

  比如下面的XAML定义,在界面上绘制了一个渐变填充的圆形:

<Ellipse Height="48" x:Name="RedBall" Width="48" Canvas.Left="355" Canvas.Top="274" MouseLeftButtonUp="RedBall_MouseUp">
    <Ellipse.Fill>
        <RadialGradientBrush GradientOrigin="0.479999989271164,0.46000000834465">
            <RadialGradientBrush.RelativeTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform X="-0.07" Y="-0.21"/>
                </TransformGroup>
            </RadialGradientBrush.RelativeTransform>
            <GradientStop Color="#FFFFFFFF"/>
            <GradientStop Color="#FFFF0000" Offset="1"/>
        </RadialGradientBrush>
    </Ellipse.Fill>
</Ellipse>

  接下来对这个圆形对象进行波感效果设计,本文前面说过波感效果其实就是一个缩放动画,对一个和基础对象一样的对象进行放大到一定程度后将其隐藏。这里需要将上面设计好的圆复制一个作为动画效果设计对象,如下图:

        

  缩放动画效果可以通过ScaleTransform来实现,透明度则使用Opacity属性进行设置,要实现波感效果主要就是通过动画在一定的时间内动态的改变这两项的属性值,ScaleTransform的X,Y默认为1,Opacity默认也是1。

  首先创建一个动画容器时间线,然后移动时间轴到1秒的位置,选中复制后的圆形对象设置ScaleTransform的X,Y为3,Opacity的属性值为0,以实现一个放大透明的动画效果。当对象完全透明后就相当于隐藏了,其实也可将其Visibility属性为Collapsed,将对象隐藏不呈现。如下图:

        

  主要就是设置了三个属性值,这三个属性值都在动画过度中动态改变,通过Blend中进行设置后可以看到生成了如下XAML编码:

<Storyboard x:Name="RedBall_Clicked" Completed="RedBall_Clicked_Completed">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RedBall_Copy" 
    Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RedBall_Copy" 
    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" 
    BeginTime="00:00:00">
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RedBall_Copy" 
    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
    BeginTime="00:00:00">
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

  通过查看前面的代码片段可以看到,给圆形对象添加了事件处理:MouseLeftButtonUp="RedBall_MouseUp",也就是点击了圆对象后需要启动动画的执行:

private void RedBall_MouseUp(object sender, MouseButtonEventArgs e)
{
    RedBall_Copy.Visibility = Visibility.Visible;
    RedBall_Clicked.Begin();
}

  

  同样也给动画添加了完成的事件处理:Completed="RedBall_Clicked_Completed",当动画执行完成后做什么操作。需要做的就是将圆形对象的相关属性设置为最初的属性值,以便在进行第二次动画的时候能够正确无误的实现其效果。

private void RedBall_Clicked_Completed(object sender, EventArgs e)
{
    RedBall_Clicked.Stop();
    RedBall_Copy.Opacity = 1;
    RedBall_Copy.Visibility = Visibility.Collapsed;
}

  OK,到这里就完成了整个波感特效的设计制作,最终的运行效果如下图所示,如果你对波感特效感兴趣,建议你下载本文示例代码运行,进一步的体验波感特效。

        

版权说明

本文属原创文章,欢迎转载且注明文章出处,其版权归作者和博客园共有。

作      者:Beniao

文章出处:http://beniao.cnblogs.com/  或  http://www.cnblogs.com/

Silverlight Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化、波感特效...相关推荐

  1. Silverlight Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)

    原文:Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations) 正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Bl ...

  2. Silverlight Blend动画设计系列四:倾斜动画(SkewTransform)

    Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平.垂直方向的倾斜变化动画效果.我们现实生活中的倾斜变化效果是非常常见的,比如翻书的纸张效果,关门开门的时候门缝 ...

  3. Silverlight Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)

    Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior) 原文:Silverlight & Blend动画设计系列八: ...

  4. Silverlight Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)...

    说到对象的旋转,或许就会联想到对象角度的概念.对象的旋转实现实际上就是利用对象的角度改变来实现的位置变换,在<Silverlight & Blend动画设计系列二:旋转动画(Rotate ...

  5. Silverlight Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)...

    模糊效果(BlurEffect)与阴影效果(DropShadowEffect)是两个非常实用和常用的两个特效,比如在开发相册中,可以对照片的缩略图添加模糊效果,在放大照片的过程中动态改变照片的大小和模 ...

  6. Silverlight Blend动画设计系列三:缩放动画(ScaleTransform)

    原文:Silverlight & Blend动画设计系列三:缩放动画(ScaleTransform) 在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐 ...

  7. Silverlight Blend动画设计系列二:旋转动画(RotateTransform)

    原文:Silverlight & Blend动画设计系列二:旋转动画(RotateTransform) Silverlight的基础动画包括偏移.旋转.缩放.倾斜和翻转动画,这些基础动画毫无疑 ...

  8. 简述传统动画跟计算机动画的异同点,Flash动画设计与传统动画设计的特点比较研究...

    Flash动画设计与传统动画设计的特点比较研究 计算机是现代社会发展的科技产物,在很大程度上丰富了人们的视野,也加强了人们与外界的联系,传统的动画设计方法不能赋予动画更多的内容,而运用了Flash动画 ...

  9. 动画与计算机技术的区别,传统动画设计与Flash动画设计的区别

    传统动画设计与Flash动画设计的区别 随着时代的发展,人们对动画的质量提出了更高的要求.下面小编为大家搜索整理了关于传统动画设计与Flash动画设计的特点比较,欢迎参考阅读,希望对大家有所帮助! 计 ...

最新文章

  1. python可以干嘛知乎-一行Python代码能做什么?
  2. CTF ---pwndbg 调试常用命令
  3. bzoj 1031 [JSOI2007]字符加密Cipher 后缀数组
  4. React Native 实现物流进度信息
  5. python平均数 中位数函数_R和python语言如何求平均值,中位数和众数
  6. 可编程led灯带原理_技术分享:二极管发光原理与LED灯带
  7. 2013年中国区Skyline软件价格体系
  8. 选址(重心法、微分法迭代)
  9. pycharm配色方案
  10. 不要再重复造轮子了,Hutool 这款开源工具类库贼好使
  11. 2018年新浪微博产品笔试题目
  12. C语言程序设计现代方法(第二版)十二章编程题答案
  13. Maven的安装、配置及使用入门
  14. MOSFET类型识别小结
  15. cmos电路多余输入端能否悬空_CMOS门电路的多余输入端可以悬空,悬空时相当于输入为逻辑1。...
  16. 苹果电脑可以装windows系统吗_Linux系统安装Windows软件? 通过这个工具可以做到...
  17. mac下PHP安装mongodb的扩展
  18. 测试技术与信号处理实验报告
  19. java kumo生成词云
  20. Cadnece安装过程提示已经存及删除全部注册表方法

热门文章

  1. Android开发资料学习(转载/链接)
  2. mysql与sqlserver之间的关系转换
  3. 安装cactiez v11对windows和linux系统进行监控
  4. Switch入门第一讲
  5. CSS:布局的三个关键属性:float、position、display
  6. 微软副总裁Bob Muglia对Silverlight的公开道歉信
  7. JSON 数据格式解析(转)
  8. 一个月6次泄露,为啥大家用Elasticsearch总不设密码?
  9. Linux虚拟机基本操作
  10. Linux基础 常用命令学习