页面导航时,实现淡入淡出效果

1、首先引入 toolkit 命名空间:xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
 2、在 app.xaml 文件中加入:

<Style x:Key="SlideTransitionPageStyle" TargetType="phone:PhoneApplicationPage">
<Setter Property="toolkit:TransitionService.NavigationInTransition">
<Setter.Value>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:SlideTransition Mode="SlideRightFadeIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:SlideTransition Mode="SlideLeftFadeIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</Setter.Value>
</Setter>
<Setter Property="toolkit:TransitionService.NavigationOutTransition">
<Setter.Value>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:SlideTransition Mode="SlideRightFadeOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:SlideTransition Mode="SlideLeftFadeOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</Setter.Value>
</Setter>
</Style>

 

3、

在 PhoneApplicationPage 页面加入:

<phone:PhoneApplicationPage    Style="{StaticResource SlideTransitionPageStyle}"     >

转载于:https://www.cnblogs.com/hebeiDGL/archive/2012/04/05/2433473.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android 下拉,淡入淡出特效源码 依赖support v7 // /** * PopupWindow上菜单进入动画 */ public static Animation createPopupAnimIn(Context context, int fromYDelta) { AnimationSet animationSet = new AnimationSet(context, null); // animationSet.setInterpolator(new BounceInterpolator()); //结束弹跳 animationSet.setFillAfter(true); //移动 TranslateAnimation translateAnim = new TranslateAnimation(0, 0, fromYDelta, 20); translateAnim.setDuration(TIME_IN); animationSet.addAnimation(translateAnim); //回弹效果 TranslateAnimation translateAnim2 = new TranslateAnimation(0, 0, 0, -20); translateAnim2.setStartOffset(TIME_IN); translateAnim2.setDuration(TIME_IN_BACK); animationSet.addAnimation(translateAnim2); return animationSet; } /** * PopupWindow上菜单离开动画 */ public static Animation createPopupAnimOut(Context context, int toYDelta) { AnimationSet animationSet = new AnimationSet(context, null); animationSet.setFillAfter(true); TranslateAnimation translateAnim = new TranslateAnimation(0, 0, 0, toYDelta); translateAnim.setDuration(TIME_OUT); animationSet.addAnimation(translateAnim); return animationSet; } /** * PopupWindow背景进入动画(透明度渐变) */ public static Animation createPopupBgFadeInAnim() { AlphaAnimation anim = new AlphaAnimation(0, 1.0f); anim.setDuration(TIME_IN); anim.setFillAfter(true); return anim; } /** * PopupWindow背景离开动画(透明度渐变) */ public static Animation createPopupBgFadeOutAnim(int duration) { AlphaAnimation anim = new AlphaAnimation(1.0f, 0); anim.setDuration(duration); anim.setFillAfter(true); return anim; } /** * PopupWindow按钮点击动画 */ public static Animation createPopupItemBiggerAnim(Context context) { AnimationSet animationSet = new AnimationSet(context, null); animationSet.setFillAfter(true); //放大(设置缩放的中心点为自己的中心) ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); scaleAnim.setDuration(TIME_OUT_CLICK); animationSet.addAnimation(scaleAnim); //渐变 AlphaAnimation alphaAnim = new AlphaAnimation(1.0f, 0); alphaAnim.setInterpolator(new AccelerateInterpolator()); alphaAnim.setDuration(TIME_OUT_CLICK); animationSet.addAnimation(alphaAnim); return animationSet; } /** * PopupWindow按钮点击其它按钮的动画 */ public static Animation createPopupItemSmallerAnim(Context context) { //放大(设置缩放的中心点为自己的中心) ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 0, 1.0f, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); scaleAnim.setDuration(TIME_OUT_CLICK); scaleAnim.setFillAfter(true); return scaleAnim; }
微信小程序可以通过动画实现页面切换效果,其中淡入淡出效果可以通过opacity属性来实现。 首先,在app.wxss中定义以下样式: ``` .fade-enter { opacity: 0; } .fade-enter-active { transition: opacity .5s ease-in-out; opacity: 1; } .fade-leave { opacity: 1; } .fade-leave-active { transition: opacity .5s ease-in-out; opacity: 0; } ``` 其实就是定义了两个类fade-enter和fade-leave,这两个类控制页面的入场和出场动画。fade-enter-active和fade-leave-active控制动画过渡。 然后在页面的wxml中,可以定义一个动画属性,如下所示: ``` <view class="fade-enter" animation="{{animationData}}">欢迎页面</view> ``` 接着,控制小程序页面切换动画的执行,将如下代码copy到js文件相应的位置 ``` onLoad: function () { // 动画实例 this.animation = wx.createAnimation() }, onShow: function () { // 淡入动画 this.fadeIn() }, fadeOut: function () { // 淡出动画 this.animation.opacity(0).step() this.setData({ animationData: this.animation.export() }) }, fadeIn: function () { // 淡入动画 this.animation.opacity(1).step() this.setData({ animationData: this.animation.export() }) } ``` 其中onLoad函数中初始化动画实例,onShow函数中实现页面切换的动画,fadeIn函数和fadeOut函数分别实现淡入和淡出动画。 这样,在跳转页面,只需在跳转函数中调用相应的fadeIn和fadeOut函数即可实现淡入淡出效果。 为了获得更好的效果,此处还可以添加一个小小的优化: ``` onReady: function () { setTimeout(() => { this.fadeOut() }, 2000) } ``` 即在页面是手动切换立即执行动画,而在小程序初始化导航,延2秒执行以免页面一开始就看到淡出动画。 以上就是微信小程序淡入淡出页面切换效果实现方法了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值