WeChat Mini Programs, with regard to absolute positioning and animation movement, I hope someone can give us some advice. thank you.

  • first of all, the absolute positioning of the small box in wxml binds the values of left and top, both of which are 10, used to initialize the positioning
  • the page structure is gray with a view relative positioning, wrapped with internal red view, red veiw absolute positioning
  • Click the red view, to start the following mobile function
moveXBox:function(){
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "linear",
    })
    animation.translateX(100).step();
    animation.translateY(100).step();
    animation.left(0).top(0).step();
    this.setData({
      animationData: animation.export()
    })
  }
  • Click the effect image for the first time

  1. I don"t understand why the coordinates of translate and left are like and why they change like this, and the two changes are not the same. The first time, both translateX and tanslateY performed the actions of, left (0) and top (0). It was very strange that the slider x did not move and y began to slide upward. At this time, what the coordinate system looks like. I hope someone can explain
  2. .
  3. if I execute animation.left (0) .top (0). Step ();) alone, the red block will move to the upper left corner
  4. my personal understanding at present is that, tranlateX (), is the movement relative to the original view positioning, while the left and top here in Wechat are the coordinate systems determined by absolute positioning, because I tried, even if the red block is set to relative, and set left (0), it will still move to the far left
Menu