告白气球，风吹到对街～

EasyChan
931 阅读3分钟

“刚刚过去的「520」，不知道大家有没有出去约会呢？”，“什么，没有？”，“那关于「5.20」的需求总该有了吧？”

没错，今天要讲的就是关于「520」的需求。

👨‍💼: 今年的「520」，做个比较浪漫的需求吧。

🧑‍💻: 「塞纳河畔 左岸的咖啡～」那种吗？

👨‍💼: 没错，就是「告白气球🎈」！

🧑‍💻: 懂了！

需求

很简单，从接口拿到用户放飞的告白气球列表，然后一个个像氢气球🎈一样飘起来，不停循环这个过程。

效果图：

屏幕录制2023-05-23 上午10.23.59.2023-05-23 10_27_03 AM.gif

实现

根据需求，需要考虑到以下三点：

  1. 顺序放飞；
  2. 循环播放；
  3. 每个气球的初始位置；

第一点，需要顺序放飞，也就意味着排在前🎈会优先放飞，这一点跟「队列」的「先进先出」相似，所以用「队列」来控制放飞顺序，每次「出队」就放飞一个🎈；

第二点，循环播放，意味着被放飞的🎈在飘到顶部后，需要重新压入的「队尾」；

第三点，每个气球的初始位置应该随机，但随机位置的范围应该排除掉上一个🎈的位置，避免出现🎈重叠问题；

考虑好以上问题，就可以开始着手编码：

获取数据

// 气球数据
const total = ref([])
const fetch = () => {
    // 模拟从接口拉取数据
    get()
    .then(({list}) => {
      total.value = list
    })
}

创建队列

// 气球队列
const queue = ref([])
// 入队
const queueIn = (ele) => {
  queue.value.push(ele)
}
// 出队
const queueOut = () => {
  queue.value.shift()
}

入队

接下来，需要把total的值，一个个压入queue中，其中用到了vant的倒计时组件，当curIndex === total.length时，当倒计时结束，就会触发onFinish。curIndex用于记录当前入队的气球下标，把curIndex重置为了0，以此来实现循环。

// 当前气球下标
const curIndex = ref(0)
const countDown = useCountDown({
  time: 0,
  onFinish: () => {
    createBalloon(curIndex.value)
  },
})
// 创建气球入队
const createBalloon = (len) => {
  if (len === total.value.length) len = 0
  queueIn(total.value[len])
  len++
  curIndex.value = len
  countDown.reset(1000)
  countDown.start()
}

随机位置

由于每生成的气球的位置需要随机，因此需要随机创建气球位置，同时也要避免位置与上个气球重合。

const queueIn = (ele) => {
  // 随机范围
  let cur = random(POSITION_RANGE[0], POSITION_RANGE[1])
  let [rangeL, rangeR] = [0, 0]
  // 上个气球
  const pre = queue.value.at(-1)
  // 避免重叠问题
  if (pre) {
    const { position } = pre
    rangeL = parseInt(position - BALLOON_W)
    rangeR = parseInt(position + BALLOON_W)
    // 排除上个气球的位置区间
    while (rangeL < cur && cur < rangeR) {
      cur = random(POSITION_RANGE[0], POSITION_RANGE[1])
    }
  }
  // 避免气球数量过少时，队列中出现相同气球
  if (queue.value.some(({ flyingId }) => flyingId === ele.flyingId)) return
  queue.value.push({ ...ele, position: cur })
}

DOM & CSS

DOM是很普通的ul列表，CSS是普通位移动画，为了让气球更加真实，加了「左右摇晃」的动画效果，位移的「三次贝塞尔曲线函数」为easa-in。通过监听animationend事件，动画结束后，就把该气球「出队」。

<ul class="balloon-list">
    <li v-for="balloon in queue" :style="{ left: balloon.position + 'px' }" :key="balloon.id" @animationend="queueOut" class="balloon-item">
    </li>
</ul>

<style>
.balloon-item {
    position:absolute;
    width:$BALLOON_W;
    height:$BALLOON_H;
    animation-name:balloon-up,swing;
    animation-duration:12s,3s;
    animation-iteration-count:1,infinite;
    animation-timing-function:ease-in,ease-in-out;
}
@keyframes balloon-up {
    0% {
        bottom:calc(-1 * $BALLOON_H);
    }
    85% {
        opacity:1;
    }
    100% {
	bottom:calc($CONTAINER_H);
	opacity:0;
    }
}

@keyframes swing {
    0% {
        transform:rotate(-10deg);
    }
    50% {
	transform:rotate(0deg);
    }
    100% {
	transform:rotate(-10deg);
    }
}
</style>

启动

现在是「万事俱备，只欠东风」，只需要在获取到total时，调用createBalloon创建🎈入队，因为createBalloon会重置定时器，结束后再调用createBalloon，不停循环该过程。

const fetch = () => {
    // 模拟从接口拉取数据
    get()
    .then(({list}) => {
      total.value = list
      // 创建第一个气球
      if (list[0]) createBalloon(0)
    })
}

完整代码

<template>
  <div class="balloon">
    <div class="balloon-cover">
      <ul class="balloon-list">
        <li v-for="balloon in queue" :style="{ left: pxtovw(balloon.position) + 'vw' }" :key="balloon.id" @animationend="queueOut" class="balloon-item">
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { computed, watch, ref, reactive } from 'vue'
import { useCountDown } from 'vant'

const MAX_TIME = 1400 // 气球最迟出现时间
const MIN_TIME = 1000 // 气球最早出现时间

const BALLOON_W = 210 // 气球宽度（px）
const POSITION_RANGE = [0, 720 - BALLOON_W] // 气球显示范围

// px 转 vw
const pxtovw = (px) => {
  return (100 * px) / 750
}

// 生成随机数
const random = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

// 气球列表
const queue = ref([])
// 入队
const queueIn = (ele) => {
  let cur = random(POSITION_RANGE[0], POSITION_RANGE[1])
  let [rangeL, rangeR] = [0, 0]
  const pre = queue.value.at(-1)
  // 避免重叠问题
  if (pre) {
    const { position } = pre
    rangeL = parseInt(position - BALLOON_W)
    rangeR = parseInt(position + BALLOON_W)
    // 排除上个气球的位置区间
    while (rangeL < cur && cur < rangeR) {
      cur = random(POSITION_RANGE[0], POSITION_RANGE[1])
    }
  }
  // 避免气球数量过少时，队列中出现相同气球
  if (queue.value.some(({ flyingId }) => flyingId === ele.flyingId)) return
  queue.value.push({ ...ele, position: cur })
}
// 出队
const queueOut = () => {
  queue.value.shift()
}

// 所有气球
const total = ref([])
const curIndex = ref(0)
const countDown = useCountDown({
  time: 0,
  onFinish: () => {
    createBalloon(curIndex.value)
  },
})
const createBalloon = (len) => {
  if (len === total.value.length) len = 0
  queueIn(total.value[len])
  len++
  curIndex.value = len
  countDown.reset(random(MIN_TIME, MAX_TIME))
  countDown.start()
}

// 放飞气球数据
const fetch = () => {
  get()
    .then(({ list }) => {
      total.value = list
      if (list[0]) createBalloon(0)
    })
    .catch((err) => {
      toast(err)
    })
}

onMounted(() => {
    fetch()
})
</script>
<style lang="scss" scoped>
$BALLOON_W: 210px; // 气球宽度
$BALLOON_H: 270px; // 气球高度
$CONTAINER_W: 720px; // 气球容器宽度
$CONTAINER_H: 1283px; // 气球容器高度
.balloon {
  position: relative;

  width: 750px;

  .balloon-cover {
    display: flex;
    justify-content: center;

    position: relative;
    z-index: 1;

    width: 750px;
    height: 1322px;

    padding-top: 30px;

    overflow: hidden;

    background: url(@img/bg.png);
    background-size: 100% 100%;
  }

  .balloon-list {
    position: relative;
    z-index: 1;

    width: $CONTAINER_W;
    height: $CONTAINER_H;

    overflow: hidden;

    border-radius: 15px;

    .balloon-item {
      position: absolute;

      // 注意修改BALLOON_W宽度
      width: $BALLOON_W;
      height: $BALLOON_H;

      animation-name: balloon-up, swing;
      animation-duration: 12s, 3s;
      animation-iteration-count: 1, infinite;
      animation-timing-function: ease-in, ease-in-out;

      background: url(@img/balloon.png) top center no-repeat;
      background-size: 204px 265px;
      
      
      @keyframes balloon-up {
        0% {
          bottom: calc(-1 * $BALLOON_H);
        }
        85% {
          opacity: 1;
        }
        100% {
          bottom: calc($CONTAINER_H);
          opacity: 0;
        }
      }
      @keyframes swing {
        0% {
          transform: rotate(-10deg);
        }

        50% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(-10deg);
        }
      }
    }
  }
}
</style>

最后

祝大家生活愉快，工作顺利！

avatar
文章
阅读
粉丝