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

场景⚡

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

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>

总结✨✨✨

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

相关推荐
胡gh4 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
胡gh4 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试
言兴4 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_4 小时前
TailWind CSS
前端·css·postcss
烛阴5 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧5 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment6 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点7 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile7 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年7 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel