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

纯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～哦