春节快乐

Hi,

各位园主和博客园的工作人员们，先预祝大家春节快乐！

想任性地给大家送一份春节的礼物，但是我们程序员没多少钱，真是送不起啊，可我们有技术啊，于是我们特地用飞快的速度制作了一个“微软对联”App，2月10日在Windows Phone Store上线了。

link在这里，请大家下载后娱乐一下：

http://www.windowsphone.com/zh-cn/store/app/%E5%BE%AE%E8%BD%AF-%E5%AF%B9%E8%81%94/25035c46-0362-40b9-9c84-fd4a3cafe4df

与别的对联App不同的是，由于在后台有微软MSRA的电脑对联系统的技术支持，用户可以自己拟定上联，然后让电脑给你出一些下联的建议，你可以做进一步的修改，然后再让电脑给你出一些横批的建议，你当然还可以修改，最后出一幅令自己满意的对联！

下面简单介绍一下这个App的开发过程，供大家参考。

主页

主页上有四个动画，可以先声夺人地让用户眼前一亮，自然会对你的App产生好感。

第一个动画：福字在中央从小到大360度旋转着出现，动画定义如下：

<Storyboard x:Name="sb_FuRotate">
            <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
                             From="0" To="360" Duration="0:0:1"/>
            <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                             From="0" To="1" Duration="0:0:1"/>
            <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                             From="0" To="1" Duration="0:0:1"/>
        </Storyboard>

这是三个小动画的组合：

1）做360度平面旋转

2）X轴拉伸，从0到1，也就是从无到原始大小

3）Y轴拉伸，从0到1

第二个动画：五个菜单从左侧顺序飞入，动画定义如下:

<Storyboard x:Name="sb_MenuFlyIn" Completed="sb_Fly_Completed">
            <DoubleAnimation Storyboard.TargetName="menu1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                                                 From="-250" To="0" Duration="0:0:0.20"/>
            <DoubleAnimation Storyboard.TargetName="menu2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                                                 From="-250" To="0" Duration="0:0:0.20" BeginTime="0:0:0.10"/>
            <DoubleAnimation Storyboard.TargetName="menu3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                                                 From="-250" To="0" Duration="0:0:0.20" BeginTime="0:0:0.20"/>
            <DoubleAnimation Storyboard.TargetName="menu4" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                                                 From="-250" To="0" Duration="0:0:0.20" BeginTime="0:0:0.30"/>
            <DoubleAnimation Storyboard.TargetName="menu5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                                                 From="-250" To="0" Duration="0:0:0.20" BeginTime="0:0:0.40"/>
        </Storyboard>

每个子动画的参数都一样，都是从-250的位置，也就是页面左侧外部，在X轴（横向）进入页面。但是如果一起进入效果不好，所以做了一个时间差，从第二个菜单开始，用BeginTime=”0:0:0.10”设置了一个延迟，也就是每隔10毫秒，飞入一个菜单。

第三个动画：福字从中央的位置飞到页面右下角，并作为Setting Page的入口可以点击，动画定义如下：

<Storyboard x:Name="sb_FuMoveDown" Completed="sb_FuMoveDown_Completed">
            <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
                             From="0" To="540" Duration="0:0:1"/>
            <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                             From="1" To="0.2" Duration="0:0:1"/>
            <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                             From="1" To="0.2" Duration="0:0:1"/>
            <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                             From="0" To="100" Duration="0:0:1"/>
            <DoubleAnimation Storyboard.TargetName="img_Fu" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                             From="0" To="100" Duration="0:0:1"/>
        </Storyboard>

也是一些子动画的组合。

1）福字平面旋转540度，最后是倒着的

2）在X轴拉伸到原尺寸的0.2

3）在Y轴拉伸到原尺寸的0.2

4）在X轴横向移动一些距离

5）在Y轴竖向移动一些距离

在XAML中，虽然定义了移动的距离是100，但是考虑到不同手机的屏幕大小不一样，所以需要用code实际算一下：

DoubleAnimation da1 = this.sb_FuMoveDown.Children[3] as DoubleAnimation;
da1.To = this.ActualWidth / 2 - 60;
DoubleAnimation da2 = this.sb_FuMoveDown.Children[4] as DoubleAnimation;
da2.To = this.ActualHeight / 2 - 50;
this.sb_FuMoveDown.Begin();

首先获得实际的屏幕宽度，除以2再减去60，也就是从中间向右移动距离右边60个像素的位置，Y方向同理，然后再执行动画。

第四个动画比较简单，就是“微软对联”4个字总上部飞下来：

<Storyboard x:Name="sb_TitleFlyIn">
            <DoubleAnimation Storyboard.TargetName="tb_Title" 
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                             From="-400" To="0" Duration="0:0:1"/>
        </Storyboard>

这种“飞入”，要在屏幕上先定义好最终的位置，然后用-400来定义起飞的位置，终点位置一定是0。

写对联

写对联一共有3页，拟上联，对下联，题横批：

  

拟上联，首先预定义一些羊年的吉祥话在本地文件里，用JSON格式，页面显示时绑定在ListView上就可以了。注意ListView一定要放在Grid里，如果放在StackPanel里，ListView在屏幕外的部分会把StackPanel拉长，从而造成ListView在屏幕外的部分始终看不到。

对下联，后台调用了MSRA提供的API，自动生成一些建议。

题横批，也是调用了API，自动生成4字横批。

效果页

效果页的制作比较复杂。

这张图是5个字的例子，但是对联允许1-10个字，所以在10个字时，字号要缩小到刚好充满屏幕高度的值，才能使整个效果完美。而且TextBlock里不能竖着写字，用折行也不好控制左右边距，因此我们使用了最原始的方法，一个字一个字的拼上去：

for (int i = 0; i < this.favCouplet.shanglian.Length; i++)
{
                        CharControl cc = new CharControl();
                        cc.DataContext = this.favCouplet.shanglian[i];
                        cc.FontFamily = this.favCouplet.Font;
                        cc.Foreground = this.favCouplet.Color;
                        this.sp_Left.Children.Add(cc);
float scaleValueL = float.Parse((this.scrollLeft.ActualHeight / sp_Left.ActualHeight > this.scrollLeft.ActualWidth / sp_Left.ActualWidth ? this.scrollLeft.ActualWidth / sp_Left.ActualWidth : this.scrollLeft.ActualHeight / sp_Left.ActualHeight).ToString());
                        this.scrollLeft.ChangeView(null, null, scaleValueL);
}

但是要同时保证外边框完整，所以把外边框分成了3个图片元素：

中间的那个可以随着字数任意扩展数量，两头的图片最后拼接上去即可。

搞好整体效果后，可以通过5种方式分享给朋友们：短信，邮件，微博，图片（可供微信分享），云端。

可选效果

底板变成了木纹，红色纸张也变了另一个样子，是通过改Style实现的。福字是可以点击的，点一次旋转180度，可正可倒。

字体

我们使用了3种字体：普通等线字体，姑且叫黑体吧；楷体；隶书。后两种字体在WP中没有，你可以从Windows的ControlPanel->Font中把楷体字体文件拷贝下来，作为Assets的一部分放在资源中，然后当你编辑TextBlock时，会在Text的Font中，最上面，多出一种字体，就是楷体：

我们为什么没有使用书法体从而使对联更有手写感呢？因为书法体是要买的，有知识产权。咱们要注意素质。

云端对联

你写好的对联，如果特满意，可以上传到云端；同时你也可以从云端下载其它人的得意之作，乱改一气，作为自己的作品。点击云端对联可以直接进入效果页。

好吧，先写到这里，一会儿收拾收拾回家了。别忘了下载我们的春联App哟！

http://www.windowsphone.com/zh-cn/store/app/%E5%BE%AE%E8%BD%AF-%E5%AF%B9%E8%81%94/25035c46-0362-40b9-9c84-fd4a3cafe4df

MSRA的网页版对联在这里：http://couplet.msra.cn/

祝大家春节快乐！