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

简介: 原文:Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)  Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平、垂直方向的倾斜变化动画效果。
原文: Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)

  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》----本篇中使用的示例素材选自此书

 

版权说明

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

  作      者:Beniao

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

目录
相关文章
|
容器
Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)
原文:Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)   Silverlight的基础动画包括偏移、旋转、缩放、倾斜和翻转动画,这些基础动画毫无疑问是在Silverlight中使用得最多的动画效果,其使用也是非常简单的。
970 0
|
容器 数据可视化 内存技术
Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)
原文:Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)   用户界面组件、图像元素和多媒体功能可以让我们的界面生动活泼,除此之外,Silverlight还具备动画功能,它可以让应用程序“动起来”。
797 0
Silverlight & Blend动画设计系列三:缩放动画(ScaleTransform)
原文:Silverlight & Blend动画设计系列三:缩放动画(ScaleTransform)   在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动画效果,故此我将其称为缩放动画(ScaleTransform)。
889 0
|
容器
Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)
原文:Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)   正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Blend下能够设计出很多满意的动画作品,或许他具体是怎么实现的,通过什么方式实现的我们还是一无所知。
913 0