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.等更多

时间: 2024-10-17 19:54:34

wp8.1 Study8:页面过渡和主题动画(Page transition and Theme animations)的相关文章

Windows Store App 主题动画

Windows 8系统的动画库中包含了丰富的主题动画,在开发Windows应用商店应用时,使用主题动画编写较少的代码即可实现所期望的动画效果.下面介绍一些常用的主题动画,读者可以根据每种主题动画提供的动画效果,在应用程序中加入相应的主题动画. q  FadeInThemeAnimation,代表预配置不透明度动画,用于设置控件在屏幕中的淡入效果. q  FadeOutThemeAnimation,用于设置控件从界面中删除或隐藏时的淡出效果. q  DropTargetItemThemeAnima

11.使用过渡类名实现动画

可参考Vue中的动画:https://cn.vuejs.org/v2/guide/transitions.html 为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能: 1.不使用动画: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&

[WP8.1UI控件编程]Windows Phone动画方案的选择

8.1 动画方案的选择 Windows Phone的动画实现方式有线性插值动画(3种类型).关键祯动画(4种类型)和基于帧动画,甚至还有定时器动画,然后动画所改变的UI元素属性可以是普通的UI元素属性,变换特效属性和三维特效属性,面对着这么多的选择,我们要实现一个动画效果该怎么去思考动画实现的思路以及怎么选择实现的技术呢?那么我们这小节会先讲解与动画性能相关的知识,然后再讲解怎么去选择动画的实现方案. 8.1.1 帧速率 帧速率是用于测量显示帧数的量度,测量单位为"每秒显示帧数"(Fr

Android--ViewPager多页面滑动切换以及动画效果

背景                                                                                           ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换.这个附加包是android-support-v4.jar. 根据屏幕的分辨率和图片的宽度计算动画移动的偏移量 代码                                                   

页面跳转添加动画效果

CATransition *animation = [CATransition animation];//初始化 [animation setDuration:0.5];//设置时间间隔 [animation setType: kCATransitionReveal]; [animation setSubtype: kCATransitionFromTop]; [animation setTimingFunction:[CAMediaTimingFunction functionWithName

动画: ThemeAnimation(主题动画)

背水一战 Windows 10 之 动画 PopInThemeAnimation - 控件出现时的动画 PopOutThemeAnimation - 控件消失时的动画 FadeInThemeAnimation - 控件淡入的动画 FadeOutThemeAnimation - 控件淡出的动画 PointerDownThemeAnimation - 鼠标(手指)在控件上按下时的动画 PointerUpThemeAnimation - 鼠标(手指)在控件上抬起时的动画 SwipeHintThemeA

基于jQ+CSS3页面滚动内容元素动画特效

今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div class="container"> <h2 class

CSS3 animation动画与transition过渡比较

共同点 animation动画与transition过渡都可以实现动画效果,拥有下面共同的属性 animation:mymove 2s linear infinite alternate; transition: width 1s ease-out; 1.动画名称(name)@key-frame 2.过渡时间(duration)规定动画完成一个周期所花费的秒或毫秒.默认是 0. 3.延迟时间(delay)规定动画何时开始. 4.时间函数(timing-function)规定动画的速度曲线,默认是

css3动画(transition)属性探讨

在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠标事件来定义.js的事件也可以,比如click,focus,mousemove,mouseover,mouseout等等 transition的基本语法: css3动画通过transition属性和其他css属性(颜色,宽高,变形,位置等等)配合来实现. transition的语法: Java代码