Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform) -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【www.unjs.com - 电脑资料】

Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平、垂直方向的 倾斜变化动画效果,

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

。我们现实生活中的倾斜变化效果是非常常见的,比如翻书的纸张效果, 关门开门的时候门缝图形倾斜变换。在Silverlight中实现一个倾斜变化的动画效果是非常简 单的,如果利用Blend这种强大的设计工具来实现那更是锦上添花。

倾斜效果的动画应用效果其实非常好看,使用倾斜变换需要注意的有两点:倾斜方向和倾 斜中心点。可以以某点为倾斜中心点进行X或Y坐标方向进行倾斜,如下以默认中心店进行的 各种不同程度倾斜的简单示例:


    
        
        
    

    
        
        
    

    
    
        
            
        

    
    
        
            
        

    
    
        
            
        

    

如果使 用Blend来设计倾斜效果的变换动画就非常简单了,只需要在属性面板里设置相关的实现就可 以完成整个倾斜变换动画的设计,如下绘制了一扇门并为其设置开门的效果,开门的时候门 缝间的呈现效果就是以倾斜变换的效果实现的:

查看XAML文件可以发现,Blend生成了如下代码,用于实现开门的效果,需要注意的是这 里应用到了倾斜中心点,们是朝一个方向(X)开关,其呈现的倾斜效果就是Y坐标方向的倾 斜变换,

电脑资料

Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)》(https://www.unjs.com)。如上图所示,设置了Y坐标方向倾斜-17,既形成门向水平下方向倾斜效果。


              Storyboard.TargetName="door"  Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
         
         
     
              Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children) [1].(SkewTransform.AngleY)">
        
    

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

最新文章