一、需求

需要在微信小程序中实现一个复杂的动画：盲盒的开奖动画，CSS不好实现复杂的动画，还有一个方案是用gif图，但是图片太大了会有性能和卡顿的问题，图片小了动画的流畅度和清晰度都不行，这时候就适合用 lottie 动画库了。关于什么是 lottie 请自行百度，这个动画库太强大了，但是最大的缺点就是需要 UI 在设计软件上导出动画的 json 文件，没有这个 json 文件啥也做不了。
我不会设计 UI 动画，而且我们创业公司也没有专业的 UI 设计给我导json，所以我选择网上找现成的，推荐这个网站：免费的 lottie 动画(可能需要翻墙)

二、准备材料

找到自己想要的动画并导出 json 文件放到线上(后续需要一个线上的地址)，然后安装微信小程序中使用的 lottie 版本

npm install --save lottie-miniprogram

1

三、代码

我是用 uniapp + vue3 开发的，html 中创建一个画布

<canvas
  canvas-id="lottieCanvas"
  id="lottieCanvas"
  class="lottie-canvas"
  type="2d"
  style="width: 100vw; height: 100vw"
></canvas>

1
2
3
4
5
6
7

import lottie from 'lottie-miniprogram'

const instance = getCurrentInstance()
let animation = null
onMounted(() => {
  initCanvas()
})
function initCanvas() {
  uni
    .createSelectorQuery()
    .in(instance.proxy)
    .select('#lottieCanvas')
    .node((res) => {
      const canvas = res.node
      const windowWidth = uni.getWindowInfo().windowWidth

      const ctx = canvas.getContext('2d')
      const dpr = uni.getWindowInfo().pixelRatio

      // 设置动画的尺寸
      canvas.width = windowWidth * dpr
      canvas.height = windowWidth * dpr
      // 倍数调整，保证展示效果清晰度
      ctx.scale(dpr, dpr)
      lottie.setup(canvas)
      animation = lottie.loadAnimation({
        loop: false, // true 无限循环、传入 number 值循环指定次数
        autoplay: false, // true 动画加载完后自动播放
        rendererSettings: {
          context: ctx, // 必填，需传入渲染使用的 canvas 上下文对象
        },
        // 必填，animationData 和 path 二选一
        // animationData: ..., // 加载动画的 json 对象
        path: 'http://xxx/lottie.json', // 加载动画的线上 url 的 json 文件（只支持网络地址）
      })

       animation && animation.addEventListener('complete', () => {
         console.log('动画播放结束')
       })
    })
    .exec()
}

// 如果需要再次从头播放动画
animation.goToAndPlay(0, true)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

四、完整代码

我需要在动画播放完成后出现中奖物品的图片，各位结合自己的业务来做

<wd-popup
    v-model="show"
    custom-class="wd-popup-draw"
    :z-index="10"
    :close-on-click-modal="false"
    @before-enter="open()"
    @close="close()"
    :duration="0"
    transition="fade"
  >
    <view class="container">
      <view class="content">
        <canvas
          canvas-id="lottieCanvas"
          id="lottieCanvas"
          class="lottie-canvas"
          type="2d"
          style="width: 100vw; height: 100vw"
        ></canvas>
        <view class="good-img">
          <image
            :src="goodImg"
            :class="['img', showGood ? 'scale-in-center' : '']"
            mode="aspectFill"
            alt="中奖物品"
          />
          <!-- 高光扫过动画 -->
          <div class="shine" v-if="showShine"></div>
        </view>
        <view :class="['btn', showbtn ? 'showbtn' : '']">
          <view class="btn-item" v-if="showOpenAgain">
            <wd-button type="primary" block @click="openAgain()">继续开奖</wd-button>
          </view>
          <view class="btn-item" v-else>
            <wd-button type="success" block @click="close()">确认</wd-button>
          </view>
        </view>
      </view>
    </view>
  </wd-popup>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

const goodImg = ref('') // 当前中奖物品的图片
const currentIndex = ref(0) // 当前开奖第几个(单笔订单可能多次开奖)
const show = defineModel('show', { required: true }) // 我是做在一个弹窗组件里，这里控制显示隐藏
const instance = getCurrentInstance()
let animation = null
onMounted(() => {
  initCanvas()
})

onUnmounted(() => {
  // 页面退出时需销毁组件
  animation && animation.destroy()
})

const showGood = ref(false)
const showbtn = ref(false)
const showShine = ref(false)
function open() {
  currentIndex.value = 0
  openAnimation()
  // 更改订单的开奖状态
  openBoxHttp({ orderId: props.orderId }).then((res) => {})
}
function openAgain() {
  currentIndex.value++
  openAnimation()
}

const showOpenAgain = computed(() => {
  return currentIndex.value + 1 < props.goodsList.length
})

function openAnimation() {
  showGood.value = false
  showbtn.value = false
  showShine.value = false
  goodImg.value = props.goodsList[currentIndex.value].picThumb
  animation && animation.goToAndPlay(0, true)
  // 手动用定时器调节，使完整动画更流畅
  // 显示中奖物品
  setTimeout(() => {
    showGood.value = true
  }, 2200)
  // 显示按钮和高光扫过动画
  setTimeout(() => {
    showbtn.value = true
    showShine.value = true
  }, 2900)
}

function initCanvas() {
  uni
    .createSelectorQuery()
    .in(instance.proxy)
    .select('#lottieCanvas')
    .node((res) => {
      const canvas = res.node
      const windowWidth = uni.getWindowInfo().windowWidth

      const ctx = canvas.getContext('2d')
      const dpr = uni.getWindowInfo().pixelRatio

      // 设置动画的尺寸
      canvas.width = windowWidth * dpr
      canvas.height = windowWidth * dpr
      // 倍数调整，保证展示效果清晰度
      ctx.scale(dpr, dpr)
      lottie.setup(canvas)
      animation = lottie.loadAnimation({
        loop: false, // true 无限循环、传入 number 值循环指定次数
        autoplay: false, // true 动画加载完后自动播放
        rendererSettings: {
          context: ctx, // 必填，需传入渲染使用的 canvas 上下文对象
        },
        // 必填，animationData 和 path 二选一
        // animationData: ..., // 加载动画的 json 对象
        path: 'http://xxx.json', // 加载动画的线上 url 的 json 文件（只支持网络地址）
      })
    })
    .exec()
}

function close() {
  // 通知列表页刷新数据
  uni.$emit('update')
  show.value = false
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

.container {
  position: relative;
  padding-top: 40px;
  top: -40px;
  .content {
    position: relative;
    padding-bottom: 50px;
    .lottie-canvas {
      position: relative;
      z-index: 10;
    }
    .good-img {
      position: absolute;
      top: 41%;
      left: 50%;
      width: 50%;
      transform: translate(-50%, -50%);
      z-index: 20;
      overflow: hidden;
      height: 380px;
      .img {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 16;
        opacity: 0; // 让图片预加载，不能设置 display: none;
      }
      .scale-in-center {
        opacity: 1;
        animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      }
      .shine {
        position: absolute;
        top: -50%;
        left: -100%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
          120deg,
          rgba(255, 255, 255, 0) 40%,
          rgba(255, 255, 255, 0.6) 50%,
          rgba(255, 255, 255, 0) 60%
        );
        transform: rotate(0deg);
        animation: shine-move 2s linear infinite;
        pointer-events: none;
        z-index: 19;
      }
    }
    .btn {
      position: absolute;
      bottom: 200px;
      left: 25%;
      display: none;
      flex-direction: column;
      align-items: center;
      // gap: 15px;
      z-index: 15;
      transition: all 0.5 linear;
      width: 50%;
      .btn-item {
        width: 100%;
      }
    }
    .showbtn {
      bottom: 0;
      display: flex;
    }
  }
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes shine-move {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(0deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(0deg);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

五、最终效果

截的 gif 图有点模糊，实际效果是很清晰的
markdown图片

在微信小程序中使用 lottie 动画

发表评论

共0条评论