悬浮球弹出多个item这个效果应用的场景还是挺多的,小程序中实现比较简单,思路也比较清晰,所以写这个demo不为别的,只为熟悉一下小程序的动画操作。
效果:
体验:
实现要求:
1、悬浮球固定悬浮在屏幕右下角
2、点击悬浮球成扇形弹出多个items,并扇形排列(弹出效果由透明到不透明、由小到大)
3、item可点击
4、再次点击悬浮球或者点击屏幕空白位置,items沿着原路收回
实现思路:
1、利用position:fixed布局与z-index属性将悬浮球、多个item与透明遮罩重叠放至屏幕右下角,悬浮球处于最顶层
2、点击悬浮球后,各个item执行平移(提前计算好扇形尺寸)、缩放、透明度动画,遮罩执行缩放覆盖全屏动画
3、再次点击悬浮球或者透明遮罩后,各个item与遮罩执行原路返回动画
4、增加item点击事件
代码:
js
Page({
/**
* 页面的初始数据
*/
data: {
isShow: false,
animationContact: {},
animationSave: {},
animationShare: {},
animationHome: {},
animationModal: {},
animationContainer:{}
},
contorlAnimate(){
if(this.data.isShow){
this.closeAnimate()
}else{
this.showAnimate()
}
},
closeAnimate() {
var animationModal = wx.createAnimation({
duration: 200,
timingFunction: 'ease-in'
})
animationModal.opacity(0).scale(0.0, 0.0).step()
var animationContact = wx.createAnimation({
duration: 200,
timingFunction: 'ease-in'
})
animationContact.opacity(0).scale(0.0, 0.0).translateX(0).step()
var animationSave = wx.createAnimation({
duration: 200,
timingFunction: 'ease-in'
})
animationSave.opacity(0).scale(0.0, 0.0).translateX(0).step()
var animationShare = wx.createAnimation({
duration: 200,
timingFunction: 'ease-in'
})
animationShare.opacity(0).scale(0.0, 0.0).translateX(0).step()
var animationHome = wx.createAnimation({
duration: 200,
timingFunction: 'ease-in'
})
animationHome.opacity(0).scale(0.0, 0.0).translateX(0).step()
this.data.isShow = false
this.setData({
animationContact: animationContact.export(),
animationSave: animationSave.export(),
animationShare: animationShare.export(),
animationHome: animationHome.export(),
animationModal: animationModal.export()
})
},
showAnimate() {
var animationModal = wx.createAnimation({
duration: 200,
timingFunction: 'ease-out'
})
animationModal.opacity(0.0).scale(300, 300).step()
var animationContact = wx.createAnimation({
duration: 200,
timingFunction: 'ease-out'
})
animationContact.opacity(1).scale(0.8, 0.8).translateX(-120).step()
var animationSave = wx.createAnimation({
duration: 200,
timingFunction: 'ease-out'
})
animationSave.opacity(1).scale(0.8, 0.8).translateX(-104).translateY(-60).step()
var animationShare = wx.createAnimation({
duration: 200,
timingFunction: 'ease-out'
})
animationShare.opacity(1).scale(0.8, 0.8).translateX(-60).translateY(-104).step()
var animationHome = wx.createAnimation({
duration: 200,
timingFunction: 'ease-out'
})
animationHome.opacity(1).scale(0.8, 0.8).translateX(0).translateY(-120).step()
this.data.isShow = true
this.setData({
animationContact: animationContact.export(),
animationSave: animationSave.export(),
animationShare: animationShare.export(),
animationHome: animationHome.export(),
animationModal: animationModal.export()
})
},
clickHome(){
wx.showToast({
icon:"none",
title: '点击了Home',
})
},
clickShare() {
wx.showToast({
icon: "none",
title: '点击了分享',
})
},
clickContact() {
wx.showToast({
icon: "none",
title: '点击了联系',
})
},
clickSave() {
wx.showToast({
icon: "none",
title: '点击了保存',
})
}
})
wxml
<view id="modal" animation="{{animationModal}}" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;border-radius:40rpx;opacity: 0;background:#000" bindtap="closeAnimate">
</view>
<image id="contact" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./contact.png" animation="{{animationContact}}" bindtap="contact" bindtap="clickContact"></image>
<image id="share" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./share.png" animation="{{animationShare}}" bindtap="clickShare"></image>
<image id="save" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./save.png" animation="{{animationSave}}" bindtap="clickSave"></image>
<image id="home" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./home.png" animation="{{animationHome}}" bindtap="clickHome"></image>
<image style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;" src="./float.png" bindtap="contorlAnimate"></image>
扩展:
这是实现本类问题的思路,其他诸如悬浮弹出之类的都可参照此操作,主要还是对动画的使用。