javascript-Snap.svg从点差的斜率获取旋转

我正在制作一个动画,在该动画中,我需要使该平面遵循给定的路径,并且看起来像是在“环绕”地球. Here is the codePen,如您所见,这非常简单.

我的问题是角度,我试图通过计算两个点的斜率并将其转换为度数来查看在平面通过路径时应旋转多少角度.

即使我添加了一个epsilon来安全检查各点之间的一致性差异以及其他所有安全检查,但我发现当它接近-90度时,它会改变符号,而不是传递到另一个象限120度,依此类推.

我可以理解,这是由于以下事实造成的：

您可以在控制台的中间点看到这种情况(显示：坡度,反正切,度).

为了解决这个问题,我将使用newPoint.x-firstPoint.x,newPoint.y-firstPoint.y作为其参数,重复使用Math.atan2().它以正确的值(CodePen here)开始.但是它仍然进行时髦的旋转.

这是代码(我不会发布SVG图像,因为它非常大)：

JS

        var snap = Snap('#Globe_1_');

        // Trail 1
        var trail1 = snap.path('M354.3,707.9c13.9,14.5,27.9,27.2,41.7,38c13.9,10.9,27.2,19.3,39.3,25.4 c12.6,6.1,24.8,9,35.7,10.3c10.9,1.2,21.1-1.2,30.2-5.4c17-7.8,29-24.8,35.7-48.3c7.2-23.5,9-55,5.4-91.8 c-3.7-36.8-12-77.9-24.8-120.9c-12.6-43-30.2-87.6-51.9-131.7c-21.1-44.1-45.2-85.8-70.7-122.7s-50.8-69.5-77.3-95.5 c-27.2-26-52.5-43.6-75.6-53.2c-22.9-9.7-43.6-10.3-60.4-2.5c-16.3,7.8-27.9,24.2-35.1,47.7c-7.2,23.5-9.7,53.8-6.6,88.8')
            .attr({
                id: 'trail1',
                fill:'none', 
                stroke: '#C25353',
                strokeMiterLimit: 10
            });

        var len = trail1.getTotalLength();

        var plane1 = snap.path('M375.7,708.4c0.1,0.8-0.7,1.8-1.6,1.9l-10.4,0.2l-8.4,15.1l-4,0l4.1-14.6l-7.8-0.2l-2.7,3.2L342,714 l1.6-4.9l-1.7-5.4l3.1,0.1l2.5,3.6l7.8,0.2l-4.3-14.6l4,0l8.3,14.7l10.4-0.2C375.5,706.7,376,707.1,375.7,708.4z') .attr({fill: '#CDCCCC' });


        var initPoint = trail1.getPointAtLength( 1 ),
            lastPoint,
            slope = 0,
            lastLen = 0;

        Snap.animate(0, len, function( value ) {

            movePoint = trail1.getPointAtLength( value );

            if (lastPoint && ( Math.abs(lastPoint.y - movePoint.y) > 1 || Math.abs(lastPoint.x - movePoint.x) > 1 )) {

                var slope_val = (lastPoint.y - movePoint.y) / (lastPoint.x - movePoint.x),
                    slope_atan = Math.atan2(movePoint.x - initPoint.x, movePoint.y - initPoint.y),
                    slope_deg = Snap.deg(slope_atan);

                slope = slope_deg;
                console.log('Capturing rotation', slope_val, slope_atan, slope_deg);
                lastLen = value; 

            }

            plane1.transform( 't' + parseInt(movePoint.x - 350) + ',' + parseInt( movePoint.y - 700) + 'r' + slope);

            lastPoint = movePoint;

        }, 5000, mina.linear);

你能帮我一下吗,谢谢

解决方法:

我不确定您将要获得的全部效果,如果是纯2d角度,Snap已经内置了此功能(从沿线的点返回角度),因此无需太费劲.

element.getPointAtLength()返回角度alpha,因此可以使用movePoint.alpha.

下面的相关行,并删除了其他计算行.

plane1.transform( 't' + parseInt(movePoint.x - 350) + ',' + parseInt( movePoint.y - 700) + 'r' + (180 + movePoint.alpha));

codepen

标签：snap-svg,svg,javascript
来源： https://codeday.me/bug/20191120/2040443.html