uniapp 微信小程序 wx.createAnimation 实现向上滚动弹幕

不多bb，直接先贴代码，反正我是能用的，如果不能用的话就改改，改改后还不能用就不能用吧。

<template>
      <view class="undone-order">
        <view :style="mainStyle">
            <view style="height: 400rpx;width: 100%;background: transparent;overflow: hidden;">
                <view class="t-content" style="text-align: center;background: transparent;" @transitionend="animationend" :animation="animationData" :style="animationStyle">
                    <view v-for="(item,index) in dataList" :key="index" class="img_cont_class">
                        <view class="img_view_class">
                            <image :src="item.headimg" style="height: 50rpx;width: 50rpx;border-radius: 25rpx;" mode=""></image>
                        </view>
                        <view class="content_class">
                            {{item.content}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <button type="default" @click="scaleAndScale">123123</button>
      </view>

  </template>
  <script>
      export default {
          data() {
              return {
                  animation: '',
                  animationData: {},
                  isStop: true,//每次点击只演示一遍动画 | 布尔判断
                animationStyle:'transform: translateY(50%)',//弹幕初始位置需要隐藏
                mainStyle:'position:fixed;right:9999px',//偏移view，主要是为了动画完成后，挪出这个view所占的位置（业务上需要点击view下的区域，由于层级原因是点不到下面区域的，所以挪开）
                runOver:true,
                dataList:[
                    {
                        headimg:'https://wx2.sinaimg.cn/mw2000/c43067f3ly8ftudf3invpj20s00s0ad6.jpg',
                        content:'评论写5个div时，连着写，然后自己设🌚🌚🌚🌚❀置margin，一方面避免代码压缩后各线条之间没有空隙，另一方面避免自己不知道5根线的总宽度。'
                    },
                    {
                        headimg:'https://wx2.sinaimg.cn/mw2000/c43067f3ly8ftudf3invpj20s00s0ad6.jpg',
                        content:'评论写5个div时，连着写，然后自己设🌚🌚🌚🌚❀置margin，一方面避免代码压缩后各线条之间没有空隙，另一方面避免自己不知道5根线的总宽度。'
                    },
                    {
                        headimg:'https://wx2.sinaimg.cn/mw2000/c43067f3ly8ftudf3invpj20s00s0ad6.jpg',
                        content:'评论写5个div时，连着写，然后自己设🌚🌚🌚🌚❀置margin，一方面避免代码压缩后各线条之间没有空隙，另一方面避免自己不知道5根线的总宽度。'
                    },
                    {
                        headimg:'https://wx2.sinaimg.cn/mw2000/c43067f3ly8ftudf3invpj20s00s0ad6.jpg',
                        content:'评论写5个div时，连着写，然后自己设🌚🌚🌚🌚❀置margin，一方面避免代码压缩后各线条之间没有空隙，另一方面避免自己不知道5根线的总宽度。'
                    },
                    {
                        headimg:'https://wx2.sinaimg.cn/mw2000/c43067f3ly8ftudf3invpj20s00s0ad6.jpg',
                        content:'评论写5个div时，连着写，然后自己设🌚🌚🌚🌚❀置margin，一方面避免代码压缩后各线条之间没有空隙，另一方面避免自己不知道5根线的总宽度。'
                    },
                    {
                        headimg:'https://wx2.sinaimg.cn/mw2000/c43067f3ly8ftudf3invpj20s00s0ad6.jpg',
                        content:'评论写5个div时，连着写，然后自己设🌚🌚🌚🌚❀置margin，一方面避免代码压缩后各线条之间没有空隙，另一方面避免自己不知道5根线的总宽度。'
                    },
                    {
                        headimg:'https://wx2.sinaimg.cn/mw2000/c43067f3ly8ftudf3invpj20s00s0ad6.jpg',
                        content:'评论写5个div时，连着写，然后自己设🌚🌚🌚🌚❀置margin，一方面避免代码压缩后各线条之间没有空隙，另一方面避免自己不知道5根线的总宽度。'
                    },
                    {
                        headimg:'https://wx2.sinaimg.cn/mw2000/c43067f3ly8ftudf3invpj20s00s0ad6.jpg',
                        content:'评论写5个div时，连着写，然后自己设🌚🌚🌚🌚❀置margin，一方面避免代码压缩后各线条之间没有空隙，另一方面避免自己不知道5根线的总宽度。'
                    },
                    {
                        headimg:'https://wx2.sinaimg.cn/mw2000/c43067f3ly8ftudf3invpj20s00s0ad6.jpg',
                        content:'评论写5个div时，连着写，然后自己设🌚🌚🌚🌚❀置margin，一方面避免代码压缩后各线条之间没有空隙，另一方面避免自己不知道5根线的总宽度。'
                    }
                ]
              };
          },
          onShow() {
              // 初始化一个动画
            // this.showView = true
              var animation = uni.createAnimation({
                  transformOrigin: "50% 0 50%",
                  duration: this.dataList.length*1500, //动画持续1秒
                  timingFunction: 'linear', //linear 全程匀速运动
                  // delay: 2000, //延迟两秒执行动画
              })
            this.animation = animation
            // setTimeout(()=>{
            //     this.scaleAndScale()
            // },3000)
          },
          methods: {
            animationend(){
                let time = Date.parse( new Date() ).toString();//获取到毫秒的时间戳，精确到毫秒
                time = time.substr(0,10)
                console.log('endaa'+time);
            },
              // 定义动画内容
              scaleAndScale() {
                let time = Date.parse( new Date() ).toString();//获取到毫秒的时间戳，精确到毫秒
                time = time.substr(0,10)
                console.log('start'+time);
                if(!this.runOver){
                    console.log('正在运行');
                    return
                }
                this.mainStyle = ''
                console.log('执行一次');
                this.runOver = false
                this.animation.translateY('-100%').step()
                this.animation.translateY('50%').step({
                        transformOrigin: "50% 0 50%",
                        duration: 0, //动画持续1秒
                        timingFunction: 'linear', //linear 全程匀速运动
                        // delay: 2000, //延迟两秒执行动画
                    })
                  // 导出动画数据传递给data层
                  this.animationData = this.animation.export() //每次执行导出动画时 会覆盖之前的动画
                setTimeout(()=>{
                    this.animationStyle = ''
                    this.animationData = this.animation.export()
                    this.runOver = true
                    this.mainStyle = 'position:fixed;right:9999px'
                },this.dataList.length*1500)
              }
          }
      }
  </script>

  <style scoped>
    .img_cont_class{
        width: 70vw;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        padding: 16rpx;
        background-color: #5E8896;
        border-radius: 20rpx;
        opacity: 0.75;
        margin: 10rpx;
    }
    .img_view_class{
        height: 50rpx;
        width: 50rpx;
        border-radius: 50rpx;
        border: 2rpx #FFFFFF solid;
    }
    .content_class{
        color: #FFFFFF;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
      .box {
          width: 750rpx;
          height: 750rpx;
      }

      .box-item {
          width: 250rpx;
          height: 250rpx;
          background-color: #00aaff;
      }
  </style>

 

 点击按钮就是向上滚动的

点击一次滚一次（业务只需要一次所以没有循环，循环的话有机会再加，没机会就算了）

代码有注释，注释其实也可有可无，这些css、js也没什么不好理解的

哦对，@transitionend这个方法————动画完成的方法，我看有的朋友说【wx.createAnimation中没有给出动画执行完毕的回调，至少api文档中并没有写出。】，这个是乱说，我差点被带偏了

这个【明确动画变化的类型是 transitionend 还是 animationend】，所以朋友们在使用相关api的时候或者相关方法的时候要注意对象注意类型。链接在这可以看https://developers.weixin.qq.com/community/develop/doc/000680bc448450026116253cc56c00

比如我这里用的是transition变化，所以得用transitionend方法。

代码，uniapp写法和微信小程序开发者工具写法有点点差别，但是问题不大，改一改就可以用