//index.js//獲取應用實例var app = getApp()Page({ data: { isPopping: false,//是否已經彈出 animationPlus: {},//旋轉動畫 animationcollect: {},//item位移,透明度 animationTranspond: {},//item位移,透明度 animationInput: {},//item位移,透明度 //我的博客:http://blog.csdn.net/qq_31383345 //CSDN微信小程序開發專欄:http://blog.csdn.net/column/details/13721.html }, onLoad: function () { }, //點擊彈出 plus: function () { if (this.data.isPopping) {  //縮回動畫  popp.call(this);  this.setData({  isPopping: false  }) } else {  //彈出動畫  takeback.call(this);  this.setData({  isPopping: true  }) } }, input: function () { console.log("input") }, transpond: function () { console.log("transpond") }, collect: function () { console.log("collect") }})//彈出動畫function popp() { //plus順時針旋轉 var animationPlus = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationcollect = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationTranspond = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationInput = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) animationPlus.rotateZ(180).step(); animationcollect.translate(-100, -100).rotateZ(180).opacity(1).step(); animationTranspond.translate(-140, 0).rotateZ(180).opacity(1).step(); animationInput.translate(-100, 100).rotateZ(180).opacity(1).step(); this.setData({ animationPlus: animationPlus.export(), animationcollect: animationcollect.export(), animationTranspond: animationTranspond.export(), animationInput: animationInput.export(), })}//收回動畫function takeback() { //plus逆時針旋轉 var animationPlus = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationcollect = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationTranspond = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationInput = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) animationPlus.rotateZ(0).step(); animationcollect.translate(0, 0).rotateZ(0).opacity(0).step(); animationTranspond.translate(0, 0).rotateZ(0).opacity(0).step(); animationInput.translate(0, 0).rotateZ(0).opacity(0).step(); this.setData({ animationPlus: animationPlus.export(), animationcollect: animationcollect.export(), animationTranspond: animationTranspond.export(), animationInput: animationInput.export(), })}

<!--index.wxml--><image src="../../images/collect.png" animation="{{animationcollect}}" class="image-style" bindtap="collect"></image><image src="../../images/transpond.png" animation="{{animationTranspond}}" class="image-style" bindtap="transpond"></image><image src="../../images/input.png" animation="{{animationInput}}" class="image-style" bindtap="input"></image><image src="../../images/plus.png" animation="{{animationPlus}}" class="image-plus-style" bindtap="plus"></image>

/**index.wxss**/.image-style { height: 150rpx; width: 150rpx; position: absolute; bottom: 250rpx; right: 100rpx; opacity: 0;}.image-plus-style { height: 150rpx; width: 150rpx; position: absolute; bottom: 250rpx; right: 100rpx; z-index: 100;}