椭圆的进度条如何做光点跟随

Creator 2.x
#1

image
想实现一个椭圆形的进度条走动时头部有个光点跟随着，进度条走动没问题了，关键是这个光点怎么计算跟随位置，没什么思路，有没哪位做过的提供下思路？

#2

填充可以试试？

#3

把轨迹函数先写出来，然后光点按照轨迹移动就行了，底图用radial filled设置就行

#4

用几段贝赛尔曲线拟合就行了。

#5

进度条已经用了填充，但光点没法根据填充移动

#6

闲着没事就随便写了下，不知道对你有没有帮助。
done

code
code2142×938 247 KB

#7

有点迷茫，示意图中没看到椭圆啊

#8

我没有实现椭圆进度条，只计算了当前进度与总距离的位置关系，仅供参考 :joy: :joy: :joy:

#9

image
image972×250 29.2 KB

其实是这样的哈

#10

感谢老哥，感觉很接近了，我试着看能否改成我想要的效果

#11

比较笨的方法，直接硬算。

半圆的地方，按角度线性对应，radial filled在这里应该不是匀速的，不过半圆比较小，应该看不出破绽来。

上下的直线，使用求交点的方式。lineLine从cocos的函数修改而来，判断条件只使用0 <= ua，避免返回null。这里应该是可以跟radial filled完全对应上的。
参考楼下的链接，直线部分可以直接用三角函数计算出来，不需要求交点。

image
image804×261 2.13 KB

function getPosition(m, n, progress) {
    let a = Math.atan2(n, m);
    let angle = Math.PI * 2 * progress;
    if(angle > Math.PI * 2 - a) {
        angle -= Math.PI * 2;
    }
    if(angle < a) {
        let angle2 = angle / a * Math.PI / 2;
        return new cc.Vec2(Math.cos(angle2) * n / 2 + m / 2, Math.sin(angle2) * n / 2);
    }
    if(angle < Math.PI - a) {
        return new cc.Vec2(n / 2 / Math.tan(angle), n / 2);
    }
    if(angle < Math.PI + a) {
        let angle2 = (angle - Math.PI / 2) / a * Math.PI /2 + Math.PI / 2;
        return new cc.Vec2(Math.cos(angle2) * n / 2 - m / 2, Math.sin(angle2) * n / 2);
    }
    return new cc.Vec2(-n / 2 / Math.tan(angle), -n / 2);
}

使用getPosition就可以获得progress对应的边缘坐标了。

我只在console里测试了用Graphics绘图，没有测试进度条，应该问题不大。
image

#12

头像倒计时效果实现（含颜色渐变及小尾巴效果） 这个是不是你要的

1赞