黑马程序员技术交流社区

标题: 在windows phone上面实现动画的两种时间方式 [打印本页]

---

作者: 卞云鹏    时间: 2012-8-3 18:35
标题: 在windows phone上面实现动画的两种时间方式
我们在手机上面看到的手机动画，，当我们暂停的时候然后再开始的时候会出现两种效果：
1，动画沿着刚刚静止的画面继续播放、
2，动画随着时间而变化，跳过刚刚的暂停的部分
这犹如我们在电视上面看直播和在网络上面看重播一样（写的不好大家多多原谅哈 ）
下面我将用一个小程序在windows phone上来演示一下（我是.net 3期的哈！）
首先是前台代码，我们将整个的Grid分成四个部分，并且在每一个部分中都要添加一些控件
我用两个textblock 控件来实现动画的基础，就是说它们是动的，动画的主角
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">   效果图
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0"
                      Text="Frame-based"
                      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="Frame-based"
                      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="start"
                    Width="300"
                    Height="120"
                    HorizontalAlignment="Center" Click="Button_Click" />



            <MediaElement Name="ww" Grid.Row="3"
                          Height="200" Width="200" Source="Video/Wildlife.wmv"
                           HorizontalAlignment="Center"
                          AutoPlay="True"
                          VerticalAlignment="Center"/>

        </Grid>
    </Grid>

前台设计好以后我们将开始写后台，写的不好大家多多原谅哈
要知道如果像重播那样的话那是依靠帧来实现的
而中间不因为是停止而暂停的是依靠 时间的间隔来实现的（TimeSpan）来实现的，
点击start 暂停（我设置的了暂停5秒，然后继续自动播放）
public partial class MainPage : PhoneApplicationPage
    {
        DateTime startTime;
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
            startTime = DateTime.Now;
            CompositionTarget.Rendering += OnCompositionTargetrendering;

            CompositionTarget.Rendering += Oncommand;
        }
        public void Oncommand(Object sender, EventArgs e)
        {
            rotate1.Angle = (rotate1.Angle + 0.2) % 360;
            //第二个以时间来确定角度
            TimeSpan span = DateTime.Now - startTime;//利用现在时间减去刚刚开始的时间
            rotate2.Angle = (span.TotalMinutes * 360) % 360;
        }

        public void OnCompositionTargetrendering(Object sender, EventArgs e)
        {
            rotate1.Angle = (rotate1.Angle + 0.2) % 360;//利用帧数来实现

            TimeSpan elapsedTime = DateTime.Now - startTime;

            rotate2.Angle = (elapsedTime.TotalMinutes * 360) % 360;
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {

            Thread.Sleep(5000);
        }


    }   

运行时的效果

暂停时的效果

继续运行的效果（注意此时的二者的对比）



好了完成了！

---

作者: 许庭洲    时间: 2012-8-5 13:32
1，前台代码grid控件中用到了两个TextBlock 控件，一个Button 控件和一个媒体播放器控件；
2，后台代码用到一个构造函数，实现了初始化和两个方法的调用；
3，程序结构严谨，值得学习！

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2