如上所示,在找到目标Storyboard后开始执行其中的所有动画。
重新加载PHPMenu.php,并尝试鼠标滑过我们的紫色按钮,将看到一些平滑变色的效果。不过目前这种效果仅在按钮上有,为了让每个控件都有动画效果,还需要做更多的工作。幸运的是,微软对Silverlight引擎增加了一些修改,使得参数可以在JavaScript内更容易的被引用。
使用以下代码替换我们刚才增加的javascript:
function mouseEntered(sender, mouseEventArgs)
{
sender.findName("fadeIn").Stop();
sender.findName("fadeInDouble")["Storyboard.TargetName"] = sender.Name;
sender.findName("fadeIn").Begin();
}
function mouseLeft(sender, mouseEventArgs)
{
sender.findName("fadeOut").Stop();
sender.findName("fadeOutDouble")["Storyboard.TargetName"] = sender.Name;
sender.findName("fadeOut").Begin();
}
function mouseEntered(sender, mouseEventArgs)
{
sender.findName("fadeIn").Stop();
sender.findName("fadeInDouble")["Storyboard.TargetName"] = sender.Name;
sender.findName("fadeIn").Begin();
}
function mouseLeft(sender, mouseEventArgs)
{
sender.findName("fadeOut").Stop();
sender.findName("fadeOutDouble")["Storyboard.TargetName"] = sender.Name;
sender.findName("fadeOut").Begin();
}
两个重要的地方是:
•在对一个新目标设定动画之前,我们需要停止当前目标的动画。
•TargetName的父是动画而非Storyboard。一旦动画被设定到一个新目标,我们可以再次打开Storyboard。
尝试运行PHPMenu.php。我们将看到一些漂亮的鼠标悬停动画,从半透明到全不透明的渐变效果。
利用前面提到的4个基本文件,我们已经快速创建了一个动态菜单,并为其增加一些简单但优雅的悬停动画效果。记住我们刚才创建的一切都是可以通过参数进行调整的:控件的类型、它的大小、颜色、阴影、形状和阴影的方向等。
通过组合XAML和JavaScript,我们能够为自己的PHP应用增加Silverlight效果,而且不用使用任何额外的开发工具。由此不难看出,Silverlight确实能够为PHP应用带来新的东西。