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

时间:2024-02-18 11:11:55

需要实现的效果很简单,当微信小程序跳转到该页面时,微信登录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)
},
 
快速添加多个动画: