小程序
小游戏
企业微信
微信支付
扫描小程序码分享
代码如下:
this.animation1.translateY(realTouchY).step();
希望通过修改变量realTouchY的值,实现用户每次操作都执行不同动画的效果。但实际操作中发现,当执行完第一次动画之后,不管怎么修改realTouchY的值,后续的动画都跟第一次执行时一样。也就是说,动画不会随着变量的改变而改变。
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
哥们,推荐使用小程序新的动画方式:关键帧动画,这个简单多了。
动画 | 微信开放文档
https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html
this.animate('#container', [ { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' }, { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'}, { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' }, ], 5000, function () { this.clearAnimation('#container', { opacity: true, rotate: true }, function () { console.log("清除了#container上的opacity和rotate属性") }) }.bind(this))
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
代码片段来个呢
onTouchStart: function (e) {
this.setData({
touchX: e.touches[0].pageX,
touchY: e.touches[0].pageY,
touchStart: true
})
},
onTouchEnd: function (e) {
if (this.data.touchStart){
let realTouchX = (e.changedTouches[0].pageX - this.data.touchX) * 10
let realTouchY = (e.changedTouches[0].pageY - this.data.touchY) * 10
var animation1 = wx.createAnimation({ duration: 400, timingFunction: 'cubic-bezier(.8,.2,.1,0.8)' });
this.animation1 = animation1; this.animation1.translateY(realTouchY).rotate(-5).translateX(realTouchX).scale(0.52).step();
}
this.animation1.export()
setData...//执行动画
},
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
哥们,推荐使用小程序新的动画方式:关键帧动画,这个简单多了。
动画 | 微信开放文档
https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html
this.animate('#container', [ { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' }, { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'}, { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' }, ], 5000, function () { this.clearAnimation('#container', { opacity: true, rotate: true }, function () { console.log("清除了#container上的opacity和rotate属性") }) }.bind(this))
代码片段来个呢
onTouchStart: function (e) {
this.setData({
touchX: e.touches[0].pageX,
touchY: e.touches[0].pageY,
touchStart: true
})
},
onTouchEnd: function (e) {
if (this.data.touchStart){
let realTouchX = (e.changedTouches[0].pageX - this.data.touchX) * 10
let realTouchY = (e.changedTouches[0].pageY - this.data.touchY) * 10
var animation1 = wx.createAnimation({ duration: 400, timingFunction: 'cubic-bezier(.8,.2,.1,0.8)' });
this.animation1 = animation1; this.animation1.translateY(realTouchY).rotate(-5).translateX(realTouchX).scale(0.52).step();
}
this.animation1.export()
setData...//执行动画
},
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html