Windows Phone开发之路(9) Silverlight之动画

最新推荐文章于 2024-10-17 14:17:43 发布

weixin_34021089

最新推荐文章于 2024-10-17 14:17:43 发布

阅读量45

点赞数

文章标签：操作系统 c#

　　动画(Animation)是Silverlight(以下简称SL)的一项关键特性，因为它提供了一些炫目的效果，而这些是那些基于服务器编程框架所无法仿效的(比如ASP.NET)。在SL中，动画可以实现很多效果，比如当鼠标经过时图标变大，Logo旋转，文本滚入视图等，更可以设计基于浏览器的游戏。

　　动画是SL模型的核心部分，这意味着你不需要使用计时器和事件处理代码来实现它们，而是通过使用少数几个类来声明并配置它们，从而不需要编写一行C#代码就能创造动画效果。

动画基础知识

　　SL动画是一个精简版的WPF动画系统，为了更深入地理解SL动画，需要了解以下关键原则。

　　1,SL执行以时间为基础的动画。需要设定初始状态，最终状态和动画持续时间，SL计算出帧速。
　　2,SL使用基于属性的动画模型。
　　3,要赋予动画一个属性，需要使用一个支持这种数据类型的动画类。例如，如果你想要修改其数据类型为Double类型的属性，必须使用DoubleAnimation类。如果想要修改Canvas的背景色，就需要使用ColorAnimation类。

　　SL中的动画类比较少，只有有限的数据类型可以使用。目前可以用来修改动画属性的数据类型有以下几种：double,object,Color和Print。

演示图板

　　演示图板用来管理动画的时间轴，StoryBoard类提供的最基本功能是使用TargetProperty和TargetName属性来指定特定的属性和特定的元素。简言之，演示图板是动画和要设置的动画属性之间的桥梁。
　　下面的XAML代码定义了一个演示图板。它为一个名为cmdGrow的按钮的Width属性赋予DoubleAnimation类：

<Storyboard x:Name="storyboard">
            <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" From="160" To="300" Duration="0:0:5">
            </DoubleAnimation>
</Storyboard>

创建动画

　　创建动画是一个多步的过程。需要创建3个不同的要素，分别是：执行动画的动画对象，管理动画的演示图板和启动演示图板的事件触发器。下面是一个简单的示例来详细说明创建一个动画的过程。
　　XAML代码：

<UserControl x:Class="Silverlight_Layout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="150" d:DesignWidth="300">

    <!--定义动画对象DoubleAnimation和演示图板Storyboard-->
    <UserControl.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" From="160" To="300" Duration="0:0:5">
            </DoubleAnimation>
        </Storyboard>
    </UserControl.Resources>

    <!--定义一个按钮并添加Click事件-->
    <Grid>
        <Button Name="cmdGrow" Content="This button grows" Width="160" Height="40" Click="cmdGrow_Click"/>
    </Grid>
</UserControl>

　　C#代码：

public partial class MainPage : UserControl
    {
public MainPage()
        {
            InitializeComponent();
        }

private void cmdGrow_Click(object sender, RoutedEventArgs e)//处理cmdGrow按钮的Click事件
        {
            storyboard.Begin();//调用Begin()方法启动与演示图板关联的动画
        }
    }