wp8.1 Study8:页面过渡和主题动画(Page transition and Theme animations)
一、在WP8.1中是有动画(Animation)的:
页面导航(默认为旋转式Turnstile)、PointerDown/up(默认是倾斜)、页面旋转、MenuFlyout出现等等
二、页面过渡(Page transition)
1、默认的动画是旋转式(Turnstile)。
2、除了默认的动画,我们还可以运用ContinuumNavigationTransitionInfo、Stagger、Slide等类似过渡。
三、重写默认过渡/动画
(1)在控件中,我们可以这样做,XAML代码如下:
<!--如在控件ListView中--!>
<ListView x:Name="groupListView"
ItemsSource="{Binding AllGroups}"
SelectionChanged="lstGroups_SelectionChanged"
ItemTemplate="{StaticResource RecipeGroupDataTemplate}"
CommonNavigationTransitionInfo.IsStaggerElement="True"/>
<!--如在控件TextBlock中--!>
<TextBlock Text="{Binding Title}" Grid.Column="1" Grid.Row="0"
Style="{StaticResource ListViewItemTextBlockStyle}" Margin="10,0,0,0"
ContinuumNavigationTransitionInfo.IsExitElement="True"/>
<!--GridView--!>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
(注:EntranceThemeTransition可以被应用在当页面的内容在第一次加载时,进而被呈现出来,从而第一次内容呈现可以提供不同的视觉。)
(2)、改变页面的默认过渡画面
<Page.Transitions>
<TransitionCollection>
<NavigationThemeTransition>
<NavigationThemeTransition.DefaultNavigationTransitionInfo>
<SlideNavigationTransitionInfo />
</NavigationThemeTransition.DefaultNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Page.Transitions>
三、总结:
1、主题过渡可以应用在有UIElement.Transitions属性的单个XAML元素或者可以应用在有特定主题的过渡属性的,如ContentControl.ContentTransitions
2、值得注意的转换:AddDeleteThemeTransition、 EntranceThemeTransition、 PopupThemeTransition、 ReorderThemeTransition、 RepositionThemeTransition.等更多
wp8.1 Study8:页面过渡和主题动画(Page transition and Theme animations)的更多相关文章
- Windows Store App 主题动画
Windows 8系统的动画库中包含了丰富的主题动画,在开发Windows应用商店应用时,使用主题动画编写较少的代码即可实现所期望的动画效果.下面介绍一些常用的主题动画,读者可以根据每种主题动画提供的 ...
- [UWP小白日记-6]页面跳转过度动画
前言 在学习中发现页面导航默认是没有过度动画的,直接就导航过去太粗暴了( ̄へ ̄),于是打算上动画结果不言而喻自己进了坑完全不懂动画,然后就是各种疯狂(´・_・`)的搜索资料看了后终于有点头绪. 再后来 ...
- 黑马vue---46、vue使用过渡类名实现动画
黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...
- 背水一战 Windows 10 (16) - 动画: ThemeAnimation(主题动画)
[源码下载] 背水一战 Windows 10 (16) - 动画: ThemeAnimation(主题动画) 作者:webabcd 介绍背水一战 Windows 10 之 动画 PopInThemeA ...
- 动画: ThemeAnimation(主题动画)
背水一战 Windows 10 之 动画 PopInThemeAnimation - 控件出现时的动画 PopOutThemeAnimation - 控件消失时的动画 FadeInThemeAnima ...
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
- 重新想象 Windows 8 Store Apps (20) - 动画: ThemeAnimation(主题动画)
原文:重新想象 Windows 8 Store Apps (20) - 动画: ThemeAnimation(主题动画) [源码下载] 重新想象 Windows 8 Store Apps (20) - ...
- [UWP小白日记-9]页面跳转过度动画(二)
又打算动手写了 [UWP小白日记-6]页面跳转过度动画 上次写的,这次随着学习的进度使用新的玩法. 最近在搞GIT的学习,结果把好好的项目玩坏,都不知道当时是怎么想的拿在写的APP来玩GIT,害我重写 ...
- Html5页面内使用JSON动画的实现
有一天我们的UI设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的json动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果(写到这里我突然想到一个问题,这么复杂的动画为什么不使用g ...
随机推荐
- linux 多线程信号处理总结
linux 多线程信号总结(一) 1. 在多线程环境下,产生的信号是传递给整个进程的,一般而言,所有线程都有机会收到这个信号,进程在收到信号的的线程上下文执行信号处理函数,具体是哪个线程执行的难以获知 ...
- about shell
摘抄 cat 等 cat主要有三大功能:1.一次显示整个文件.$ cat filename2.从键盘创建一个文件.$ cat > filename只能创建新文件,不能编辑已有文件.3.将 ...
- asc.desc
DESC 是descend 降序意思 asc 是ascend 升序的意思
- Hibernate中的Configuration类
Configuration类用来管理我们的配置文件的信息的,通过它,我们可以通过创建一个configuration实例来管理相应的配置文档,但是通常我们只创建一个configuration实例. 下面 ...
- VirtualBox没有64位选项,无法安装64位的解决方法(zhuan)
http://www.askmaclean.com/archives/vbox-virtualbox-64-bit.html ************************************* ...
- 牛客网 --java问答题
http://www.nowcoder.com/ 主要是自己什么都不怎么会.在这里可以学习很多的! 第一天看题自己回答,第二天看牛客网的答案! 1 什么是Java虚拟机?为什么Java被称作是“平台无 ...
- java 多线程4(死锁)
死锁现象: 死锁原因: 1.存在两个或两个以上的线程. 2.存在两个或两个或两个以上的共享资源. 死锁现象解决的方案: 没有方案只能尽量避免.
- Eclipse 添加SVN
第一种方法没试 第二种方法 可以使用 现在版本 最新为 1.10.x 1.下载最新的Eclipse,我的版本是3.7.2 indigo(Eclipse IDE for Java EE Develop ...
- 修复iPhone的safari浏览器上submit按钮圆角bug
今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——"表单中的input type=submit和input type=reset按钮在iPhone的safari浏览器下圆角有一个bu ...
- JS获取页面元素并修改
//实现代码如下,非常简单<script> (function(){ var ele = document.getElementsByTagName("ul"); // ...