小程序对于JS的高度封装让每个前端用户都有一种撕心裂肺的感觉;
由于不能是用JS来获取DOM,所以以往使用Jquery编写的动画,在小程序里面都不能使用;
**
**
忘了从哪里看到的文章,这里我用自己的方式给他整理出来~知识都在于分享。
首先微信下程序的每一个页面基本的格式是由四个文件来表现的,分别是:
wxml结构层;
wxss样式层;
js逻辑层;
json数据层;以下主要以前三个层来分别阐述:
wxml:
bindtap 是点击事件;
data-statu 是自己声明的数据;
wx:if 是条件渲染 用来控制模块是否显示 这里也可以使用hidden;
animation 是小程序声明动画
<!--蒙版抽屉曾-->
<view class='mask' bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"> </view>
<view class='Drawer' animation="{{animationData}}" wx:if="{{showModalStatus}}"> </view>
<!--主界面-->
<!--这里只显示要点击的左上角的图片,主界面结构省略了-->
<vies class='top_img' bindtap="powerDrawer" data-statu="open"></view>
wxss:
这里只写了蒙版层mask与抽屉层的drawer的样式
.mask{
position:fixed;
width:100%;
height:100%;
background: #000000;
opacity: 0.5;
z-index: 100;
}
.Drawer{
position:fixed;
background:#091e3e;
width:220px;
height:100%;
left:-220px;
z-index: 200;
color: #ffffff;
}
.top_img{
width:60px;
height:60px;
background:#000000;
}
js:
关键代码:
e.currentTarget.dataset.statu 表示手指点击的view模块的data-statu数据;(前面wxml中说名的data-statu;);整体上这个动画的逻辑是:每点击一次,动画都是重复一次,(没看错,就是重复同一个动作),只不过每次根据data-statu的数据来控制蒙版层是否显示而已。
下面的代码放在page({})中;
data: {
showModalStatus: false,
// animationData:"",
},
powerDrawer: function (e) {
var currentStatu = e.currentTarget.dataset.statu;
this.util(currentStatu)
},
util: function (currentStatu) {
/* 动画部分 */
// 第1步:创建动画实例
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
});
// 第2步:这个动画实例赋给当前的动画实例
this.animation = animation;
// 第3步:执行第一组动画:x轴不偏移;
animation.translateX(0).step();
// 第4步:导出动画对象赋给数据对象储存
this.setData({
animationData: animation.export()
})
// 第5步:设置定时器到指定时候后,执行第二组动画
setTimeout(function () {
// 执行第二组动画:X轴偏移22px,停
animation.translateX(220).step()
// 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象
this.setData({
animationData: animation
})
//关闭抽屉
if (currentStatu == "close") {
this.setData({
showModalStatus: false
});
}
}.bind(this), 200)
// 显示抽屉
if (currentStatu == "open") {
this.setData({
showModalStatus: true
});
}
},
三个层次所有代码就这么简单;JS中的逻辑理解了其实也不难;
要是不想用这个同一动作隐层显示的方法,也可以分别声明函数,来“科学”的创建动画~
实在看不懂复制粘贴就行了…