Question

我无法理解，为什么IE和EDGE有奇怪的行为。如果你快速地将鼠标移动到五角星形上方 - 动画是间隔的，但在其他NORMAL网络浏览器中都是有序的。 http://jsfiddle.net/b1Lhjo4k/

var svgElement = Snap("#svg");
var pent = svgElement.select('#pentagram-one');
var hoverover = function() {
    pent.stop().animate({transform: 'r180,500,515'}, 400);
};
var hoverout  = function() {
    pent.stop().animate({transform: 'r0,500,515'}, 400);
};
pent.hover(hoverover, hoverout);

通过原型功能解决; ie和edge现在正常工作。

Answer 1

我没有Edge测试，但我怀疑它是因为它在前一个动画完成之前开始动画时使用矩阵/变换插值做了一些时髦的事情（这可能是错误的，但最初的想法是什么看看），或者它可能是奇怪的，有些非常小的数字字符串，因为我之前已经看过IE。

解决这个问题的一种方法是不让Snap使用浏览器矩阵值进行插值，而是自己控制它。你可以试试一个小插件，如果你会经常使用它，就像这样......

Snap.plugin( function( Snap, Element, Paper, global ) {

    Element.prototype.animRotate = function( from, to, dur ) {
       var el = this;
       this.stop();
       Snap.animate(from, to, function( val ) {
           el.transform('r' + val + ',500,515')
       },dur)
       return this;
    };
});

var pent = svgElement.select('#pentagram-one');

var hoverover = function() {
    this.animRotate(0, 180, 400)    
};
var hoverout  = function() {
    this.animRotate(180, 0, 400)
};

jsfiddle

使用snap.svg IE和EDGE网络浏览器快速放大和缩小动画

1 个答案: