windows phone：动画(三)

UI线程与渲染线程

大部分Silverlight的应用程序运行在一个线程中，这个线程就是UI线程(使用的是CPU)。UI线程处理触摸输入、布局和CompositionTarget.Rendering事件。

而有些动画则运行在一个使用GPU(即图形处理单元)的线程上，这个线程称为渲染线程。这个渲染线程为一些double类型的属性制作动画，特别是下面这些double类型的属性：

设置到RenderTransform属性的变形；

设置到Projection属性的透视变形；

Canvas.Left和Canvas.To附加属性；

Opacity属性；

任何导致矩形发生裁切的元素；

而通过Color和Point类型的属性制作的动画仍然在UI线程中运行。

下面示例演示了UI线程与渲染线程：

xaml文件片段如下所示：

    <phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation Storyboard.TargetName="rotate2"
                             Storyboard.TargetProperty="Angle"
                             From="0" To="360" Duration="0:1:0"
                             RepeatBehavior="Forever" />
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

    ...

     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0"
                       Text="UI Thread"
                       FontSize="{StaticResource PhoneFontSizeLarge}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       RenderTransformOrigin="0.5 0.5">
                <TextBlock.RenderTransform>
                    <RotateTransform x:Name="rotate1" />
                </TextBlock.RenderTransform>
            </TextBlock>

            <TextBlock Grid.Row="1"
                       Text="Render Thread"
                       FontSize="{StaticResource PhoneFontSizeLarge}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       RenderTransformOrigin="0.5 0.5">
                <TextBlock.RenderTransform>
                    <RotateTransform x:Name="rotate2" />
                </TextBlock.RenderTransform>
            </TextBlock>

            <Button Grid.Row="2"
                    Content="Hang for 5 seconds"
                    HorizontalAlignment="Center"
                    Click="OnButtonClick" />
        </Grid>

代码文件片段如下：

    public partial class Page1 : PhoneApplicationPage
    {
        public Page1()
        {
            InitializeComponent();
            storyboard.Begin();
            startTime = DateTime.Now;
            CompositionTarget.Rendering += OnCompositionTargetRendering;
        }
        DateTime startTime;

        void OnCompositionTargetRendering(object sender, EventArgs args)
        {
            TimeSpan elapsedTime = DateTime.Now - startTime;
            rotate1.Angle = (elapsedTime.TotalMinutes * 360) % 360;
        }

        void OnButtonClick(object sender, RoutedEventArgs args)
        {
            Thread.Sleep(5000);
        }
    }

运行程序后，两个文本几乎一致旋转，但当你按下按钮时就会发现：使用CompositionTarget.Rendering来旋转的文本停止了5秒，但是使用DoubleAnimation旋转的文本一直在运行。为什么呢？这是因为使用DoubleAnimation旋转的动画是运行在渲染线程中的，而Thread.Sleep()停止的是当前线程，这里即UI线程。