基于JavaScript抛物线动画实现

 

关于抛物线

在 JavaScript 中的抛物线，我们可以理解为，他是在X轴上的匀速运动和Y轴上的变速运动。所以可以使用两个div元素分别实现X轴和Y轴上的动画。

实现方式这里使用的是css的transition、css3的animation动画和JavaScript的requestAnimationFrame 。

搭建基本结构

使用transition过渡

给父元素con添加一个X轴方向的匀速运动过渡效果

 transition: 2s linear;

给子元素ball添加一个Y轴方向的变速运动过渡效果 

 transition: 2s cubic-bezier(0.5, -0.5, 1, 1);

到script里动态设置translate，js动态设置比较灵活。

使用animation动画

        .con {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            left: 100px;
            top: 100px;
            position: fixed;
            /* transition: 2s linear; */
            /*border: 1px dashed #aaa;*/
            animation: moveX 2s infinite;
        }

        .ball {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #0d84ff;
            position: absolute;
            /* transition: 2s cubic-bezier(0.5, -0.5, 1, 1); */
            animation: moveY 2s cubic-bezier(0.5, -0.5, 1, 1) infinite;
        }

如果想动态设置@keyframes，可以像下面那样设置

       const move = `@keyframes moveBall_${index} {
            0%{
                top:${this.y}px;
                left: ${this.x}px;
            }
            50%{
                top:${this.ey}px;
                left: ${this.ex}px;
            }
            100%{
                top:${this.y}px;
                left: ${pox.bx - 100}px;
            }
        }`

        const sheet = document.styleSheets[0];
        sheet.insertRule(move, 0)

使用requestAnimationFrame帧动画

动画曲线的参考：

缓动函数说明

缓动函数速查表

官方缓动函数定义

这段代码实现了一个基于贝塞尔曲线的抛物线动画。主要的实现步骤如下：

1. 定义了一个getBezierPoint函数，该函数接收起点、终点、当前时间和总时间作为参数，然后计算出在当前时间下，物体应该在的位置（x，y）。

2. 定义了一个animate函数，该函数接收起点、终点、父元素、球体元素和总时间作为参数。这个函数首先获取动画开始的时间，然后定义了一个frame函数，该函数会计算当前时间，并根据当前时间调用getBezierPoint函数获取当前位置，然后更新父元素和球体元素的位置。如果当前时间超过总时间，就将父元素和球体元素的位置设置为终点位置。否则，就使用requestAnimationFrame函数来递归调用frame函数，实现动画效果。

3. 在addToCart元素的点击事件中，定义了起点和终点的位置，然后获取了.ball-con元素和.ball元素，最后调用animate函数开始动画。