小程序
小游戏
企业微信
微信支付
扫描小程序码分享
this.animate可以用于做动画 但是在连续的帧动画中确无法停止一段动画 例如一个图片我要先放大显示 一段时间之后再缩小
目前的this.animate完全无法实现 offset的机制到底是怎么样的完全不清楚 希望官方给个答复
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
试了下，像是跳过了值没变化的帧。。。用css做吧
{ scale: [1,1], offset: 0 },
{ scale: [2,2], offset: 0.1 },
{ scale: [2.00001,2], offset: 0.9 },
{ scale: [1,1], offset: 1 }
这种 让它稍微变一丢丢也行，看不大出来。。不过 这还是应该是个bug吧
又试了下，可以在上面例子的第三帧设个无关紧要的其它属性，比如 translateX: 0，也可以让它被保留
@娇华 代码片段奉上：https://developers.weixin.qq.com/s/1fomuGmS73ip
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
offset属性应该是表示对应关键帧在整条时间轴中的位置百分比
// 先放大，3秒后缩小 let t = this t.animate('#container', [ { scale: [1, 1] }, { scale: [1.5, 1.5] }, ], 2000, function () {// 2秒内放大至1.5倍 setTimeout(function(){ t.animate('#container', [ { scale: [1.5, 1.5] }, { scale: [0.5, 0.5] }, ], 2000, function () {// 3秒后，2秒内缩小至0.5倍 }) }, 3000)// 3秒后执行缩小，想要多长时间自己写 })
若认为该回答有用，给回答者点个[ 有用 ]，让答案帮助更多的人
this.animate('#xxxx', [
{ scale: [1, 1], offset: 0 },
{ scale: [2, 2], offset: 0.2 },
{ scale: [2, 2], translateX: 0, offset: 0.8 },
{ scale: [1, 1], offset: 1 }
], 5000)
// 第0-1秒内放大一倍,第1-4秒内保持不变，第4-5秒后缩小1倍
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
试了下，像是跳过了值没变化的帧。。。用css做吧
{ scale: [1,1], offset: 0 },
{ scale: [2,2], offset: 0.1 },
{ scale: [2.00001,2], offset: 0.9 },
{ scale: [1,1], offset: 1 }
这种 让它稍微变一丢丢也行，看不大出来。。不过 这还是应该是个bug吧
又试了下，可以在上面例子的第三帧设个无关紧要的其它属性，比如 translateX: 0，也可以让它被保留
@娇华 代码片段奉上：https://developers.weixin.qq.com/s/1fomuGmS73ip
offset属性应该是表示对应关键帧在整条时间轴中的位置百分比
// 先放大，3秒后缩小 let t = this t.animate('#container', [ { scale: [1, 1] }, { scale: [1.5, 1.5] }, ], 2000, function () {// 2秒内放大至1.5倍 setTimeout(function(){ t.animate('#container', [ { scale: [1.5, 1.5] }, { scale: [0.5, 0.5] }, ], 2000, function () {// 3秒后，2秒内缩小至0.5倍 }) }, 3000)// 3秒后执行缩小，想要多长时间自己写 })若认为该回答有用，给回答者点个[ 有用 ]，让答案帮助更多的人
this.animate('#xxxx', [{ scale: [1, 1], offset: 0 },{ scale: [2, 2], offset: 0.2 },{ scale: [2, 2], translateX: 0, offset: 0.8 },{ scale: [1, 1], offset: 1 }], 5000)// 第0-1秒内放大一倍,第1-4秒内保持不变，第4-5秒后缩小1倍