我尝试使用SVG制作动画，但IE并不喜欢使用transformOrigin。
适用于Chrome和Firefox。在IE中尝试看看我的意思。哦，我不想依赖闪光灯。如果需要，我会做帆布。甚至是Shumway。
相关代码
var deg =360;
Velocity.animate($('#inner').get(), {
rotateZ: deg
}, 1000)
<g id="inner" style="transform-origin: 81.0254859924316px 59.6874922621516px 0px;" data-bind="spinTriangle:true"
id="g3359">
<path
d="m 68.010487,-6.3659557 24.050001,0 48.720002,89.4223967 -12.24,22.411139 -97.00001,0 -12.26999,-22.442889 z"
id="inlight"
style="fill:#a8a9ad;fill-opacity:1"
inkscape:connector-curvature="0" />
<path
d="m 61.900487,27.282517 36.280001,0 18.150882,34.195786 -18.140882,33.492658 -36.320001,0.0106 L 43.56048,61.650506 Z"
id="indark"
style="fill:#5b5b5b"
inkscape:connector-curvature="0" />
</g>
ko.utils.injectBinding = function(allBindings, key, value) {
//https://github.com/knockout/knockout/pull/932#issuecomment-26547528
allBindings.get = allBindings.get || getFallback;
var has = allBindings.has;
var get = allBindings.get;
return {
has: function(bindingKey) {
return (bindingKey == key) || has.call(allBindings, bindingKey);
},
get: function(bindingKey) {
var binding = get.call(allBindings, bindingKey);
if (bindingKey == key) {
binding = value;
}
return binding;
}
};
};
var router = {
isNavigating: ko.observable(true)
};
var v = $.Velocity,
q = Q;
v.Promise = q.Promise;
var template = $('img').html();
var tan30 = 0.5773502691896258;
ko.bindingHandlers.spinTriangle = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var deg = 0;
var first = true;
var spinFunc = function() {
if (ko.unwrap(router.isNavigating) || first) {
deg = deg ? 0 : 360;
first = false;
return v.animate(element, {
rotateZ: deg
}, 1000).then(spinFunc);
}
};
ko.utils.extend(allBindings, ko.utils.injectBinding(allBindings, 'origin', {
spinFunc: spinFunc
}));
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var origin = allBindings.get('origin');
if (ko.unwrap(router.isNavigating)) {
origin.spinFunc();
}
}
};
ko.bindingHandlers.roundRobin = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var forward = 1;
var first = true;
var arr = _.map($(element).children().get(), function(chEl) {
return chEl;
});
arr.push(arr.shift());
arr = _.zip($(element).children().get(), arr);
arr = _.map(arr,
function(item) {
return [item[0].getBBox(), item[1].getBBox(), item[0]];
});
var spinFunc = function() {
if (ko.unwrap(router.isNavigating) || first)
forward = forward ? 0 : 1;
first = false;
return q.all(_.map(arr, function(item) {
var original = item[0],
target = item[1];
el = item[2]
if (forward) {
return v.animate(el, {
translateX: 0,
translateY: 0
}, 1000);
} else {
return v.animate(el, {
translateX: target.x - original.x,
translateY: target.y - original.y
}, 1000);
}
})).then(spinFunc);
};
ko.utils.extend(allBindings, ko.utils.injectBinding(allBindings, 'origin', {
spinFunc: spinFunc
}));
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var origin = allBindings.get('origin');
if (ko.unwrap(router.isNavigating)) {
origin.spinFunc();
}
}
};
ko.components.register('ultraspin', {
viewModel: function(params) {
this.scale = 2;
if (params.viewModel)
ko.utils.extend(this, params.viewModel);
else
ko.utils.extend(this, params);
},
template: template
});
debugger;
ko.applyBindings()<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
<script src="https://rawgit.com/kriskowal/q/v1/q.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<img>
<svg width="164" height="155">
<g id="g3019" transform="translate(0,5),matrix(0.51365572,0,0,0.48391494,-0.10298261,3.0805811), scale({{scale}})">
<g id="outer" transform="matrix(1,0,0,1.0581278,0,-8.5844007)">
<path style="fill:#a8a9ad;fill-opacity:1" id="outlight" d="m 143.85049,9.0213601 15.99,27.3399999 -63.74,111.31 -32.11,0.01 L 0.20048956,36.37136 16.20049,9.0213601 Z" inkscape:connector-curvature="0" />
<path id="outdark" transform="matrix(0.79999999,0,0,0.80001581,0.20048956,0.96136007)" d="M 30.84375,28.96875 21.9375,44.5 l 68.84375,120.125 18,0.0312 L 177.625,44.5 168.75,29 Z" style="fill:#5b5b5b" inkscape:connector-curvature="0" />
</g>
<g id="inner" style="transform-origin: 81.0254859924316px 59.6874922621516px 0px;" data-bind="spinTriangle:true" id="g3359">
<path d="m 68.010487,-6.3659557 24.050001,0 48.720002,89.4223967 -12.24,22.411139 -97.00001,0 -12.26999,-22.442889 z" id="inlight" style="fill:#a8a9ad;fill-opacity:1" inkscape:connector-curvature="0" />
<path d="m 61.900487,27.282517 36.280001,0 18.150882,34.195786 -18.140882,33.492658 -36.320001,0.0106 L 43.56048,61.650506 Z" id="indark" style="fill:#5b5b5b" inkscape:connector-curvature="0" />
</g>
<g data-bind="roundRobin:true" id="bolts">
<path d="m 68.92049,47.50136 5.68,-9.72 11.12,0.14 5.42,9.56 -5.47,9.68 -11.26,0.01 z" id="bolt1" style="fill:#a8a9ad" inkscape:connector-curvature="0" />
<path d="m 54.04049,71.55136 5.63,-9.65 11.13,0.03 5.43,9.63 -5.34,9.6 -11.51,-0.05 z" id="bolt2" style="fill:#a8a9ad" inkscape:connector-curvature="0" />
<path d="m 89.26049,61.93136 11.19,-0.01 5.56,9.6 -5.4,9.5 -11.42,0.16 -5.38,-9.54 z" id="bolt3" style="fill:#a8a9ad" inkscape:connector-curvature="0" />
</g>
</g>
</svg>
</img>
<ultraspin></ultraspin>