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 ...
随机推荐
- AutoCompleteTextView控件的使用
public class MainActivity extends Activity { //[0]声明AutoCompleteTextView要显示的数据 private static final ...
- c/c++小知识
1.printf计算参数时是从右到左 2.(int&)a 表示把a在内存中的值强行当作int数来处理 3.float四字节,1位符号位(正数为0),8位指数位(0采取01111111),23位 ...
- 20160808_Shell书
1. http://item.jd.com/11075150.html 2.
- djangoadmin导出csv
from django.contrib import admin from .models import Order,OrderItem from django.http import HttpRes ...
- 网站后台登录aspcms 提示错误号:-2147467259,错误描述:操作必须使用一个可更新的查询。sql=update AspCms_Content set TimeStatus=0 where TimeStatus=1 and Timeing <= 解决方法。
把data文件夹的权限改下,改成user组可以修改.写入,就好了. 还有一个问题,就是进入后台的时候提示没有访问权限的问题,解决方法看下图
- Machine Learning for hackers读书笔记(三)分类:垃圾邮件过滤
#定义函数,打开每一个文件,找到空行,将空行后的文本返回为一个字符串向量,该向量只有一个元素,就是空行之后的所有文本拼接之后的字符串 #很多邮件都包含了非ASCII字符,因此设为latin1就可以读取 ...
- linux笔记:shell基础和bash的基本功能
shell的优势:可以直接调用linux系统命令 shell脚本的基本写法:脚本名以.sh结尾程序的第一行为#!/bin/bash,告诉系统这是一个shell脚本以#作为注释shell脚本的执行方式: ...
- 关于http响应内容压缩的一点小积累。
1.在tomcat的server.xml配置文件中,添加上背景颜色为绿色的配置,服务器就会自动压缩 <Connector port="80" maxHttpHeaderSiz ...
- 解决点击a标签返回页面顶部的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯css代码写旋转动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...