微信小程序页面切换平缓渐入

页面渐入渐出

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

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

一、WXML

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

//切换按钮
 <view class="switch-container">
        <view wx:for="{
   
   {switch}}" wx:for-index="index" bindtap="switchCategory" >
        <text>{
   
   {item.name}}</text>
</view>
//板块一
<scroll-view style="opacity:0"  hidden="{
   
   {hiddenRandom}}" animation="{
   
   {showEase_1}}"><scroll-view/>
//板块二
<scroll-view style="opacity:0" hidden="{
   
   {!hiddenFollow}}" animation="{
   
   {showEase_2}}"><scroll-view/>

二、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.animation
        animation.opacity(opacity).step()
        //将param转换为key
        var 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。