小程序实现渐变动画

本文介绍在小程序中如何实现渐变动画效果（由下到上透明度变低/高达到逐渐隐藏/显示的效果）。

先上效果图：

 

效果用到了FLASH遮罩层的原理，大体思路如下：

1、准备一个顶部半透明的，其他部分为单背景的图片

 

2、使用小程序中的wx.createAnimation方法，制作这个图片的上移/下移动画。就可以实现逐渐隐藏，逐渐显示的效果。

 

代码如下：

var that = this;
//做切换动画
var animationL = wx.createAnimation({
duration: 600,
transformOrigin: "0 0",
timingFunction: 'ease-in-out',
});


that.animationL = animationL;
that.animationL.translateY(-50).step(); //左动画--收起
that.animationL.translateY(750).step(); //左动画--放开


var dataLen = that.data.leftData.length,
index = that.data.leftIndex + 1;


//先执行动画
this.setData({
animationDataL: animationL, //动画效果
scrollRightTop: 0
})


//动画快结束时，进行赋值。这样会显得自然一些
setTimeout(function () {
that.setData({
scrollLeftTop: 0,
leftIndex: that.data.leftIndex + 1, //初始值从第二个开始算
showLeft: that.data.leftData[index % dataLen],
showRight: that.data.rightData[index % dataLen],
})
}, 600)