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 ...
随机推荐
- Object Pascal 控制语句
控制语句 1.常量声明语句常量在声明时就被赋予了一个值,在程序执行过程中是不可改变的. 格式 const 常量名 :数据类型 = 值 下面的例子声明了3 个常量: const Pi = 3.14159 ...
- android实现系统电话通话过程中自动感应黑屏
package com.developmenttools.customui.activity; import java.util.HashSet;import java.util.Set; impor ...
- hdu 4521 小明系列问题——小明序列(线段树 or DP)
题目链接:hdu 4521 本是 dp 的变形,却能用线段树,感觉好强大. 由于 n 有 10^5,用普通的 dp,算法时间复杂度为 O(n2),肯定会超时.所以用线段树进行优化.线段树维护的是区间内 ...
- ACM比赛经验
这篇博客是转别人的,觉得很好,希望能在以后的现场赛中用上:ACM比赛经验 推荐此篇文章打印,与模板放在一起. 1. 比赛中评测会有些慢,偶尔还会碰到隔10分钟以上才返回结果的情况,这段时间不能等结果, ...
- 如何设置DIV水平、垂直居中
一.水平居中 需要设置两点: 1 设置DIV 的width属性即宽度. 2 设置div的margin-left和margin-right属性即可 代码: <div style="w ...
- Hbase之进行批处理操作
import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; impo ...
- Hbase之批量删除数据
import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; impo ...
- git tag推送小分析
一个推送可以用三条命令 -[deleted]-git push origin --tags git push origin master --follow-tags git push --follow ...
- Perl 语法 - 高级特性
总结: q().qq().qw(同单引号).qx{牢记是花括号},分别是单引号.双引号.创建字符串列表 和 捕获命令输出. 第9学时 其他函数和运算符 一件事情可以使用多种方法完成. 有哪些其他的 ...
- js上下滚屏效果,代码通过测试
这是html代码 <div class="box"> <div class="bcon"> <h1><b>领号实 ...