Best way to make an image follow a circular path in JQuery?

后端 未结 2 1703
清酒与你
清酒与你 2021-01-27 06:11

I have an image (red, below), that I want to make travel along a circular path. The red image should always end in the same spot as it started.

Notes:

2条回答
  •  长情又很酷
    2021-01-27 07:11

    Do you really need a library, it's not that hard to do

    $(document).ready(function (e) {
        var startAngle = 0;
        var unit = 215;
    
        var animate = function () {
            var rad = startAngle * (Math.PI / 180);
            $('.circle').css({
                left: 250 + Math.cos(rad) * unit + 'px',
                top: unit * (1 - Math.sin(rad)) + 'px'
            });
            startAngle--;
        }
        var timer = setInterval(animate, 10);
    });
    

    FIDDLE

    Here's one that does one loop, stops at the same place etc.

    $(document).ready(function (e) {
        var startAngle = 180;
        var unit = 215;
    
        var animate = function () {
            if (startAngle > -180) {
                var rad = startAngle * (Math.PI / 180);
                $('.circle').css({
                    left: 250 + Math.cos(rad) * unit + 'px',
                    top: unit * (1 - Math.sin(rad)) + 'px'
                });
                startAngle--;
                setTimeout(animate, 10);
            }
        }
    
        $('.circle').on('click', function() {
            startAngle = 180;
            animate();
        });
    
    });
    

    FIDDLE

提交回复
热议问题