- 自定义转发封面图
自定义转发;封面图兼容问题呀;安卓手机显示不全;苹果手机正常;下面是例子 [图片] 安卓手机显示的 [图片] 苹果6显示的
2018-08-30 - 部分朋友想要的飞入购物车效果
//index.js Page({ data: { animationData: {}, animating: '', }, onLoad: function () { }, /* * t: current time(当前时间); * b: beginning value(初始值); * c: change in value(变化量); * d: duration(持续时间)。 */ bounceEaseOut: function (t, b, c, d) {//弹性线 if ((t /= d) < (1 / 2.75)) { return c * (7.5625 * t * t) + b; } else if (t < (2 / 2.75)) { return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b; } else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; } else { return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; } }, easeOutBack: function (t, b, c, d, s) {//抛物线 if (s == undefined) s = 1.70158; return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; }, startAm: function (that, e) { var atime = 0.6//动画持续时间 var etime = 100//动画结束时间 that.setData({ animating: e.target.dataset.goodsid }) setTimeout(() => { that.setData({ animating: '' }) }, etime) var animation = wx.createAnimation({ duration: 100, timingFunction: 'ease', }) that.animation = animation //变化量坐标 var offx = 320 / 2 - e.touches[0].clientX//购物车所在位置x - 加入购物车按钮的位置x var offy = 405- 50 - e.touches[0].clientY//购物车所在位置Y - 加入购物车按钮的位置Y //console.log("变化量坐标", offx, offy, that.bounceEaseOut(1 / 10, 0, offy, 1)) //每1/10秒变化量坐标: //console.log("每1/10秒变化量坐标", offx / 10, that.bounceEaseOut(1 / 10, 0, offy, 1)) animation .translate(1 * offx / 20, that.bounceEaseOut(1 / 20, 0, offy, atime)).step() .translate(2 * offx / 20, that.bounceEaseOut(2 / 20, 0, offy, atime)).step() .translate(3 * offx / 20, that.bounceEaseOut(3 / 20, 0, offy, atime)).step() .translate(4 * offx / 20, that.bounceEaseOut(4 / 20, 0, offy, atime)).step() .translate(5 * offx / 20, that.bounceEaseOut(5 / 20, 0, offy, atime)).step() .translate(6 * offx / 20, that.bounceEaseOut(6 / 20, 0, offy, atime)).step() .translate(7 * offx / 20, that.bounceEaseOut(7 / 20, 0, offy, atime)).step() .translate(8 * offx / 20, that.bounceEaseOut(8 / 20, 0, offy, atime)).step() .translate(9 * offx / 20, that.bounceEaseOut(9 / 20, 0, offy, atime)).step() .translate(10 * offx / 20, that.bounceEaseOut(10 / 20, 0, offy, atime)).step() .translate(11 * offx / 20, that.bounceEaseOut(11 / 20, 0, offy, atime)).step() .translate(12 * offx / 20, that.bounceEaseOut(12 / 20, 0, offy, atime)).step() .translate(13 * offx / 20, that.bounceEaseOut(13 / 20, 0, offy, atime)).step() .translate(14 * offx / 20, that.bounceEaseOut(14 / 20, 0, offy, atime)).step() .translate(15 * offx / 20, that.bounceEaseOut(15 / 20, 0, offy, atime)).step() .translate(16 * offx / 20, that.bounceEaseOut(16 / 20, 0, offy, atime)).step() .translate(17 * offx / 20, that.bounceEaseOut(17 / 20, 0, offy, atime)).step() .translate(18 * offx / 20, that.bounceEaseOut(18 / 20, 0, offy, atime)).step() .translate(19 * offx / 20, that.bounceEaseOut(19 / 20, 0, offy, atime)).step() .translate(20 * offx / 20, that.bounceEaseOut(20 / 20, 0, offy, atime)).step() .opacity(0).step().translate(0, 0).step().opacity(1).step() that.setData({ animationData: animation.export() }) setTimeout(function () { animation.translate(0, 0).step() that.setData({ animationData: animation.export() }) }.bind(this), etime) }, cartPlus: function (e) { var that = this //加入购物车动画 that.startAm(that,e) }, }) <view data-goodsId='' bindtap="cartPlus" animation='{{animating==im.goodsIdStr?animationData:""}}'>加入购物车</view >
2017-11-01