给微信小程序添加简单小动画

需要实现的效果很简单，当微信小程序跳转到该页面时，微信登录BUTTON从右往左淡入出现，手机登录BUTTON从左往右淡入出现，类似于animation.css的简单效果

 

官方文档上是这样说的：

①创建一个动画实例 animation。

②调用实例的方法来描述动画。

③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

 

 

 要想给元素添加动画首先给元素增加一个样式，显示动画之前的样式，在这里定义了一个.init-right。   再给其定义一个animation属性，绑定一个变量，这样在页面所有地方都可以加上这个属性来添加动画

 

 样式如下，透明度为0，往右边偏移480rpx

 

js如下

 

 

在页面加载的时候执行:

 

效果实现了：

 

 

 

csdn上有一篇关于封装微信小程序动画的文章，可以参考一下结合到自己项目中来

https://blog.csdn.net/weixin_42917830/article/details/81701125?utm_source=copy

 

在APP.JS中添加：

show: function(that, param, opacity) {

var animation = wx.createAnimation({

//持续时间800ms

duration: 800,

timingFunction: 'ease',

});

//var animation = this.animation

animation.opacity(opacity).step()

//将param转换为key

var json = '{"' + param + '":""}'

json = JSON.parse(json);

json[param] = animation.export()

//设置动画

that.setData(json)

},

//滑动渐入渐出

slideupshow: function(that, param, px, opacity) {

var animation = wx.createAnimation({

duration: 800,

timingFunction: 'ease',

});

animation.translateY(px).opacity(opacity).step()

//将param转换为key

var json = '{"' + param + '":""}'

json = JSON.parse(json);

json[param] = animation.export()

//设置动画

that.setData(json)

},

//向右滑动渐入渐出

sliderightshow: function(that, param, px, opacity) {

var animation = wx.createAnimation({

duration: 800,

timingFunction: 'ease',

});

animation.translateX(px).opacity(opacity).step()

//将param转换为key

var json = '{"' + param + '":""}'

json = JSON.parse(json);

json[param] = animation.export()

//设置动画

that.setData(json)

},

 

快速添加多个动画：