深入探索动画技术：从页面过渡到性能优化

### 深入探索动画技术：从页面过渡到性能优化 #### 1. 页面过渡动画基础 在应用程序中，若根元素为 `Grid`，可使用如下代码加载页面： ```vb ' This Grid will host your pages. Private rootGrid As New Grid() Private Sub Application_Startup(ByVal sender As Object, ByVal e As StartupEventArgs) ' Load the first page. Me.RootVisual = rootGrid rootGrid.Children.Add(New Page()) End Sub ``` 为实现页面间的过渡动画，可创建一个基类 `PageTransitionBase`，该类存储故事板、前一页和新页面： ```vb Public MustInherit Class PageTransitionBase Protected storyboard As New Storyboard() Protected oldPage As UserControl Protected newPage As UserControl Public Sub New() AddHandler storyboard.Completed, AddressOf TransitionCompleted End Sub Public Sub Navigate(ByVal newPage As UserControl) ' Set the pages. Me.newPage = newPage Dim grid As Grid = CType(Application.Current.RootVisual, Grid) oldPage = CType(grid.Children(0), UserControl) ' Insert the new page first (so it lies "behind" the old page). grid.Children.Insert(0, newPage) ' Prepared the animation. PrepareStoryboard() ' Perform the animation. storyboard.Begin() End Sub Protected MustOverride Sub PrepareStoryboard() Private Sub TransitionCompleted(ByVal sender As Object, ByVal e As EventArgs) ' Remove the old page, which is not needed any longer. Dim grid As Grid = CType(Application.Current.RootVisual, Grid) grid.Children.Remove(oldPage) End Sub End Class ``` - `Navigate` 方法：添加新旧页面到 `Grid`，调用 `PrepareStoryboard` 方法设置动画，然后启动故事板。 - `PrepareStoryboard` 方法：必须在派生类中重写，用于创建具体的动画对象。 - `TransitionCompleted` 方法：动画完成后，移除旧页面。 #### 2. 擦除过渡动画 擦除过渡动画通过动画化使用不透明度蒙版的画笔来实现。`WipeTransition` 类继承自 `PageTransitionBase`，并覆盖 `PrepareStoryboard` 方法： ```vb Public Class WipeTransition Inherits PageTransitionBase Protected Overrides Sub PrepareStoryboard() ' Create the opacity mask. Dim mask As New LinearGradientBrush() mask.StartPoint = New Point(0,0) mask.EndPoint = New Point(1,0) Dim transparentStop As New GradientStop() transparentStop.Color = Colors.Transparent transparentStop.Offset = 0 mask.GradientStops.Add(transparentStop) Dim visibleStop As New GradientStop() visibleStop.Color = Colors.Black visibleStop.Offset = 0 mask.GradientStops.Add(visibleStop) oldPage.OpacityMask = mask ' Create the animations for the opacity mask. Dim visibleStopAnimation As New DoubleAnimation() Storyboard.SetTarget(visibleStopAnimation, visibleStop) Storyboard.SetTargetProperty(visibleStopAnimation, _ New PropertyPath("Offset")) visibleStopAnimation.Duration = TimeSpan.FromSeconds(1.2) visibleStopAnimation.From = 0 visibleStopAnimation.To = 1.2 Dim transparentStopAnimation As New DoubleAnimation() Storyboard.SetTarget(transparentStopAnimation, transparentStop) Storyboard.SetTargetProperty(transparentStopAnimation, _ New PropertyPath("Offset")) transparentStopAnimation.BeginTime = TimeSpan.FromSeconds(0.2) transparentStopAnimation.From = 0 transparentStopAnimation.To = 1 transparentStopAnimation.Duration = TimeSpan.FromSeconds(1) ' Add the animations to the storyboard. storyboard.Children.Add(transparentStopAnimation) storyboard.Children.Add(visibleStopAnimation) End Sub End Class ``` 使用示例： ```vb Dim transition As New WipeTransition() transition.Navigate(New Page2()) ``` 擦除过渡动画的扩展方式： - 添加过渡属性：增强 `WipeTransition` 类，允许配置擦除方向、擦除时间等。 - 创建更多过渡：从 `PageTransitionBase` 派生类并覆盖 `PrepareStoryboard` 方法。 - 重构 `PageTransitionBase` 代码：将添加和移除页面的代码提取到自定义应用程序类中。 #### 3. 基于帧的动画 Silverlight 提供了仅使用代码创建基于帧的动画的方法，通过响应 `CompositionTarget.Rendering` 事件来实现。以下是一个简单的示例，随机数量的圆圈从 `Canvas` 顶部落到底部： ```vb Public Class EllipseInfo Private _ellipse As Ellipse Public Property Ellipse() As Ellipse Get Return _ellipse End Get Set(ByVal value As Ellipse) _ellipse = value End Set End Property Private _velocityY As Double Public Property VelocityY() As Double G ```