收藏
回答

动画效果存在问题

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug wx.createAnimation 微信iOS客户端 Android 6.6.7 2.2.2

问题表现:left()、right()、top()、bottom()动画执行时并没有出现运动效果,并且连delay也没有生效,物体会不经动画过程直接出现在目标位置上,但是使用rotate()进行旋转动画时却有动画效果。

是我写的有问题还是这是个BUG?



测试源码:

前端代码

<view class='div' bindtap='DivTap' animation="{{MyAnimation}}">view>


CCS代码

/* index/index.wxss */

.div{

width: 100px;

height: 100px;

background: red;

position: relative;

}


JS代码

// index/index.js

Page({

data: {

MyAnimation:[]

},


onLoad: function(options) {

this.MyAnimation = wx.createAnimation({

duration: 2000,

timingFunction: 'linear',

delay: 2000,

transformOrigin: '50% 50% 0'

});

},


DivTap: function() {

this.MyAnimation.left(100).step()

this.setData({

MyAnimation:this.MyAnimation.export()

})

console.log(this.MyAnimation);

}

})


最后一次编辑于  2018-08-13
回答关注问题邀请回答
收藏

7 个回答

  • WGinit
    WGinit
    2018-08-14

    需要调用setTimeout 等延迟重新setData一次才可显示

    2018-08-14
    有用 1
    回复 9
    • 茶糖寒冰
      茶糖寒冰
      2018-08-14

      动画不是没显示,是没有动画过程,请仔细读题

      2018-08-14
      回复
    • WGinit
      WGinit
      2018-08-14回复茶糖寒冰

      我的意思就是这个问题

      2018-08-14
      回复
    • 茶糖寒冰
      茶糖寒冰
      2018-08-14

      我试了一下不行,能贴一下您的写法吗?

      2018-08-14
      回复
    • WGinit
      WGinit
      2018-08-14回复WGinit

      initAnimation () {

      let animation = wx.createAnimation({

      duration: 1000,

      timingFunction: 'ease',

      })

      return animation

      },

      getAnimation(animation, width, time = 0, duration = 1000) {

      setTimeout(() => {

      animation.width(width).step({duration: duration})

      this.setData({

      animationData: animation.export()

      })

      }, time)

      },

      之前的写的,主要是加了延迟setData, 你可以参考下

      2018-08-14
      回复
    • 茶糖寒冰
      茶糖寒冰
      2018-08-14回复WGinit

      我试了一下您的这个写法,变宽度高度角度都行,但是left()、right()、top()、bottom()还是不行

      2018-08-14
      回复
    查看更多(4)
  • .
    .
    2018-08-29

    1、wxml


    2、wxss


    3、js





    想问一下,似乎没有 css3 的过度效果,怎么回事呀? 还望解答一二


    2018-08-29
    有用
    回复
  • 我是芒果鸭
    我是芒果鸭
    2018-08-15

    小哥哥帮看下 https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=1289114753&docid=0000a450460ce0b371374cb0251000

    2018-08-15
    有用
    回复
  • 2018-08-15

    如果是希望左右上下移动  问什么不考虑  translate

    animation.translateX(-100).step();

    2018-08-15
    有用
    回复
  • 卢霄霄
    卢霄霄
    2018-08-14

    能来个代码片段吗?

    https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2018-08-14
    有用
    回复
  • 茶糖寒冰
    茶糖寒冰
    2018-08-13

    使用absolute也不行,和relative同样的效果

    2018-08-13
    有用
    回复
  • HS
    HS
    2018-08-13

    建议调整一下布局,使用 position: absolute 来实现动画。

    2018-08-13
    有用
    回复 1
    • 明月松间照
      明月松间照
      2018-08-13

      我的问题怎么样了?

      2018-08-13
      回复
登录 后发表内容