在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动画效果,故此我将其称为缩放动画(ScaleTransform)。使用ScaleTransform需要特别关注的有两点:中心点坐标X、Y轴方向的缩放比例,比例值越小则对象元素就越小(既收缩),比例值越大则对象元素就越大(既呈现为放大效果)。

        

        

  Blend对Silverlight里的动画设计支持非常强大,同偏移动画、旋转动画一样简单,要实现缩放动画也只需要对设计好的动画元素进行简单的设计就能完成动画效果的创建。

        

  通过创建动画容器时间线后,如上图进行动画效果属性的设置,Blend便会生成相应的动画编码在XAML文件里,详见如下代码块:


<Storyboard x:Name="Storyboard1">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="truck" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
        <EasingDoubleKeyFrame KeyTime="00:00:03" Value="0.15"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="truck" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
        <EasingDoubleKeyFrame KeyTime="00:00:03" Value="0.15"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

       

  任何一个元素对象,其缩放动画(ScaleTransform)的默认值为(1,1),既保持元素原样不变。如前面所说,比例值越小则对象元素就越小(既收缩),比例值越大则对象元素就越大(既呈现为放大效果)。如上示例就是将缩放比例值设置的0.15,其运行效果如下图所示:

      

  如果上图动画效果使用程序编码去实现,同样的也是很简单的,主要就是利用动画根据时间去控制对象的ScaleTransform变换效果的ScaleX和ScaleY值,详细如下:


/// <summary>
/// 创建对象truck的缩放动画,3秒钟从原始大小缩放到15%的大小
/// </summary>
public void CreateStoryboard()
{
    //创建动画容器时间线
    Storyboard storyboard = new Storyboard();     //创建X轴方向的缩放动画,设置对象缩放到0.15,置对象缩放缓存时间为3秒
    DoubleAnimation doubleAnimation = new DoubleAnimation();
    doubleAnimation.To = 0.15;
    doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 3));
    Storyboard.SetTarget(doubleAnimation, truck);
    Storyboard.SetTargetProperty(doubleAnimation,
        new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));
    storyboard.Children.Add(doubleAnimation);     //创建Y轴方向的缩放动画,设置对象缩放到0.15,置对象缩放缓存时间为3秒
    doubleAnimation = new DoubleAnimation();
    doubleAnimation.SetValue(DoubleAnimation.ToProperty, 0.15);
    doubleAnimation.SetValue(DoubleAnimation.DurationProperty, new Duration(new TimeSpan(0, 0, 3)));
    Storyboard.SetTarget(doubleAnimation, truck);
    Storyboard.SetTargetProperty(doubleAnimation,
        new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));
    storyboard.Children.Add(doubleAnimation);     storyboard.Begin();
}

  如上示例,如果将移动的对象换成一个“车”,执行动画的时候就感觉是一辆车在马路上行驶了。缩放动画(ScaleTransform)在平时的开发中非常适用,不如界面上有一个组件,默认为缩放一半显示,当用户的鼠标指向它的时候将对象放大到正常比例(x,y=>1,1)显示,鼠标离开的时候将对象恢复到默认大小(x,y=>0.5,0.5),此时就可以使用缩放动画(ScaleTransform)去实现。


<Ellipse Width="50" Height="50" Fill="Red" x:Name="ellipse" RenderTransformOrigin="0.5,0.5">
    <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse> ellipse.MouseEnter += (mes, mee) =>
    {
        Storyboard storyboard = new Storyboard();
        DoubleAnimation doubleAnimation = new DoubleAnimation();
        doubleAnimation.To = 1;
        doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(300));
        Storyboard.SetTarget(doubleAnimation, ellipse);
        Storyboard.SetTargetProperty(doubleAnimation,
            new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));
        storyboard.Children.Add(doubleAnimation);         doubleAnimation = new DoubleAnimation();
        doubleAnimation.To = 1;
        doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(300));
        Storyboard.SetTarget(doubleAnimation, ellipse);
        Storyboard.SetTargetProperty(doubleAnimation,
            new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));
        storyboard.Children.Add(doubleAnimation);         storyboard.Begin();
    };
ellipse.MouseLeave += (mls, mle) =>
    {
        Storyboard storyboard = new Storyboard();
        DoubleAnimation doubleAnimation = new DoubleAnimation();
        doubleAnimation.To = 0.5;
        doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(300));
        Storyboard.SetTarget(doubleAnimation, ellipse);
        Storyboard.SetTargetProperty(doubleAnimation,
            new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));
        storyboard.Children.Add(doubleAnimation);         doubleAnimation = new DoubleAnimation();
        doubleAnimation.To = 0.5;
        doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(300));
        Storyboard.SetTarget(doubleAnimation, ellipse);
        Storyboard.SetTargetProperty(doubleAnimation,
            new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));
        storyboard.Children.Add(doubleAnimation);         storyboard.Begin();
    };

  PS:上面代码块仅是为了掩饰缩放动画(ScaleTransform)的使用,如果真要实现圆形对象的鼠标指向放大,移开恢复原状的效果只需要直接设置其宽度(Width)和高度(Height)属性就可以了。

        

Silverlight & Blend动画设计系列三:缩放动画(ScaleTransform)的更多相关文章

  1. Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)

    Silverlight中的动画(Animation)与视图状态管理(Visual State Manager) 结合使用是非常常见的,动画用于管理对象在某段事件段内执行的动画动作,视图状态管理则用于控 ...

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

    当我们在进行Silverlight & Blend进行动画设计的过程中,可能需要设计出很多效果不一的图形图像出来作为动画的基本组成元素.然而在设计过程中可能会出现许多的问题,比如当前绘制了一个 ...

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

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

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

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

  5. Silverlight & Blend动画设计系列十:Silverlight中的坐标系统(Coordinate System)与向量(Vector)运动

    如果我们习惯于数学坐标系,那么对于Silverlight中的坐标系可能会有些不习惯.因为在Silverlight中的坐标系与Flash中的坐标系一样,一切都的颠倒的.在标准的数学坐标系中,X轴表示水平 ...

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

    正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Blend下能够设计出很多满意的动画作品,或许他具体是怎么实现的,通过什么方式实现的我们还是一无所知.本篇将续前面几篇基础动画之上,详细 ...

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

    Silverlight的基础动画包括偏移.旋转.缩放.倾斜和翻转动画,这些基础动画毫无疑问是在Silverlight中使用得最多的动画效果,其使用也是非常简单的.相信看过上一篇<偏移动画(Tra ...

  8. Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)

    用户界面组件.图像元素和多媒体功能可以让我们的界面生动活泼,除此之外,Silverlight还具备动画功能,它可以让应用程序“动起来”.实际上,英文中Animation这个单词的意思是给某物带来生命. ...

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

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

随机推荐

  1. c# 读取网卡Mac

    ///<summary> /// 通过NetworkInterface读取网卡Mac ///</summary> ///<returns></returns& ...

  2. xmlns 与 targetNamespace 的解释

    test.xsd文件: <?xml version="1.0" encoding="UTF-8"?> <xs:schema elementFo ...

  3. leetcode 23. 合并K个排序链表 JAVA

    题目: 合并 k 个排序链表,返回合并后的排序链表.请分析和描述算法的复杂度. 示例: 输入: [   1->4->5,   1->3->4,   2->6 ] 输出: ...

  4. C++的可移植性和跨平台开发

    概述 今天聊聊C++的可移植性问题.如果你平时使用C++进行开发,并且你对C++的可移植性问题不是非常清楚,那么我建议你看看这个系列.即使你目前没有跨平台开发的需要,了解可移植性方面的知识对你还是很有 ...

  5. “全栈2019”Java第三十四章:可变参数列表

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. 本地Windows环境下安装MySql

    Windows 上安装 MySQL Windows 上安装 MySQL 相对来说会较为简单,你需要在 MySQL 下载中下载 Windows 版本的 MySQL 安装包. Download Link: ...

  7. 微信小程序之tabbar切卡

    最近在研究小程序的时候,遇到了一个问题,就是tabbar切卡,在android上有fragment,在RN上也有提供一个第三方的组件来用,微信小程序,好像没有专门的一个组件来实现这个功能,度娘了大半天 ...

  8. [开源] angularjs + Asp.net 前后端分离解决方案

    本文版权归 博客园 萧秦 所有,此处为技术收藏,如有再转,请于篇头明显位置标明原创作者及出处,以示尊重! 作者:萧秦 原文:http://www.cnblogs.com/xqin/p/4862849. ...

  9. C++默认构造函数的问题

    C++ defaul construct :缺省构造函数(默认构造函数) 定义:第一种   构造函数没有参数,即是 A()形式的 第二种   构造函数的全部参数由缺省值提供,A(int a=0,int ...

  10. Jquery sblings

    $("给定元素").siblings(".selected") 中的(".selected")表示筛选给定元素类名为.selected的同胞 ...