Cocos 曲线运动的几种方法介绍

最新推荐文章于 2024-11-16 18:54:52 发布

永远的毅嘉

最新推荐文章于 2024-11-16 18:54:52 发布

阅读量2.7k

点赞数

文章标签： cocos2d javascript

本文链接：https://blog.csdn.net/qq_43316276/article/details/125374385

版权

这篇博客介绍了如何利用缓动、贝塞尔曲线和向量计算来创建动画编辑器中的平滑运动。通过设置起点和终点的高点，使用`.bezierTo()`方法可以实现贝塞尔曲线的动画。同时，通过向量法和三角函数计算，如`Math.cos()`和`Math.sin()`，可以精确控制物体沿圆周运动，实现了类似圆规画圆的效果。博客中还提供了具体的代码示例，展示了如何用JavaScript进行这些计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.动画编辑器

略

2.缓动--->贝塞尔曲线

.bezierTo(缓动时间，起点的高点(垂直于起点的一个坐标，决定曲线的半径)，终点的高点(垂直于终点的一个坐标，决定曲线的半径)，终点坐标)

3.向量--->类似圆规画圆

        //法3 向量计算
        //找圆心 确定圆心
        let axleV = cc.v2(0,0);
        //确定半径 ---> 向量，指向圆边
        let spokeV = cc.v2(-300,0);
        //决定多少个边 ---> 经过多少个点
        let sideCount = 90;
        this.schedule(()=>{
            let pos = axleV.add(spokeV);
            this.node.setPosition(pos);
            spokeV.rotateSelf(-360 / sideCount * Math.PI / 180);
        },0.01);

4.三角函数计算

        //法4 三角函数
        // x = r * cosα
        // y = r * sinα
        let center = cc.v2(0,0);
        //半径
        let radius = 300;
        //旋转次数 负数表示方向
        let angle = 0;
        this.schedule(()=>{
            //计算每一次x，y坐标为多少
            let posX = center.x - radius * Math.cos(angle * Math.PI / 180);
            let posY = center.y - radius * Math.sin(angle * Math.PI / 180);
            angle -= 1;
            this.node.setPosition(cc.v2(posX,posY));
        },0.001);