在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
这里介绍 2 种方法 1. 常规动画操作设置wxml: <view> <view bindtap="clickMe">点我有动画</view> <view animation="{{donghua}}" class='test'>点我有动画---测试</view> </view> 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. 引入动画库
@import "./utils/animate.wxss"; 2.例子: <view> <view bindtap="showPickV">点我动画</view> <view class='pickV animated {{bounceInUp}} {{goBottom}}'>123</view> </view> 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
})
}
|
请发表评论