Question

我正在尝试使用Tweenmax.js动画几个Svg元素（Windmill，Door Open）

风车旋转工作正常，但开门动画在Internet Explorer 9中根本不起作用。

这是我的代码：

＆＃13;

var dooropen = $('#door-open');

var windmill = $('#windmill');

function DoorOpen() {
  TweenMax.to(dooropen, 3, {
    rotationY: 180,
    transformOrigin: "0% 0%"
  });
}


function rotateFan() {
  TweenMax.to(windmill, 40, {
    rotation: 360,
    transformOrigin: "51% 64%"
  });
}





$('.run').click(function() {
  DoorOpen();
  rotateFan();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="887.996" height="567.947">

  <path fill="#231F20" d="M89.917 99.025h31.58v468.42h-31.58z" />

  <g id="windmill" fill="#FFF" stroke="#231F20" stroke-miterlimit="10">
    <path d="M105.706 116.57s-50.877-56.142 0-115.79c0 0 47.368 57.894 0 115.79zM105.707 116.57s73.15-19.732 103.088 52.726c0 0-73.114 15.808-103.088-52.727z" />
    <path d="M105.707 116.57S76.25 186.372.71 165.385c0 0 32.528-67.36 104.997-48.817z" />
  </g>

  <path fill="#FFF" stroke="#231F20" stroke-miterlimit="10" d="M485.496 162.376h402v402h-402z" />
  <path fill="#231F20" d="M567.496 266.376h246v298h-246z" />

  <g id="door-open">
    <path fill="#B51543" d="M567.496 266.376h246v298h-246z" />
    <path fill="#841C3F" d="M791.496 419.376c0 2.762-2.238 5-5 5h-26c-2.762 0-5-2.238-5-5v-26c0-2.762 2.238-5 5-5h26c2.762 0 5 2.238 5 5v26z" />
  </g>

</svg>

<a href="javascript:void(0);" class="run">Run</a>

＆＃13;

Answer 1

看起来你的问题是你的混合字符串值是数字的。默认的transform-origin是百分比50% 50% 0。因此，最好在GSAP中坚持基于百分比或数值的变换原点。

首选双值语法，如@Tahir Ahmed上面所述。即使第三个参数被接受。无论如何，第三个值将自动默认为零，因为这是规范0中的默认值。并且仅在使用3D变换时才需要，因为它将自身与z轴对齐。您无法在SVG中使用，因为SVG不支持CSS 3D变换。

看一下transform-origin规范：

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

试试这个：

var dooropen = $('#door-open');
var windmill = $('#windmill');

function DoorOpen() {
    TweenMax.to(dooropen, 3, {
        rotationY: 180,
        transformOrigin: "0% 0%" /* top and left, omit 0 since is the default */
    });
}

function rotateFan() {
    TweenMax.to(windmill, 40, {
        rotation: 360,
        transformOrigin: "51% 64%"
    });
}

$('.run').click(function() {
   DoorOpen();
   rotateFan();
});

tranform-origin关键字等价物：

左= 0％
center = 50％
right = 100％
top = 0％
bottom = 100％

另请查看CSSPlugin Docs以及SVG transformOrigin的使用

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

GSAP svgOrigin 属性，取自CSSPlugin Docs：

[仅适用于SVG元素]与transformOrigin完全相同，但它使用SVG的全局坐标空间而不是元素的局部坐标空间。例如，如果您想让一堆SVG元素围绕公共点旋转，这将非常有用。您可以定义svgOrigin或transformOrigin，而不是两者（出于显而易见的原因）。

See codepen example here of svgOrigin。

因此，如果您想要旋转svgElement，就好像它的原点位于SVG画布全局坐标中的TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"})一样，您可以x:250, y:100。单位不是必需的。它还会在data-svg-origin属性中记录该值，以便可以将其解析回来。svgOrigin不能容纳基于百分比的值。

Answer 2

如果你试图为SVG元素的rotationY设置动画，那就是问题 - SVG规范确实 NOT 允许3D。这不是GSAP问题或限制 - 它实际上是SVG规范。一些webkit浏览器在技术上识别3D CSS变换，但这是非标准的，并且它在IE中肯定不受支持，因为IE忽略了SVG元素上的所有CSS变换。变换应该通过“变换”属性来应用，而属性同样不支持3D。

我的建议：不要在SVG中做3D。我希望我有更好的消息给你。

TweenMax.js变换旋转在IE 9中不起作用

2 个答案: