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

Question

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

Answer 1

纯CSS3我知道的方法里面搞不出来因为CSS3动画中没有对路径的操作，或者说不好搞除非你把每一帧的变化都写上。如果会AE可以考虑先用AE制作动画，然后使用Lottie导出web可用的json文件，这样可以做出很复杂的动画。不过这个方法我还没用过可以去看Lottie的官方文档
用Canvas实现
下面说一个使用Canvas制作的方法，如果要用操作DOM来实现动画，原理是一样的只不过把绘制那一块改为设置元素的定位。先看一下Demo
定义小球类
//创建一个小球的构造函数
functionO(){}
//给构造函数添加继承属性
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π
letradian=this.x/canvas.width*Math.PI*2;
//计算偏移高度,因为Math.sin()返回值是-1~1的数字,所以要将这个值转化为真正移动的高度,就是容器的一班高度减去球直径
letheight=(canvas.height-this.r*2)/2
this.y=this.h+Math.sin(radian)*height;
}
}
绘制小球
//创建小球并初始化
varo=newO();
o.init();
//开始动画
functionanimation(){
//刷新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。