收藏
回答

this.animate 设计机制有问题 无法停止一段动画?

this.animate可以用于做动画 但是在连续的帧动画中确无法停止一段动画 例如一个图片我要先放大显示 一段时间之后再缩小

目前的this.animate完全无法实现 offset的机制到底是怎么样的完全不清楚 希望官方给个答复

回答关注问题邀请回答
收藏

2 个回答

  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    07-08

    offset属性应该是表示对应关键帧在整条时间轴中的位置百分比

    // 先放大,3秒后缩小
    let t = this
    t.animate('#container', [
      { scale: [11] },
      { scale: [1.51.5] },
      ], 2000function () {// 2秒内放大至1.5倍
        setTimeout(function(){
          t.animate('#container', [
            { scale: [1.51.5] },
            { scale: [0.50.5] },
            ], 2000function () {// 3秒后,2秒内缩小至0.5倍
          })
        }, 3000)// 3秒后执行缩小,想要多长时间自己写
    })
    

    若认为该回答有用,给回答者点个[ 有用 ],让答案帮助更多的人

    07-08
    有用 1
    回复 3
    • harvey
      harvey
      07-08
      setTimeout感觉很不优雅  如果复杂一点的话  就回调地狱了
      07-08
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      07-08回复harvey
      那就用 @卢霄霄 大佬 代码片段里的方法,加个translateX: 0,配合offset的使用,offset写多少自己用时间换算吧
      07-08
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      07-08回复harvey
      07-08
      1
      回复
  • 卢霄霄
    卢霄霄
    07-08

    试了下,像是跳过了值没变化的帧。。。用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

    07-08
    有用 1
    回复 3
    • harvey
      harvey
      07-08
      主要是因为图片有些轨迹是需要算出来的不好直接写css
      07-08
      回复
    • 卢霄霄
      卢霄霄
      07-08回复harvey
      我我我。。改口供了
      07-08
      回复
    • 卢霄霄
      卢霄霄
      07-08回复harvey
      好像问题还不少。。还有个别的bug。。。
      07-08
      回复
登录 后发表内容
问题标签