这里介绍 2 种方法一种是常规的小程序方法操作，另一种是引入动画库
1. 常规动画操作设置
wxml:
js:(3步骤)
data:{
donghua:""
},
//----------------------------------1、创建动画实例 , ani 是 onLoad 的一个属性
onLoad: function (options) {
//动画可以挂载到这里 ！！
this.ani = wx.createAnimation({
duration:1000,
timingFunction:"liner"
})
},
//-----------------------------------2、实现动画效果 , step() 表示一组动画完成。
clickMe(){
this.ani.left(50).top(50).step() //可改变的相关值可以自行查找 API
//---------------------------------3、导出动画 。
this.setData({
donghua:this.ani.export()
})
},
wxss:
.test{
position: absolute;
left:150px;
top:150px;
/* 这里设置了left 和 top 的初始值 ， 动画效果更明显 */
}
2. 引入动画库
在 app.wxss 中全局引入动画库 ， 文件可点击 http://nodejs999.com/animate.wxss 下载，放在 utils 文件中。
@import "./utils/animate.wxss";
2.例子： 注意：引入动画库记得要加上animated ！！！wxml:
wxss:
page{
height:100%;
overflow: hidden;
/* 防止pickV定位有滚动条 */
}
.pickV{
position: absolute;
bottom:-100%;
}
.goBottom{
bottom:0;
}
js:
data:{
bounceInup:"",
goBottom:"",
isShow:false,
},
showPickV(){
if(this.data.isShow == false){
this.setData({
bounceInUp:"bounceInUp",
goBottom:"goBottom"
})
}else{
this.setData({
bounceInUp: "bounceOut",
goBottom:""
})
}
this.setData({
isShow:!this.data.isShow
})
}
转载地址:https://www.jianshu.com/p/bac2e985de49