在页面切换时添加animation

很简单,在startActivity后,调用overridePendingTransition方法,例如,实现淡入淡出的效果如下:

  1. Intent i = new Intent(StartActivity.this,MainTab.class);  
  2. StartActivity.this.startActivity(i);  
  3. overridePendingTransition(android.R.anim.fade_in,android.R.anim.fade_out);  
 

由左向右滑入的效果改变一下参数即可,

  1. overridePendingTransition(android.R.anim.slide_in_left,android.R.anim.slide_out_right);  
 

以上是直接使用android.R.anim预先定义好的animation,很奇怪为什么没有zoomin和zoomout(也许是我没有找到,还望高人指点)

要实现zoomin和zoomout,即类似iphone的进入和退出时的效果,代码如下:

  1. overridePendingTransition(R.anim.zoomin, R.anim.zoomout);  

添加此代码后,eclipse会报错,因为没有zoomin和zoomout的定义

此时在res目录下新建文件夹anim,然后在anim下新建两个xml,默认选项不用更改,分别命名为zoomin.xml和zoomout.xml,

代码如下:

zoomin

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.         android:interpolator="@android:anim/decelerate_interpolator">  
  4.     <scale android:fromXScale="2.0" android:toXScale="1.0"  
  5.            android:fromYScale="2.0" android:toYScale="1.0"  
  6.            android:pivotX="50%p" android:pivotY="50%p"  
  7.            android:duration="@android:integer/config_mediumAnimTime" />  
  8. </set>  
 

zoomout

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.         android:interpolator="@android:anim/decelerate_interpolator"  
  4.         android:zAdjustment="top">  
  5.     <scale android:fromXScale="1.0" android:toXScale=".5"  
  6.            android:fromYScale="1.0" android:toYScale=".5"  
  7.            android:pivotX="50%p" android:pivotY="50%p"  
  8.            android:duration="@android:integer/config_mediumAnimTime" />  
  9.     <alpha android:fromAlpha="1.0" android:toAlpha="0"  
  10.             android:duration="@android:integer/config_mediumAnimTime"/>  
  11. </set>  
 

大功告成!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序可以通过动画实现页面切换效果,其淡入淡出的效果可以通过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、付费专栏及课程。

余额充值