小程序 js动画实现某区域从下往上数据滚动

小程序 js动画实现某区域从下往上数据滚动

效果如下：

<!-- 循环 -->
        <view class="mv_bottom">
          <view class="mv_bottomlist">
            <view class="mv_rowup" animation="{{animationData}}">
              <view wx:for="{{1}}" class="mv_bottom_line mv_own_color">
                <image class="mv_advace" src="../../images/1.jpg"></image>
                <image class="mv_prise" src="../../images/praise_HL.png" ></image>
                <view class="font12">
                  <view class="mv_text_more">Olga Ruiz</view>
                  <view class="mv_text_more">啊啊啊啊啊啊</view>
                </view>
              </view>
              <view wx:for="{{2}}" class="mv_bottom_line">
                <image class="mv_advace" src="../../images/1.jpg"></image>
                <image class="mv_prise" src="../../images/praise_HL.png" ></image>
                <view class="font12">
                  <view class="mv_text_more">Olga Ruiz</view>
                  <view class="mv_text_more">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</view>
                </view>
              </view>
              <view wx:for="{{3}}" class="mv_bottom_line">
                <image class="mv_advace" src="../../images/1.jpg"></image>
                <image class="mv_prise" src="../../images/praise_HL.png" ></image>
              </view>
            </view>
          </view>
        </view>

 css就不展示了

 onShow: function () {
    let that = this
    that.getHeight();
  },
  //上下滚动
  utilTime: function (obj) {
    // 控制速度
    let continueTime = (parseInt(obj.list / obj.container) + 1) * 6500;
    let setIntervalTime = 50 + continueTime;

    let animation = wx.createAnimation({
      duration: 200, //动画时长
      timingFunction: "linear", //线性
      delay: 0 //0则不延迟
    });
    this.animation = animation;
    animation.translateY(obj.container).step({
      duration: 50,
      timingFunction: 'step-start'
    }).translateY(-obj.list).step({
      duration: continueTime
    });
    this.setData({
      animationData: animation.export()
    })
    // 循环
    this.data.timeSet=setInterval(() => {
      animation.translateY(obj.container).step({
        duration: 50,
        timingFunction: 'step-start'
      }).translateY(-obj.list).step({
        duration: continueTime
      });
      this.setData({
        animationData: animation.export()
      })
    }, setIntervalTime)
  },
  getHeight: function () {
    let obj = new Object();
    //创建节点选择器
    let query = wx.createSelectorQuery();
    query.select('.mv_bottomlist').boundingClientRect()
    query.select('.mv_rowup').boundingClientRect()
    query.exec((res) => {
      obj.container = res[0].height; // 框的height
      obj.list = res[1].height; // height
      this.utilTime(obj);
    })
  },