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

Question

我正在尝试使用 Tweenmax.js

为一些 Svg 元素（风车、开门）制作动画

风车旋转效果很好，但开门动画在 Internet Explorer 9 中根本不起作用。

这是我的代码：

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();
});

<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>

Answer 1

您的问题似乎是您将字符串值与数字值混合在一起。默认的 transform-origin 是百分比 50% 50% 0。因此，最好在 GSAP 中坚持使用基于百分比或数值的 transform-origin。

像@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%
中心 = 50%
右=100%
顶=0%
底部 = 100%

同时查看 CSSPlugin Docs 和 SVG transformOrigin

的使用

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

GSAP svgOrigin 属性，摘自 CSSPlugin Docs:

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

See codepen example here of svgOrigin。

因此，如果您想旋转 svgElement，就好像它的原点位于 SVG canvas 的全局坐标中的 x:250, y:100，您可以执行 TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"})。不需要单位。它还将值记录在 data-svg-origin 属性中，以便可以对其进行解析。svgOrigin 不支持基于百分比的值。

Answer 2

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

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

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

TweenMax.js transform rotate doesn't work in IE 9

html

svg

gsap