今天给大家带来的是一个简单的小球抛物线动画效果

场景⚡

假如我们有一个按钮以及一个终点目标,在点击按钮的时候出现一个类似于购物车的小球入库的动画效果

js 复制代码
<template>
  <div ref="boxWrapRef" class="animation_demo">
    <div>
      <a-button @click="handleClick" class="btn_class">点击我</a-button>
    </div>
    <div class="destination_wrap" ref="divRef">
      <a-button type="primary" class="destination_btn">目标点</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
const divRef = ref();
const boxWrapRef = ref();
</script>

<style lang="scss">
.animation_demo {
  padding: 80px;
  width: 800px;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.destination_wrap {
  align-self: flex-end;
}
.box {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background: red;
}
</style>

步骤分解✨

1️⃣获取小球需要到达的目标终点endXendY坐标.

2️⃣创建2个一个X方向一个Y方向的关键帧动画.

3️⃣在点击的时候获取小球初始化的startXstartY坐标并创建小球应用动画

第1步-获取目标终点坐标

js 复制代码
const getStartXY = computed(() => {
  return {
    left: divRef.value.getBoundingClientRect().left,
    top: divRef.value.getBoundingClientRect().top,
    width: destinationRef.value.getBoundingClientRect().width,
    height: destinationRef.value.getBoundingClientRect().height,
  };
})
const left = computed(() => {
  return getStartXY.value.left + getStartXY.value.width / 2 - 10 + "px";
});
const top = computed(() => {
  return getStartXY.value.top + getStartXY.value.height / 2 - 10 + "px";
});

第2步-创建X和Y方向2个关键帧动画

js 复制代码
@keyframes leftChange {
  to {
    left: v-bind(left);
  }
}
@keyframes topChange {
  to {
    top: v-bind(top);
  }
}

第3步-点击创建小球并且应用上动画

js 复制代码
<script setup lang="ts">
...
const handleClick = (e: MouseEvent) => {
   const target = e.target as HTMLImageElement;
  const { x, y, width, height } = target.getBoundingClientRect();
  const startX = x + width / 2;//在中间创建小球需要加上宽度和高度的一般
  const startY = y + height / 2;
  useAnimation(startX, startY);
};
const useAnimation = (startX: number, startY: number) => {
  const div = document.createElement("div");
  div.style.top = startY - 10 + "px";
  div.style.left = startX - 10 + "px";
  div.classList.add("box");
  boxWrapRef.value.appendChild(div);
  div.onanimationend = () => {
    div.remove();
  };
};
...
<script>
<style>
...
.box {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background: red;
  animation: leftChange 1s linear forwards,
    topChange 1s linear forwards;
}
...
</style>

效果♦️

最后一步实现抛物线⭐

将Y轴方向的动画函数换成贝塞尔函数,抛物线就是先上后下,把animationend先注释掉,用谷歌浏览器工作实时调整下

大概调整为cubic-bezier(0.5, -0.5, 1, 1)就差不多了

效果❤️

全部代码

js 复制代码
<template>
  <div ref="boxWrapRef" class="animation_demo">
    <div>
      <a-button @click="handleClick" class="btn_class">点击我</a-button>
    </div>
    <div class="destination_wrap" ref="destinationRef">
      <a-button type="primary" class="destination_btn">目标点</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
const destinationRef = ref();
const boxWrapRef = ref<HTMLDivElement>();
const getStartXY = computed(() => {
  return {
    left: destinationRef.value.getBoundingClientRect().left,
    top: destinationRef.value.getBoundingClientRect().top,
    width: destinationRef.value.getBoundingClientRect().width,
    height: destinationRef.value.getBoundingClientRect().height,
  };
});
const left = computed(() => {
  return getStartXY.value.left + getStartXY.value.width / 2 - 10 + "px";
});
const top = computed(() => {
  return getStartXY.value.top + getStartXY.value.height / 2 - 10 + "px";
});
const handleClick = (e: MouseEvent) => {
  const target = e.target as HTMLImageElement;
  const { x, y, width, height } = target.getBoundingClientRect();
  const startX = x + width / 2;
  const startY = y + height / 2;
  useAnimation(startX, startY);
};
const useAnimation = (startX: number, startY: number) => {
  const div = document.createElement("div");
  div.style.top = startY - 10 + "px";
  div.style.left = startX - 10 + "px";
  div.classList.add("box");
  boxWrapRef.value.appendChild(div);
  div.onanimationend = () => {
    div.remove();
  };
};
</script>

<style lang="scss">
.animation_demo {
  padding: 80px;
  width: 800px;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.destination_wrap {
  align-self: flex-end;
}
.box {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background: red;
  animation: leftChange 0.5s linear forwards,
    topChange 0.5s cubic-bezier(0.5, -0.5, 1, 1) forwards;
}
@keyframes leftChange {
  to {
    left: v-bind(left);
  }
}
@keyframes topChange {
  to {
    top: v-bind(top);
  }
}
</style>

总结✨✨✨

这个简单的效果可以根据场景更换小球为图片或其他样式、修改贝塞尔函数参数的方式可以应用在点击下载等效果上

相关推荐
gnip2 分钟前
做个交通信号灯特效
前端·javascript
小小小小宇2 分钟前
Webpack optimization
前端
尝尝你的优乐美4 分钟前
前端查缺补漏系列(二)JS数组及其扩展
前端·javascript·面试
咕噜签名分发可爱多7 分钟前
苹果iOS应用ipa文件安装之前?为什么需要签名?不签名能用么?
前端
她说人狗殊途21 分钟前
Ajax笔记
前端·笔记·ajax
yqcoder30 分钟前
33. css 如何实现一条 0.5 像素的线
前端·css
excel1 小时前
Nuxt 3 + PWA 通知完整实现指南(Web Push)
前端·后端
yuanmenglxb20041 小时前
构建工具和脚手架:从源码到dist
前端·webpack
rit84324991 小时前
Web学习:SQL注入之联合查询注入
前端·sql·学习
啃火龙果的兔子1 小时前
Parcel 使用详解:零配置的前端打包工具
前端