浅谈Windowsphone中动画编程的实现方式

Windowsphone中动画编程的实现方式




方法一:基于定时器的实现


例:


在界面中添加一个Buton控件,动画实现Button的高度不断增大。


<Button x:Name=”MyButton” Height=”100” Content=”Button” Click=”MyButton_Click_1”></Button>


在.xaml.cs文件中添加:


Private void MyButton_Click_1(object sender, RoutedEventArgs e)


{


DispatcherTimer timer = new DispatcherTimer();


//定义一个定时器


timer.Interval = TimeSpan.FromMilliseconds(100);


//为定时器设定触发间隔时间


timer.Tick += timer_Tick;


//为定时器添加触发事件


timer.Start();


}


void timer_Tick(object sender, EventArgs e)


{


if(MyButton.Height > 500)


{


     timer.Stop();


     return ;


}


MyButton.Height += 40;


}




这样我们就可以实现一个简单的动画,这种实现方法是我们自己按照动画的原理去实现的,在windowsphone中并不推荐这种实现方式,原因有以下几点:


必须创建一个周期性触发器的计时器。

当触发计时器时会使用事件处理程序计算一些与动画相关的细节,性能差(所有的计算都是UI线程完成的)。

以上特性致使:可扩展性差、动画帧率固定、编写复杂、性能差等。


方法二:使用Storyboard实现


Storyboard storyboard = new Storyboard();


DoubleAnimation animation = new DoubleAnimation();


animation.From = 100;


animation.To = 500;


animation.Duration = new Duration(TimeSpan.FromMilliseconds(1500));




Storyboard.SetTarget(animation, myButton);


Storyboard.SetTargetProperty(animation, new PropertyPath(("UIElement.Height")));


storyboard.Children.Add(animation);


storyboard.Begin();




使用Storyboard注意的步骤:


设置变化的起始和结束的值、间隔时间,关联控件,关联控件属性。使用Storyboard最大的好处是与UI线程进行了分离,不会阻塞UI线程,也不会被UI线程打断。


另外,Storboard也可以作为一种资源,放在.xaml文件中去。如下:


<phone:PhoneApplicationPage.Resources>


        <Storyboard x:Name="storyboard">


            <DoubleAnimation Storyboard.TargetName="rectangle_1" Storyboard.TargetProperty="Height"


                             From="100" To="500" Duration="0:0:5"


                             AutoReverse="True" RepeatBehavior="2"></DoubleAnimation>


        </Storyboard>


</phone:PhoneApplicationPage.Resources>






在.xaml.cs中调用:


private void myButton_Click(object sender, RoutedEventArgs e)


{


            storyboard.Begin();


}








实现方法三:使用UI变化属性实现


在实现方法二中,虽然说UI线程不会阻塞动画线程,但是实际上UI线程阻塞会导致看上去动画阻塞了,因为这种方式去实现动画需要重新绘制UI,但是当UI线程被阻塞时,UI的绘制也就停下了,我们的动画在后台在跑,但是UI上却看不见。因此我们还有另外一种方法去实现动画效果,即利用每个UI元素的变化属性RenderTransform,相关的还有RenderTransformOrigin等。


对方法二做一下改动:


<phone:PhoneApplicationPage.Resources>


        <Storyboard x:Name="storyboard">


            <DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleY"


                             From="1" To="6" Duration="0:0:5"


                             AutoReverse="True" RepeatBehavior="2"></DoubleAnimation>


        </Storyboard>


</phone:PhoneApplicationPage.Resources>




对应的rectangle改为:


<Rectangle x:Name="rectangle_1" Height="80" Fill="Red">


                    <Rectangle.RenderTransform>


                        <ScaleTransform x:Name="scaleTransform" ScaleY="1"></ScaleTransform>


                    </Rectangle.RenderTransform>


                </Rectangle>




我们要理解一下方法二与方法一有什么区别:


在方法二中我们是对rectangle的高度直接进行更改已达到动画的效果,实际上是要UI去重新绘制一个新的rectangle,二方法三中利用的是UI元素的一个基本属性“变化”,系统对这种变化的实现不是去搞一个新的rectangle出来去重绘,而是通过矩阵变化去影响rectangle在界面上的模样。我们可以想象rectangle本身没有变化,而它以之为基准的坐标系发生了变化,比如我们这里坐标系在Y方向上发生了从1倍到6倍的缩放变化,所以我们看上去rectangle就有了变化。实际上这种坐标系的变化并不只是一维、两维的,而是一个三维立体的坐标系,坐标系的变化是依靠一个多维矩阵的运算去实现的。因此方法三中并没有UI的重绘,而是一种比UI更基础的界面的变化。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,223评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,653评论 25 709
  • 头痛的不行,像宿醉刚醒一样,这是白染有意识的第一反应,过了好一会感觉缓过来了点,才来得及打量四周。这竟然是一个古香...
    老黑胖子阅读 1,482评论 0 1
  • 总是看到别人的追求心酸了自己。大概这样特别值得同情,可是瞬间也不知道如何去改变,最终只好从更加迷茫的人当中寻求比较...
    柯深福阅读 1,046评论 0 0
  • 人人都说女孩子不要太要强、太独立、太厉害,不然会不招人喜欢。可是,我若不要强、不独立、不变厉害,谁会在我最无助的时...
    __Diana__阅读 3,582评论 0 1