各位園主,以及博客園的工作人員們
祝大家新年快樂!
我們特意制作了一個簡單的動畫,放在了博客園UAP的WP App里面,沒有WP手機的看youku吧:http://v.youku.com/v_show/id_XODYxMTM4ODM2.html
(有聲音的喲)
這個動畫完全是用Win RT SDK開發制作而成,它的界面元素有:
1)Page,標准的Windows Phone Page
2)title - 新年
3)Progress bar - 在title下面的那個橫條,每秒更新一次進度
4)雪花 - 每100ms產生一個雪花,橫向位置隨機,大小有三種(15,20,30),雪花本身是Segoe UI Symbol字符,一共100個雪花
5)星星 - Segoe UI Symbol字符,一共三種
6)雪人 - Segoe UI Symbol字符,FontSize = 200. 因為是矢量字符,所以再大也不怕
7)雪堆 - Rectangle, fill = white
8)松樹,是靜態圖片,png
9)語錄牌(MS-UAP字樣), 動畫最后能看到,是Border/TextBlock/Rectangle的組合
10)Happy New Year字樣,動畫最后能看到,TextBlock
11) 新年快樂字樣,動畫最后能看到,TextBlock
12)command bar,再看一次 button
以下是這個動畫的截圖:
動畫是如何實現的呢?
今天先簡單介紹一下,主要的目的是讓大家高興,娛樂一下,明年的blog中再細細說。
1)生成一個timer,ThreadPoolTimer.CreatePeriodicTimer,用於生成雪花,100ms間隔。生成后,放入一個List<Snow>中
2)生成第二個timer,用於移動雪花,讓它下落,50ms間隔。每次timer trigger時,檢查List<Snow>中所有的雪花,移動其位置(Y += 5, X不動),使其垂直降落
3)在第二個timer里,檢查落地的雪花(Y坐標大於等於雪堆rectangle上沿兒的),從List<Snow>中刪除,並讓雪堆的厚度++
4)生成第三個timer,用於更新進度條
5)三顆星星,用Storyboard,重復更新其Opacity,從0到1,再返回0,制造閃爍效果
6)語錄牌(ms-uap),用Storyboar, 先移動上來,再倒向一邊,是兩個關鍵幀動畫
7)新年快樂和Happy New Year字樣,一個是更新Opacity, 從0到1,一個是讓其旋轉360度。
想下載App的,和想看代碼的,在這里:
Windows Phone Store App link:
http://www.windowsphone.com/zh-cn/store/app/博客園-uap/500f08f0-5be8-4723-aff9-a397beee52fc
Windows Store App link:
http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059
GitHub open source link:
https://github.com/MS-UAP/cnblogs-UAP
MSDN Sample Code:
https://code.msdn.microsoft.com/CNBlogs-Client-Universal-477943ab
祝大家在新的一年里加緊學習,努力工作,分享代碼,改變世界!
MS-UAP
2014/12/31