自定义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