WPF和Expression Blend開發實例:模擬QQ登陸界面打開和關閉特效

不管在消費者的心中騰訊是一個怎么樣的模仿者抄襲者的形象,但是騰訊在軟件交互上的設計一直是一流的.正如某位已故的知名產品經理所說的:設計並非外觀怎樣,感覺如何.設計的是產品的工作原理.我覺得騰訊掌握了其精髓.在2013版的桌面版QQ中,騰訊的登陸界面在打開的時候有一個展開的過程,而關閉的時候有個收縮的過程.效果如圖:

借助WPF和Expression Blend,我們可以輕易的實現這么一個效果,最終用比較慢的速率實現這個效果如下:

這個效果一共能夠分成兩個部分:展開和收縮,具體的代碼如下:

收縮的代碼:

<Storyboard x:Key="shrink">
                <DoubleAnimation From="1" To="0" Duration="0:0:6"
                                 Storyboard.TargetName="layoutroot"
                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].Offset"/>
                <DoubleAnimation Duration="0:0:4.5" BeginTime="0:0:1.5" From="1" To="0"
                                 Storyboard.TargetName="layoutroot"
                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Offset"/>
                <ColorAnimation  Duration="0" From="#FF000000" To="#00000000" Storyboard.TargetName="layoutroot"
                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Color"/>
 </Storyboard>

展開的代碼:

<Storyboard x:Key="spread">
                <DoubleAnimation From="0" To="1" Duration="0:0:6"
                                 Storyboard.TargetName="layoutroot"
                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].Offset"/>
                <DoubleAnimation Duration="0:0:4.5" BeginTime="0:0:1.5" From="0" To="1"
                                 Storyboard.TargetName="layoutroot"
                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Offset"/>
                <ColorAnimation BeginTime="0:0:6" Duration="0" From="#00000000" To="#FF000000" Storyboard.TargetName="layoutroot"
                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].Color" />
</Storyboard>

其實本質上就是用Storyboard控制OpacityMask的變化來實現效果,OpacityMask的的聲明代碼如下:

<Grid.OpacityMask>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
           <GradientStop Color="#00000000" Offset="0"/>
           <GradientStop Color="#FF000000" Offset="0"/>
     </LinearGradientBrush>
</Grid.OpacityMask>

然后在后台代碼中控制動畫:

在構造函數中添加如下代碼:

InitializeComponent();
sb= (System.Windows.Media.Animation.Storyboard)layoutroot.Resources["spread"];
sb.Completed += (s, e) =>
{
    sb = (System.Windows.Media.Animation.Storyboard)layoutroot.Resources["shrink"];
    sb.Completed += (sender, Event) => Application.Current.Shutdown();
};
if (sb != null)
{
    sb.Begin();
}

關閉按鈕的事件如下:

private void OnClick(object sender, RoutedEventArgs e)
{
    if (sb != null)
       {
           sb.Begin();
       }
}

可以通過調節上面的動畫中的時間來實現和qq登陸界面一樣的效果.這只是一些簡單的動畫,所以可以直接在VS里編寫,如果是一些更加復雜的動畫,那就需要借助Blend來實現了,這個以后有機會再說吧.

 

源代碼下載

http://files.cnblogs.com/youngytj/ShrinkSpread.rar