精通Silverlight——12.2.3 鼠标动画示例-简单相册

下面使用鼠标事件创建一个简单的相册示例，该示例的运行效果如图12.3所示。当鼠标悬停在某副图片上时，会自动放大该图片，鼠标离开时，则恢复图片大小。

该示例的思路很简单，在画布上，分别使用三个Image对象引用了三幅图片，并使用ScaleTransform变换图片大小。然后为每幅图片定义了一两个动画，一个是鼠标进入的动画，另外一个是鼠标移出时的动画。

在鼠标事件中，当鼠标移到图片上时，则播放进入动画，当鼠标移出时播放移出动画，这样就形成非常动感的效果。

三幅图的定义基本相同，在此只举一幅图片进行介绍，XAML代码的定义如下。

   <!--相册标题-->

  <TextBlock Canvas.Left="30" Canvas.Top="50" Text="My Photo Album" FontSize="20" Foreground="Red"></TextBlock> 

  <!--先定义第一幅图，命名为img1-->

  <Image x:Name="img1" Canvas.Left="30" Canvas.Top="150"  Canvas.ZIndex="1" Width="150" Height="150" Stretch="Fill"

         Source="images/pic_0.jpg">

    <!--为该图定义缩放变换，并指定x:Name名，以更于动画调用-->

    <Image.RenderTransform>

      <ScaleTransform x:Name="ima1Scale" CenterX="60" CenterY="60"/>

    </Image.RenderTransform>

    <!--这里是在Image.Resources中定义动画，资源动画不会自动播放-->

    <Image.Resources>

      <!--指定故事板名称，以便于后置代码的操作-->

      <!--定义进入动画-->

      <Storyboard x:Name="imgAnimationEnter">

        <!--使用DoubleAnimation定义动画，From和To为1和1.5，表示将图片放大1.5倍-->

        <DoubleAnimation Storyboard.TargetName="ima1Scale" Storyboard.TargetProperty="ScaleX"

                             From="1" To="1.5" Duration="0:0:0.3"/>

        <DoubleAnimation Storyboard.TargetName="ima1Scale" Storyboard.TargetProperty="ScaleY"

                        From="1" To="1.5" Duration="0:0:0.3"/>

      </Storyboard>

      <!--定义移出动画-->

      <Storyboard x:Name="imgAnimationLeave">

        <!--将图片从1.5倍缩回原始图形-->

        <DoubleAnimation Storyboard.TargetName="ima1Scale" Storyboard.TargetProperty="ScaleX"

                             From="1.5" To="1" Duration="0:0:0.3"/>

        <DoubleAnimation Storyboard.TargetName="ima1Scale" Storyboard.TargetProperty="ScaleY"

                        From="1.5" To="1" Duration="0:0:0.3"/>

      </Storyboard>

    </Image.Resources>

  </Image>

接下来，需要在后置代码中处理鼠标进入和移出的事件，这两个事件分别播放imgAnimationEnter和imgAnimationLeave动画，代码如下所示：

            img1.MouseEnter += new MouseEventHandler(img1_MouseEnter);

            img1.MouseLeave += new EventHandler(img1_MouseLeave);

         //--------------------------------------------------------

         //下面是事件实现代码

        //鼠标移出，播放移出动画

        void img1_MouseLeave(object sender, EventArgs e)

        {

            imgAnimationLeave.Begin();

        }

        //鼠标移入，播放移入动画

        void img1_MouseEnter(object sender, MouseEventArgs e)

        {

           imgAnimationEnter.Begin();

        }

现在，可以开始享受基于Silverlight的相册啦。