欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Windows Phone 7两个页面动画跳转

程序员文章站 2022-06-30 23:36:10
两个页面之间创建带有动画的过渡效果基本步骤: ①截获当前任何表明用户正在离开当前页面的操作 ②启动一个动画故事板来隐藏当前页面 ③导航到下一个页面 ④截获新页面的导航 ⑤启动一个动画故事板来显示新页...

两个页面之间创建带有动画的过渡效果基本步骤:
①截获当前任何表明用户正在离开当前页面的操作
②启动一个动画故事板来隐藏当前页面
③导航到下一个页面
④截获新页面的导航
⑤启动一个动画故事板来显示新页面
 
首先新建一个windows phone的应用程序
mainpage.xaml里面的动画效果代码:
 1 <phone:phoneapplicationpage.resources>
 2         <storyboard x:name="hidepage">
 3             <doubleanimationusingkeyframes
 4                 storyboard.targetproperty="(uielement.rendertransform).(compositetransform.translatex)"
 5                 storyboard.targetname="phoneapplicationpage">
 6                 <easingdoublekeyframe keytime="0" value="0"/>
 7                 <easingdoublekeyframe keytime="0:0:2" value="-480"/>
 8             </doubleanimationusingkeyframes>
 9             <doubleanimationusingkeyframes
10                 storyboard.targetproperty="(uielement.rendertransform).(compositetransform.translatey)"
11                 storyboard.targetname="phoneapplicationpage">
12                 <easingdoublekeyframe keytime="0" value="0"/>
13                 <easingdoublekeyframe keytime="0:0:2" value="-800"/>
14             </doubleanimationusingkeyframes>
15         </storyboard>
16     </phone:phoneapplicationpage.resources>
17     <phone:phoneapplicationpage.rendertransform>
18         <compositetransform/>
19     </phone:phoneapplicationpage.rendertransform>

然后拖一个button控件,并触发click事件,导航到page1.xaml
1 private void button1_click(object sender, routedeventargs e)
2         {
3             this.navigationservice.navigate(new uri("/page1.xaml", urikind.relative));
4         }

在mainpage.xaml.cs里面重写onnavigatingfrom方法:
 1 protected override void onnavigatingfrom(system.windows.navigation.navigatingcanceleventargs e)
 2         {
 3             base.onnavigatingfrom(e);
 4
 5             if (uritonavigateto == null)
 6             {
 7                 e.cancel = true;
 8                 uritonavigateto = e.uri;
 9                 this.hidepage.begin();
10                 this.hidepage.completed += new eventhandler(hidepage_completed);
11             }
12             else
13             {
14                 uritonavigateto = null;
15             }
16         }
17
18         private void hidepage_completed(object sender, eventargs e)
19         {
20             this.navigationservice.navigate(new uri("/page1.xaml", urikind.relative));
21         }

接着新建一个windowsphone页面page1.xaml
page1.xaml的动画效果代码如下:
 1 <phone:phoneapplicationpage.resources>
 2         <storyboard x:name="displaypage">
 3             <doubleanimationusingkeyframes
 4                 storyboard.targetproperty="(uielement.rendertransform).(compositetransform.scalex)"
 5                 storyboard.targetname="phoneapplicationpage">
 6                 <easingdoublekeyframe keytime="0" value="0"/>
 7                 <easingdoublekeyframe keytime="0:0:3" value="1"/>
 8             </doubleanimationusingkeyframes>
 9             <doubleanimationusingkeyframes
10                 storyboard.targetproperty="(uielement.rendertransform).(compositetransform.scaley)"
11                 storyboard.targetname="phoneapplicationpage">
12                 <easingdoublekeyframe keytime="0" value="0"/>
13                 <easingdoublekeyframe keytime="0:0:2" value="1"/>
14             </doubleanimationusingkeyframes>
15             <doubleanimationusingkeyframes
16                 storyboard.targetproperty="(uielement.rendertransform).(compositetransform.rotation)"
17                 storyboard.targetname="phoneapplicationpage">
18                 <easingdoublekeyframe keytime="0" value="-720"/>
19                 <easingdoublekeyframe keytime="0:0:2" value="0"/>
20             </doubleanimationusingkeyframes>
21         </storyboard>
22     </phone:phoneapplicationpage.resources>
23     <phone:phoneapplicationpage.rendertransform>
24         <compositetransform centerx="240" centery="400"/>
25     </phone:phoneapplicationpage.rendertransform>

然后在page1.xaml.cs的初始化函数里写如下代码:
1 public page1()
2         {
3             initializecomponent();
4
5             this.displaypage.begin();
6         }

就这样,一个最基本的两个页面动画跳转效果就做好了

 下面是效果截图
Windows Phone 7两个页面动画跳转
Windows Phone 7两个页面动画跳转
Windows Phone 7两个页面动画跳转
Windows Phone 7两个页面动画跳转
  


摘自  小胡子