Question

我使用GreenSock-TweenMax编写了一个在Firefox和Safari中运行良好的掩码动画。但是，Chrome中没有动画效果（代码实际上正在运行）我无法弄清楚原因。

var n = 200;
function buildShield(s) {
    var timeline = new TimelineLite();
     n = n+s;
  var to = {
    y: n,
//    ease: Linear.easeOut
  };
  var duration = 2;
    timeline.to("#curtain", duration, to, 1);
}


function increase(n){
	buildShield(-40);
}


function decrease(){
	buildShield(20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<svg version="1.1" id="mark-shield" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="286px" height="311px" viewBox="0 0 286 311" enable-background="new 0 0 286 311" xml:space="preserve">
	 <defs>
	 <mask id="mask">
	 	<polygon fill="white" points="143.705,32.138 262.554,73.118 243.826,227.782 143.705,282.861 44.218,228.222 25.821,73.889 "/>
	 </mask>
	 <g id="curtain" style="transform:translateY(260px);">
	<rect id="cr-left" x="9.875" y="28.999" fill="#41B3A1" width="134.312" height="263.573"/>
	<rect id="cr-right"x="144.188" y="28.999" fill="#269D8A" width="138.479" height="263.573"/>
	</g>
	</defs>
<polygon fill="#D7D5D3" stroke="#A9A7A5" stroke-width="8" stroke-miterlimit="10" points="143.641,15.249 278.5,61.75 
	257.25,237.25 143.641,299.75 30.75,237.75 9.875,62.625 "/>
	<polygon fill="#c9c9c9" points="143.705,32.138 143.705,282.861 243.826,227.782 262.554,73.118 "/>
	<use mask="url(#mask)" xlink:href="#curtain"/>
</svg>
<div id="btn-in" onClick="increase(100)" style="background: grey; cursor:pointer;">increase 100</div>
<div id="btn-de" onClick="decrease()" style="background: grey; cursor:pointer; margin-top:10px;">decrease 60</div>

Answer 1

看起来您试图动画#curtain这是一个SVG图形元素，位于SVG <defs>元素中。

<defs>元素不能直接使用CSS进行渲染。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

defs中定义的图形元素不会直接渲染。您可以使用元素在视口上的任何位置渲染这些元素。

默认情况下，GSAP使用CSSPlugin，但由于您定位了SVG <defs>元素中的元素，因此您必须使用GSAP AttrPlugin。

因此，您必须直接为属性设置动画，使用attr:{}包装这些属性，以显示您想要的动画属性。

在y

中换行attr:{}

var n = 200;
function buildShield(s) {
    var timeline = new TimelineLite();
    n = n+s;
    var to = {
       attr: {y: n}, // wrap y in attr:{}
    };
    var duration = 2;
    timeline.to("#curtain", duration, to, 1);
 }

 function increase(n){
    buildShield(-40);
 }

 function decrease(){
    buildShield(20);
 }

TimelineLite（TweenMax）在Chrome中不起作用

1 个答案: