Js / Jq拖动，旋转和动画.js

Question

我的圈子动画有问题。我希望我能抓住这个轮子并旋转它。在50度我想开始animate（）函数。在控制台中，我看到动画已经启动，但是，圆圈​​不会旋转。

var dragging = false,
    actual_rotate = 0,
    fake_rotate = 0,
    start_drag_degree = 0,
    point_y = 0,
    run_anim_after = 0,
    a
end_degree = 0,
    // nowBlockAnim = 1,
    nowBlockAnim = 0,
    degree = 0;

var draw = 0;



var cssDegsCache = 0;
var cssDegs = 0;

function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper) {
    // run_anim_after = 0;
    // nowBlockAnim = 0;
    if (nowBlockAnim == 0) {
        if (verifyDataCheck() == 1 && run_anim_after == 0) {
            var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width() / 2;
            var y = -1 * (yCoordinate - offsetSelector.offset().top - offsetSelector.height() / 2);
            var theta = Math.atan2(y, x) * (180 / Math.PI);

            var cssA = convertThetaToCssDegs(theta);

            // if(cssDegsCache > cssA){
            //     cssDegs = cssDegsCache - cssA;
            //     cssDegsCache += cssDegs;
            // }else{
            //     cssDegs = cssA - cssDegsCache;
            //     console.log(cssDegs);
            //     cssDegsCache += cssDegs;
            // }

            if (cssDegsCache > cssA) {
                console.log((cssDegsCache - cssA));
                draw += (cssDegsCache - cssA);
                // if((cssDegsCache - cssA) > 84){
                //     animate('#DragableArrow');
                // }
            } else {
                console.log((cssA - cssDegsCache));
                draw += (cssA - cssDegsCache);

            }

            cssDegs = cssA;
            cssDegsCache = cssA;
            var rotate = 'rotate(' + cssDegs + 'deg)';
            cropper.css({
                '-moz-transform': rotate,
                'transform': rotate,
                '-webkit-transform': rotate,
                '-ms-transform': rotate
            });
            $('body').on('mouseup', function(event) {
                $('body').unbind('mousemove')
            });


            if (draw > 50) {
                start_drag_degree = cssDegs;
                nowBlockAnim = 1;
                animate('#DragableArrow');
            }
        }
    }
}

function convertThetaToCssDegs(theta) {
    var cssDegs2 = 90 - theta;
    return cssDegs2;
}

$(document).ready(function() {

    $('#DragableArrow').on('mousedown', function() {

        $('body').on('mousemove', function(event) {
            rotateAnnotationCropper($('#DragableArrow').parent(), event.pageX, event.pageY, $('#DragableArrow'));
        });

    });


    $('.RunWheel').on('click', function(e) {
        e.preventDefault();

        $.when($('.kolo-form').parent().fadeOut()).done(function() {
            var fakesizeW = $('.koloimg').width() * 1.3;
            var fakesizeH = $('.koloimg').height() * 1.3 + 50;
            // $('.koloimg').css({'opacity':1});
            $('.koloDiv').parent().css({
                'height': fakesizeH
            });

            var CSStransforms = anime({
                targets: '.koloDivResize',
                translateX: '50%',
                translateY: 70,
                scale: 1.2,
            });

            var CSStransforms = anime({
                targets: '.koloimg',
                opacity: 1
            });

            $('#kolo_fortuny_Potwierdzenie').find('.kolo-form').parent().fadeIn();

            $.each($('.kolotexty').find('span'), function(z, x) {
                var tt = $(this);
                tt.css({
                    'left': parseFloat(tt.css('left')) - 13 + 'px'
                })
            })

            nowBlockAnim = 0;
        });
    })

    $("input[mode='fortuna']").change(function() {
        verifyData();
    });
});




function animate(target) {
    run_anim_after = 0;
    nowBlockAnim = 0;

    // if (verifyDataCheck() == 0) {
    //     return false;
    // }

    // if (nowBlockAnim == 1) {
    //     return false;
    // }


    if (run_anim_after == 0) {
        run_anim_after = 1;

        $('.kolotexty').find('span').removeAttr('style');

        var basicTimeline = anime.timeline({
            autoplay: true,
            direction: 'alternate',
            loop: false,
            update: function(anim) {
                console.log(anim.progress);
                if (anim.progress == 100) {
                    matematyka1(target);
                }
            },

            complete: function(anim) {
                // matematyka1(target);
            }
        });

        fake_rotate = actual_rotate;

        var d1 = random(100,250),
        d2 = random(290,430),
        d3 = random(700,900),
        d4 = random(1000,1500),
        d5 = random(500,800),
        d6 = random(300,500),
        d7 = random(50,120);

        end_degree = d7+d6+d5+d4+d3+d2+d1;

        console.log('d6:'+d7)

        var cachedegre = Math.round(end_degree/20)+1;
        end_degree = (cachedegre*20)+10;

        console.log('end_degree:'+end_degree)

        basicTimeline
        .add({
            targets: target,
            'rotate': '+='+d1,
            duration: 1600,
            easing: 'easeInOutQuad',
            offset: 0
        })
        .add({
            targets: target,
            'rotate': '+='+d2,
            duration: 2200,
            easing: 'easeInOutQuad',
            offset: 0
        })
        .add({
            targets: target,
            'rotate': '+='+d3,
            duration: 2700,
            easing: 'easeInOutQuad',
            offset: 0
        })
        .add({
            targets: target,
            'rotate': '+='+d4,
            duration: 3000,
            easing: 'easeInOutQuad',
            offset: 0
        })
        .add({
            targets: target,
            'rotate': '+='+d5,
            duration: 3600,
            easing: 'easeInOutQuad',
            offset: 0
        })
        .add({
            targets: target,
            'rotate': '+='+d6,
            duration: 4200,
            easing: 'easeInOutQuad',
            offset: 0
        })
        .add({
            targets: target,
            'rotate': '+='+d7,
            duration: 4800,
            easing: 'easeInOutQuad',
            offset: 0
        })
        .add({
            targets: target,
            'rotate': end_degree,
            duration: 5500,
            //easing: 'easeInOutQuad',
            offset: 0
        })
        ;



        basicTimeline.play();
        $('.kolotexty').removeClass('withoudDrag');

    }
}


function matematyka1(target) {

    // a teraz matematyka <hura>
    if (end_degree < 0) {
        end_degree = end_degree * (-1);
    }


    var ilosc_kolek = 18;
    var degSingle = 360 / ilosc_kolek;
    var c1 = Math.ceil(end_degree / 360) - 1;
    var c2 = c1 * 360;
    var c3 = end_degree - c2;
    // var nagrodaElem = Math.floor(c3/18)-1;
    var nagrodaElem = Math.floor(c3 / 18);
    // var nagrodaElem = Math.ceil(c3/18);
    // var nagrodaElem = Math.round(c3/18);

    console.log(c3 / 18);
    console.log(nagrodaElem);

    if (nagrodaElem <= 0) {
        nagrodaElem = 1;
    }

    if (nagrodaElem > 18) {
        nagrodaElem = 1;
    }


    data = {
        imienazwisko: $('[name="imienazwisko"]').val(),
        email: $('[name="email"]').val(),
        tel: $('[name="tel"]').val(),
        nagroda: $('[data-k="' + nagrodaElem + '"]').data('id')
    };



    setTimeout(function() {
        // console.log(data);


        $.post($("body").attr('homeUrl') + '/api/insert', {
            d: data
        }, function(r) {
            try {
                console.log(r)

                if (r.error == 1) {
                    $('#ErrorRotateModal').modal('show');
                    $('#ErrorRotateModal').find('.errorFetch').text(r.msg);
                } else {
                    $('#kolo_fortuny').fadeOut();
                    $('#kolo_fortuny_Potwierdzenie').fadeIn();
                    $('#kolo_fortuny_Potwierdzenie').find('.CoWygralem').html(r.nagroda);
                    $('#kolo_fortuny_Potwierdzenie').find('.kodFetch').text(r.kod);
                    $("html, body").animate({
                        scrollTop: 0
                    }, "slow");
                }

            } catch (e) {
                console.log('blad 1412 ');
            }
        }, 'json')

    }, 1000);
}


function restartAnim() {
    run_anim_after = 0;
}

// function random(from, to){
//     return Math.floor((Math.random() * to) + from);
// }

function random(min, max) {
    // return Math.ceil(Math.random() * (max - min) + min);
    // return Math.floor(Math.random() * (max - min) + min);
    return Math.floor(Math.random() * (max - min) + min);
}


function przelicz(speedarray) {
    var arr = [];
    fake_rotate = actual_rotate;

    $.each(speedarray, function(z, x) {
        fake_rotate = Math.round(x.degree) + fake_rotate;
        arr.push({
            degree: fake_rotate,
            time: x.time
        });
    });

    return arr;
}

function verifyData() {
    var hidden = 'asdfasdf';
    var data = [];

    $.each($("input[mode='fortuna']"), function(z, x) {
        var t = $(this);

        if (hidden != false) {

            if (t.attr('type') == 'checkbox') {

                if (t.is(':checked')) {
                    hidden = true;
                    t.closest('label').removeClass('label-form-error');
                } else {
                    hidden = false;
                    t.closest('label').addClass('label-form-error');
                }

            } else {

                if (!t.val()) {
                    hidden = false;
                    t.addClass('form-error');
                } else {
                    hidden = true;
                    t.removeClass('form-error');
                }

                data.push({
                    name: t.attr('name'),
                    val: t.val()
                })

            }



        }


    }).promise().done(function() {

        if (hidden == true) {
            $('.info-error').text("Sprawdzam dane...");

            $.post($("body").attr('homeUrl') + '/api/check', {
                d: data
            }, function(r) {
                try {
                    if (r.error == 1) {
                        $('.info-error').text(r.msg);
                        $('.RunWheel').attr('disabled', 'disable');

                        if ($('.info-error:hidden').length > 0) {
                            $('.info-error').fadeIn();
                        }

                        if (r.row) {
                            $('[name="' + r.row + '"]').addClass('form-error');
                        }

                    } else {
                        $('.form-error').removeClass('form-error');
                        $('.label-form-error').removeClass('label-form-error');

                        $('.info-error').fadeOut();
                        $('.RunWheel').removeAttr('disabled');



                        // $('.koloDivResize').css({
                        // 'transform':'scale(1.6)'
                        // })
                        // $('.koloDivResize').css({
                        //     'margin-left':$(window).width() - ($('.koloDivResize').width()/2)+'px'
                        // })


                    }
                } catch (e) {
                    $('.info-error').text("Wystąpił nieoczekiwany błąd");
                    $('.RunWheel').attr('disabled', 'disable')

                    if ($('.info-error:hidden').length > 0) {
                        $('.info-error').fadeIn();
                    }

                }
            }, 'json')


        } else {
            $('.info-error').html("Aby Zagrać<br />Wypełnij Formularz");
            $('.RunWheel').attr('disabled', 'disable')

            if ($('.info-error:hidden').length > 0) {
                $('.info-error').fadeIn();
            }

        }


    })
}

function verifyDataCheck() {
    return 1;
    if ($('.info-error:hidden').length > 0) {
        return 1;
    } else {
        return 0;
    }

}

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
        obj.css("-moz-transform") ||
        obj.css("-ms-transform") ||
        obj.css("-o-transform") ||
        obj.css("transform");
    if (matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
    } else {
        var angle = 0;
    }
    return (angle < 0) ? angle + 360 : angle;
}

.koloDivResize{
    cursor:move;
}
.kolotexty span.small {
    float: left;
    font-size: 14px;
}
.kolotexty {
    font-size: 23px;
    color: #fff;
    font-family: 'Lora', serif;
    font-weight: 900;
    line-height: 20px;

  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}


.koloDiv{
	position: relative;
}
.koloimg{
	background: url('http://i.imgur.com/ZXwncHa.png');
	width: 500px;
	height: 500px;
	background-size: 100% 100%;
    opacity: 0.4;
	margin-left: 22px;
}
.kolosrodek{
	position: absolute;
	top: 0;
	left: 15px;
	bottom: 0;
	right: 15px;
	transform-origin: center;
	transform-style: preserve-3D;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>


<div class="col-lg-6 himg koloDiv">
				<div class="koloDivResize">
					
					<div class="koloimg" id="DragableArrow" style="transform: rotate(150,162deg);">
						
      </div>
      <div class="kolosrodek_img"></div>
    </div>
  </div>

此外，我希望时间表更加流畅。目前，在一个和另一个点之间的动画期间是大约500ms的差距