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 ...
随机推荐
- 【Todo】【读书笔记】机器学习实战(Python版)
还是把这本书的读书笔记,单独拎出来吧,因为内容比较多. P38. Logistic 回归. 觉得还蛮实用的.囫囵吞枣看的.要细看.
- html的空格和换行显示【摘自网络】
一.HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格,不管是内容还是标签之间. 二.当我们想让它们在同一行连续显示时,就让所有的代码之间没有空格,也不要换行. 三.当我们想要显示连续 ...
- 转!!java反射机制
Java 反射机制 基本概念 在Java运行时环境中,对于任意一个类,能否知道这个类有哪些属性和方法?对于任意一个对象,能否调用它的任意一个方法? 答案是肯定的. 这种动态获取类的信息以及动态调用对象 ...
- Embed对象
1.EMBED 元素 | embed 对象 http://www.jb51.net/shouce/dhtml/objects/EMBED.html 2. 3.
- phalcon: 资源文件管 理 引入css,js
<?php class IndexController extends Phalcon\Mvc\Controller { public function index() { //添加本地css资 ...
- linux gcc 编译动态类库(.so)和静态类库(.a)
linux gcc 编译动态类库(.so)和静态类库(.a) 我的编译环境 ubuntu desktop 16.04 一:测试代码 测试有3个文件:AB.h,AB.c,test.c //AB.h vo ...
- centos7 修改selinux 开机导致 faild to load SELinux policy freezing 错误
centos7 修改selinux 开机导致 faild to load SELinux policy freezing 错误 之前把selinux关闭了,这次想打开selinux,于是修改了 /e ...
- java 集合(ArrayList)
ArrayList: ------------|Collection 单列集合的跟接口 ----------------------|List 有序,可重复. ------------------- ...
- React添加事件
定义个组件 组件首字母大写,调用: ReactDOM.render(<Hello></Hello>,document.getElementById('box'));
- python中join的用法
str.join(sequence) # 将序列中的元素以str字符连接生成一个新的字符串 list1 = ['a', 'b', 'c'] new_str = '-'.join(list1) # 输出 ...