自定义css3 animate

2015-12-09 00:00:00 by 【6yang】, 429 visits, 收藏 | 返回

$.fn.animateRotate = function(angle, duration, easing, complete) {
    var args = $.speed(duration, easing, complete);
    var step = args.step;
    return this.each(function(i, e) {
        args.complete = $.proxy(args.complete, e);
        args.step = function(now) {
            $.style(e, 'transform', 'rotate(' + now + 'deg)');
            $.style(e, '-o-transform', 'rotate(' + now + 'deg)');
            $.style(e, '-moz-transform', 'rotate(' + now + 'deg)');
            $.style(e, '-webkit-transform', 'rotate(' + now + 'deg)');
            if (step) return step.apply(e, arguments);
        };

        $({
            deg: 0
        }).animate({
            deg: angle
        }, args);
    });
};

var t = 90.0;
var SwingPendulum = function() {
    t += 0.025;

    var r = 1024;

    var omega = Math.sqrt(64 / r);
    var theta = 1.0 * Math.sin(omega * t) + 0.5 * 3.14159;

    var xcenter = (1200 / 2) - (1691 / 2);
    var ycenter = -1840;

    var newLeft = Math.floor(xcenter + (r * Math.cos(theta)));
    var newTop = Math.floor(ycenter + (r * Math.sin(theta)));

    $('#FGPendulum').animate({
        top: newTop,
        left: newLeft,
    }, 1, function() {
        SwingPendulum();
    });

    var transformDegrees = 270 + (180.0 * theta / 3.14159);
    $('#FGPendulum').animateRotate(transformDegrees + 'deg', 1);
};
var DoFlicker = function(i, elem) {
    var $elem = $(elem);
    var oldOpacity = parseFloat($elem.css('opacity'));
    var newOpacity;

    // Most of the time ramp it up to 1.0
    if (Math.random() > 0.05) {
        newOpacity = Math.min(oldOpacity + 0.05, 1.0);
    } else {
        newOpacity = Math.max(oldOpacity - 0.3, 0.0);
    }

    $elem.animate({
        opacity: newOpacity,
    }, 20, function() {
        DoFlicker(i, elem);
    });
};
$(function() {
    SwingPendulum();
    $('div.Flicker').each(DoFlicker);
});
分享到:
share

    图片原图

    loading

    loading