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寫法和微信小程序開發者工具寫法有點點差別，但是問題不大，改一改就可以用