页面渐入渐出

大概就是这样一个场景，在切换的时候页面整体渐入，效果好一些

参考文章：(1条消息) 微信小程序-实现元素渐入渐出动画效果-封装方法_俊隽X的博客-CSDN博客

一、WXML

wxml简化一下如下，反正就是两个板块，透明度为0，然后有一个animation属性，然后一个切换按钮

//切换按钮{{item.name}}

//板块一

二、JS

js简单来说就是一个切换函数，然后在切换函数中调用渐入动画代码

main.js:

var app = getApp()
//切换函数
async switchCategory(e) {this.setData({current: e.currentTarget.dataset.index,})if (this.data.current == 0) {this.setData({hiddenRandom: true,hiddenFollow: true,})app.show(this, 'showEase_1',500, 1)app.show(this, 'showEase_2',1, 0)} else if (this.data.current == 1) {this.setData({hiddenRandom: false,hiddenFollow: true,})app.show(this, 'showEase_2',500, 1)app.show(this, 'showEase_1',1, 0)}},

app.js

//app.js渐入函数
show: function (that, param,duration, opacity) {var animation = wx.createAnimation({duration: duration,timingFunction: 'ease',});//var animation = this.animationanimation.opacity(opacity).step()//将param转换为keyvar json = {}json[param] = animation.export()//设置动画that.setData(json)},

首先要注意的是我的渐入函数是放在app.js里的，所以所有页面都可以访问的到

大家可以看到大致的逻辑就是，切换函数后，调用app.show(this, 'showEase_1',500, 1)

show函数里主要是生成动画，然后赋值给wxml中的animation属性，因为原来的opacity：0，通过动画变为1，然后将另一个板块opacity重新设置为0。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！