如何使用css3让一个元素做正弦曲线运动？

Question

利用css3或者再加一些js有没有办法可以做出一个类似正弦运动的轨迹？

Answer 1

纯CSS3我知道的方法里面搞不出来因为CSS3动画中没有对路径的操作，或者说不好搞除非你把每一帧的变化都写上。如果会AE可以考虑先用AE制作动画，然后使用Lottie导出web可用的json文件，这样可以做出很复杂的动画。不过这个方法我还没用过可以去看Lottie的官方文档

用Canvas实现

下面说一个使用Canvas制作的方法，如果要用操作DOM来实现动画，原理是一样的只不过把绘制那一块改为设置元素的定位。
先看一下Demo

定义小球类

// 创建一个小球的构造函数
function O() { }
// 给构造函数添加继承属性
O.prototype = {
    init: function () {
        // X轴(正弦运动中心线的位置)
        this.h = canvas.height/2;
        // 在X轴所处的位置
        this.x = 0;
        // 在Y轴所处的位置
        this.y = this.h;
        // 小球半径
        this.r = 20;
        // 小球运动的速度
        this.v = 10;
        // 小球颜色
        this.color = "rgb(255, 68, 68)";
    },
    draw: function () {
        // 绘制小球
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        this.updata();
    },
    // 更新小球位置
    updata: function () {
        // 如果横向超出Canvas宽度就回到起点
        if(this.x > canvas.width) {
            this.x = 0;
        }
        // 横轴移动
        this.x += this.v;
        // 计算在纵轴的位置,中心位置加上偏移
        // 计算弧度,因为Math.sin()的参数是弧度,将整个宽度看为一个周期,X处所占的弧度就为,起点到X距离与宽度之比乘以2π
        let radian = this.x / canvas.width * Math.PI * 2;
        // 计算偏移高度,因为Math.sin()返回值是-1~1的数字,所以要将这个值转化为真正移动的高度,就是容器的一班高度减去球直径
        let height = (canvas.height - this.r * 2) / 2
        this.y = this.h + Math.sin(radian) * height;
    }
}

绘制小球

// 创建小球并初始化
var o = new O();
o.init();
// 开始动画
function animation() {
    // 刷新Canvas
    ctx.fillStyle = "rgba(255,255,255)";
    ctx.fillRect(0, 0, 1000, 500);
    // 绘制小球
    o.draw();
    // 调用下一帧
    aimnid = requestAnimationFrame(animation);
}

注释里面都已经写的很清楚了，我就不解释了，完整代码在这里查看完整代码
如果对你有帮助请给一个Star～哦

Answer 2

有 JS 就好办了，算出来位置然后赋给元素就行了。正弦用 Math.sin，不过参数是弧度，所以像我们习惯的角度需要转换一下：Math.PI * 角度 / 180。

Answer 3

css3不能完全按照正弦曲线来做运动的轨迹，但可以模拟，比如曲线上的几个点是(0,0),(1,1),(2,0),(3,1),(4,0),(5,1),动画逻辑如下：

@keyframes myanimate
{
0%   {left: 0;top: 0;}
20%  {left: 1;top: 1;}
40%  {left: 2;top: 0;}
60% {left: 3;top: 1;}
80% {left: 4;top: 0;}
100% {left: 5;top: 1;}
}

模拟点越密集，越接近正弦曲线，以上只是思路，还要考虑点间距和播放速度，希望对你有帮助