浅谈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更基础的界面的变化。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容

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