Silverlight: 使用 Silverlight 2.0 构建高级 3D 动画

核心提示： 图 3 显示了如何定义其中的一个多面体示例，在该 XAML 的底部，Silverlight: 使用 Silverlight 2.0 构建高级 3D 动画(6)，可看到此示例包含用于定义四面体的四个 Polygon，它们位于自身的 Canvas（即 Model0）之内，但是，不必担心，并且周

图 3 显示了如何定义其中的一个多面体示例。在该 XAML 的底部，可看到此示例包含用于定义四面体的四个 Polygon。它们位于自身的 Canvas（即 Model0）之内，并且周围有一个名为 Ring0（最初并不可见）的圆环或椭圆。共定义了两个 Storyboard 动画，一个用于 MouseEnter，另一个用于 MouseLeave。MouseEnter 动画会立即显示圆环，增大 Model0 Canvas 的大小，并使其在 0.7 秒时间内变得更加不透明。MouseLeave 动画则完全反转这些更改。

Figure3多面体示例

<Canvas x:Name="Canvas0" Width="116.376" Height="116.376"
　Canvas.Left="671.812" Canvas.Top="341.812"
　MouseEnter="TriggerMouseEnter" MouseLeave="TriggerMouseLeave">
　<Canvas.Resources>
　　<Storyboard x:Name="Canvas0MouseEnter">
　　　<DoubleAnimation Duration="00:00:00" Storyboard.TargetName="Ring0"
　　　　Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" />
　　　<DoubleAnimation Duration="00:00:00.7"
　　　　Storyboard.TargetName="Model0"
　　　　Storyboard.TargetProperty="Opacity" From="0.7" To="1.0" />
　　　<DoubleAnimation Duration="00:00:00.7"
　　　　Storyboard.TargetName="Model0Scale"
　　　　Storyboard.TargetProperty="ScaleX" From="0.7" To="1.0" />
　　　<DoubleAnimation Duration="00:00:00.7"
　　　　Storyboard.TargetName="Model0Scale"
　　　　Storyboard.TargetProperty="ScaleY" From="0.7" To="1.0" />
　　</Storyboard>
　　<Storyboard x:Name="Canvas0MouseLeave">
　　　<DoubleAnimation Duration="00:00:00" Storyboard.TargetName="Ring0"
　　　　Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" />
　　　<DoubleAnimation Duration="00:00:00.7"
　　　　Storyboard.TargetName="Model0"
　　　　Storyboard.TargetProperty="Opacity" From="1.0" To="0.7" />
　　　<DoubleAnimation Duration="00:00:00.7"
　　　　Storyboard.TargetName="Model0Scale"
　　　　Storyboard.TargetProperty="ScaleX" From="1.0" To="0.7" />
　　　<DoubleAnimation Duration="00:00:00.7"
　　　　Storyboard.TargetName="Model0Scale"
　　　　Storyboard.TargetProperty="ScaleY" From="1.0" To="0.7" />
　　</Storyboard>
　</Canvas.Resources>
　<Canvas x:Name="Model0" Opacity="0.7"
　　Width="116.376" Height="116.376" >
　　<Canvas.RenderTransform>
　　　<ScaleTransform x:Name="Model0Scale" CenterX="58.188"
　　　　CenterY="58.188" ScaleX="0.7" ScaleY="0.7"/>
　　</Canvas.RenderTransform>
　　<Polygon Canvas.ZIndex="-12545653" Fill="#FFCC0000"
　　　Stroke="#000000" StrokeThickness="1"
　　　Points="97.566,74.278 43.052,40.971 33.836,99.937 "/>
　　<Polygon Canvas.ZIndex="-11948057" Fill="#FFCC0000"
　　　Stroke="#000000" StrokeThickness="1"
　　　Points="43.052,40.971 97.566,74.278 58.188,37.662 "/>
　　<Polygon Canvas.ZIndex="-11309683" Fill="#FFCC0000"
　　　Stroke="#000000" StrokeThickness="1"
　　　Points="33.836,99.937 43.052,40.971 58.188,37.662 "/>
　　<Polygon Canvas.ZIndex="-10481036" Fill="#FFCC0000"
　　　Stroke="#000000" StrokeThickness="1"
　　　Points="97.566,74.278 33.836,99.937 58.188,37.662 "/>
　</Canvas>
　<Ellipse x:Name="Ring0" Opacity="0" Stroke="#FFB47C0D"
　　StrokeThickness="4" Width="116.376" Height="116.376" />
</Canvas>

由于这些 Storyboard 可独立运行，因此每件事都可按您的预期发生，无论用户移动鼠标的速度是快还是慢。通常情况下，一个示例的 MouseLeave 动画会与新选择示例的 MouseEnter 动画同时发生。但是，不必担心，因为 Silverlight 会自动处理多个活动 Storyboard 的并行运行。