Vue小球抛物线效果

最新推荐文章于 2022-03-16 21:36:44 发布

solo游游

最新推荐文章于 2022-03-16 21:36:44 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： vue css vue.js javascript

本文链接：https://blog.csdn.net/u013985712/article/details/106928571

版权

本文通过cube-ui的create-api，展示了如何利用Vue、CSS和JavaScript制作小球抛物线动画。动画由内外两层组成，内层水平移动，外层应用贝塞尔曲线实现抛物线轨迹。在动画结束后，小球会自动销毁。具体实现细节包括ball组件的模板、JS和CSS代码，以及组件在main.js中的全局注册。

摘要由CSDN通过智能技术生成

使用cube-ui的create-api，制作小球抛物线动画，动画结束后小球自动销毁。讲述先欠着，有时间再补，先上效果：
在这里插入图片描述代码实现：
首先，ball 组件，需要两层，内层水平线性移动，外层垂直贝塞尔曲线运动，实现抛物线效果。
组件模板部分：

<template>
  <transition name="ball"
    @before-enter="beforeDrop"
    @enter="dropping"
    @after-enter="afterDrop"
  >
    <div class="ball" v-show="btnShow">
      <div class="inner"></div>
    </div>
  </transition>
</template>

js部分：

export default {
   
  name: 'Ball',
  data () {
   
    return {
   
      btnShow: false,
      startPos: {
   },
      stopPos: {
   }
    }
  },
  methods: {
   
    // 对外接口
    drop (startPos, stopPos) {
   
      this.btnShow = !this.btnShow
      this.startPos = startPos
      this.stopPos = stopPos
    },
    bef