Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平、垂直方向的倾斜变化动画效果。我们现实生活中的倾斜变化效果是非常常见的,比如翻书的纸张效果,关门开门的时候门缝图形倾斜变换。在Silverlight中实现一个倾斜变化的动画效果是非常简单的,如果利用Blend这种强大的设计工具来实现那更是锦上添花。
倾斜效果的动画应用效果其实非常好看,使用倾斜变换需要注意的有两点:倾斜方向倾斜中心点。可以以某点为倾斜中心点进行X或Y坐标方向进行倾斜,如下以默认中心店进行的各种不同程度倾斜的简单示例:
<Grid x:Name="LayoutRoot" Background="White" Margin="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Image Source="11.jpg" Grid.Row="0" Grid.Column="0"/>
    <Image Source="11.jpg" Grid.Row="0" Grid.Column="1">
        <Image.RenderTransform>
            <SkewTransform AngleX="20" AngleY="0"></SkewTransform>
        </Image.RenderTransform>
    </Image>
    <Image Source="11.jpg" Grid.Row="1" Grid.Column="0">
        <Image.RenderTransform>
            <SkewTransform AngleX="0" AngleY="-5"></SkewTransform>
        </Image.RenderTransform>
    </Image>
    <Image Source="11.jpg" Grid.Row="1" Grid.Column="1">
        <Image.RenderTransform>
            <SkewTransform AngleX="20" AngleY="15"></SkewTransform>
        </Image.RenderTransform>
    </Image>
</Grid>
        
  如果使用Blend来设计倾斜效果的变换动画就非常简单了,只需要在属性面板里设置相关的实现就可以完成整个倾斜变换动画的设计,如下绘制了一扇门并为其设置开门的效果,开门的时候门缝间的呈现效果就是以倾斜变换的效果实现的:
 
查看XAML文件可以发现,Blend生成了如下代码,用于实现开门的效果,需要注意的是这里应用到了倾斜中心点,们是朝一个方向(X)开关,其呈现的倾斜效果就是Y坐标方向的倾斜变换。如上图所示,设置了Y坐标方向倾斜-17,既形成门向水平下方向倾斜效果。
<Storyboard x:Name="Storyboard1">
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" 
        Storyboard.TargetName="door" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
        <EasingPointKeyFrame KeyTime="00:00:00" Value="1,0.5"/>
        <EasingPointKeyFrame KeyTime="00:00:03" Value="1,0.5"/>
    </PointAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="door" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)">
        <EasingDoubleKeyFrame KeyTime="00:00:03" Value="-17"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
    
推荐资源:
MSDN:http://msdn.microsoft.com/zh-cn/library/cc189090(VS.95).aspx
MSDN:http://msdn.microsoft.com/zh-cn/system.windows.media.skewtransform(de-de).aspx
Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)
Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)
Silverlight & Blend动画设计系列三:缩放动画(ScaleTransform)
《Function Silverlight 3 Animation》----本篇中使用的示例素材选自此书

Silverlight Blend动画设计系列四:倾斜动画(SkewTransform)相关推荐

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

    原文:Silverlight & Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化.波感特效 当我们在进行Silverlight & Bl ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. Silverlight Blend动画设计系列

    第一至三章地址:http://www.silverlightchina.net/plus/search.php?keyword=Silverlight+Blend%B6%AF%BB%AD%C9%E8% ...

  9. Silverlight Blend动画设计系列十一:沿路径动画(Animation Along a Path)

    Silverlight 提供一个好的动画基础,但缺少一种方便的方法沿任意几何路径对象进行动画处理.在Windows Presentation Foundation中提供了动画处理类DoubleAnim ...

最新文章

  1. 工具_SublimeText
  2. python怎么下载-下载 python
  3. Deep learning前的图像预处理
  4. MySQL - 库表设计之IP和TIMESTAMP的处理
  5. wcdma系统随机接入过程的流程图_重庆:降低轨道场景多系统合路互调干扰的研究...
  6. 【APP】centos 5.X安装网络和系统监控管理平台--OpenNMS
  7. TFS中的工作项(六)
  8. C++学习之路 | PTA乙级—— 1028 人口普查 (20 分)(精简)
  9. 菜鸟数据科学家五大误区
  10. C++静态联编与动态联编
  11. 将QVTKWidget嵌入到QT窗体,实现点云可视化的基本操作
  12. 2022张宇考研基础30讲 第八讲 一元函数积分学的概念与计算
  13. 雅虎前端优化35条军规
  14. 定点补码加减法运算_定点整数的加减法
  15. 作业中关于H5中动画的实现——animation
  16. 酷6 期待“化茧成蝶”
  17. ajax请求存在不安全的问题有哪些?如何解决这些不安全的很问题
  18. android os适配机型,系统和支持机型对比
  19. 实用!四个方法训练自己的设计思维
  20. EBCDIC、ASCII与EBCDIC的关系及相互转化

热门文章

  1. TortoiseGit 连接oschina不用每次输入username和password的方法
  2. easyui_动态添加隐藏toolbar按钮
  3. 控制反转---依赖注入理解
  4. 程序界面把程序员这条路走下去
  5. windows server 2003磁盘管理
  6. 推荐 正则表达式入门教程
  7. 5000万用户数据泄露,大数据时代隐私保护困难重重
  8. PyCUDA学习:gpuarray与kernel的抽象原型
  9. Eclipse装了插件之后插件没反应启用不了或不显示问题的解决办法
  10. 从五个方面做IT职业规划