首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 操作系统 > windows >

windows phone:卡通片(三)

2013-03-26 
windows phone:动画(三)UI线程与渲染线程大部分Silverlight的应用程序运行在一个线程中,这个线程就是UI线

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线程。

热点排行