微信小程序实现元素渐入渐出动画效果封装方法

网友投稿 531 2023-11-10

开端

微信小程序实现元素渐入渐出动画效果封装方法

之前一直使用堪称“万能”的jQuery处理用户交互的动画，近日开发微信小程序，微信小程序高度限制的语法和功能使开源函数可谓对其“无能为力”。

那没办法，只好自己写一个可以让元素渐入渐出的，可复用的函数了。做到类似jQuery show()的效果

原创文章，允许转载分享。但请转载请一定标明出处，这是起码的尊重

本文章阅读前需要对微信小程序的动画api有所了解

先看效果

可以看到，动画效果十分流畅，高度复用，封装好后只需要三行代码实现动画

解决

1.寻根问底，发现wx_mini_program(下面称呼微信小程序为wxmp [差点叫成 (*´ﾉ皿`)mmp] )有一个全局的js逻辑文件，叫app.js，有意思，可以往里面塞自己写的object(函数数据等等)，那就从那里入手吧

2.在app.js中定义全局的动画函数

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
App({
//渐入，渐出实现
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)
}
})

3.现在我们再看看调用这个函数的具体方法

在wxml中，只需要设置animation绑定即可，以首页index为例
?
1
2
3
4
// 这里是pages/page/index.wxml
//使用view包裹需要动画的元素
//class中定义动画开始前的初始样式，如透明度=0，向下偏移200px等，animtion属性填入绑定值
<view class="init" animation="{{slide_up1}}">

4.在该页的js中

5.让我们完善流程，达到预览图首页的效果(有延时的边上升边出现效果)

wxml就是将各个容器分别绑定不同的变量,一个view容器就是一个动画单位(可以这样理解)，如
?
1
2
3
4
5
6
<view class="init" animation="{{slide_up1}}">
<card>...</card>
</view>
<view class="init" animation="{{slide_up2}}">
<card>...</card>
</view>

页面的js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//onload时获取小程序实例
onLoad: function (options) {
this.app = getApp()
},
//页面展示时，触发动画
onShow: function () {
this.app.slideupshow(this, slide_up1, -200, 1)
setTimeout(function () {
this.app.slideupshow(this, slide_up2, -200, 1)
}.bind(this), 200);
},
//页面隐藏时，触发渐出动画
onHide: function () {
//你可以看到，动画参数的200,0与渐入时的-200,1刚好是相反的，其实也就做到了页面还原的作用，使页面重新打开时重新展示动画
this.app.slideupshow(this, slide_up1, 200, 0)
//延时展现容器2，做到瀑布流的效果，见上面预览图
setTimeout(function () {
this.app.slideupshow(this, slide_up2, 200, 0)
}.bind(this), 200);
}

以上所述是小编给大家介绍的微信小程序实现元素渐入渐出动画效果封装方法详解整合，希望对大家有所帮助，如果大家

您可能感兴趣的文章:微信小程序 数据缓存实现方法详解微信小程序缓存过期时间的使用详情微信小程序本地缓存数据增删改查实例详解微信小程序 缓存（本地缓存、异步缓存、同步缓存）详解微信小程序-详解数据缓存微信小程序HTTP请求从0到1封装微信小程序HTTP接口请求封装代码实例微信小程序 使用picker封装省市区三级联动实例代码微信小程序缓存支持二次开发封装实现解析

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 方法 微信小程序 小程序 流程
上一篇:券商开发 - 券商开发的意义和重要性
下一篇:微信小程序实战之登录页面制作(5)
相关文章

 发表评论

暂时没有评论，来抢沙发吧~