vue简单实现抛物线小球特效(平抛运动),气泡跳跃到购物车

本文主要是介绍vue简单实现抛物线小球特效(平抛运动),气泡跳跃到购物车,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

实现原理就是先指定起始坐标和目标坐标(本文以鼠标点击的地方为起点,购物车的DOM元素的位置为终点),然后创建小球,根据物理上的平抛运动计算好水平初速度,制定好加速度,设置定时任务,每隔几毫秒移动到下一时刻位置,到达终点后销毁小球。

<template><div class="balling"><div
        v-for="(ball, index) in balls"v-if="ball.show":data-id="ball.id":style="ballclass(ball)"></div></div>
</template><script>
export default {data() {return {size: 15,balls: [],// 控制小球运动速度speed: 10,};},props: ["baldic"],watch: {baldic: {handler() {console.log(this.baldic);this.init();this.move();}}},created() {},methods: {init() {this.balls = [];this.sx = this.baldic.sx;this.sy = this.baldic.sy;this.tx = this.baldic.tx + this.size / 2;this.ty = this.baldic.ty + this.size / 2;this.t = 0;this.a = 0.4;this.tt = Math.pow(Math.abs(this.ty - this.sy) / this.a, 0.5);console.log(this.tt);if (this.ty - this.sy < 0) this.a = -this.a;this.speed = Math.abs(this.tx - this.sx) / this.tt;this.balls.push({show: true,x: this.sx + this.speed * this.t,y: this.sy + this.t * this.t * this.a,id: 110});this.t++;},ballclass(ball) {return {position: "fixed",left: -this.size / 2 + "px", // 这里定死位置不是很合理,但是效果还行top: -this.size / 2 + "px",width: this.size + "px",height: this.size + "px","border-radius": "50%","background-color": "skyblue",transform: `translate3d(${ball.x}px, ${ball.y}px, 0)`, //有过渡不掉帧"z-index": 10,"background-color": "red"};},move() {for (let i in this.balls) {this.balls[i].show = false;}if (Math.abs(this.t) < Math.abs(this.tt)) {this.balls.push({show: true,x: this.sx + this.speed * this.t,y: this.sy + this.t * this.t * this.a,id: 110});this.t++;setTimeout(this.move, 10);} else {console.log(this.balls);this.balls = [];}}}
};
</script><style scoped lang="less">
.balling {width: 0;height: 0;
}
</style>

父组件调用示例

<template>
<div style="width:100%;height:100%" @click="demo">
<balling :baldic="baldic"></balling>
<img src="shoping_car.png" style="position:absolute;buttom:30px;left:40px;" id="shoping_car"></div>
</template>
<script>
import balling from "@/components/balling";export default {components: {balling},methods:{flyball(e) {e = e || this.event;let slsctor ="#shoping_car";var aat = document.querySelector(slsctor);let domrect = aat.getBoundingClientRect();this.baldic = {sx: e.clientX, //出发点x坐标sy: e.clientY, //tx: domrect.x,ty: domrect.y};},demo(){this.flyball(event);}}
}
</script>

这篇关于vue简单实现抛物线小球特效(平抛运动),气泡跳跃到购物车的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/537287

相关文章

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》:本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS?优势:应用场景:DFS配置步骤什么是DFS?DFS指的是分布式文件系统(Distr

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端:安装nfs-utils2、服务端:创建共享目录3、服

利用Python编写一个简单的聊天机器人

《利用Python编写一个简单的聊天机器人》这篇文章主要为大家详细介绍了如何利用Python编写一个简单的聊天机器人,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 使用 python 编写一个简单的聊天机器人可以从最基础的逻辑开始,然后逐步加入更复杂的功能。这里我们将先实现一个简单的

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭