精通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的相册啦。