为什么动画设置加载在TweenMax中的两个单独的对象文字中

Why is animation settings loaded in two separate object literals in TweenMax?

本文关键字：两个 单独 文字 对象 加载 TweenMax 动画 为什么 设置      更新时间：2024-05-01

我刚刚检查了这个Codepen，代码如下：

var tmax_options = {
  repeat: -1,
  yoyo: true
};
var tmax_tl          = new TimelineMax(tmax_options),
    tween_options_to = {
      css: {
        transform: 'scale(0)',
        transformOrigin: 'center center'
      },
      ease: Cubic.easeInOut,
      force3D: true
    };
// Last Argument is Position Timing.
// Use this argument to stagger the visibility of surrounding circles
tmax_tl.to($('svg > circle:nth-of-type(1)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(2)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(3)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(4)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(5)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(6)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(7)'), 1, tween_options_to, 0)

我确实理解大多数JS，但我只是对不寻常的语法有一个非常普遍的问题——也就是说，我看到选项是从两个独立的对象文字加载的，比如：

var tmax_options = {
  repeat: -1,
  yoyo: true
};

这是第一个，然后：

  tween_options_to = {
      css: {
        transform: 'scale(0)',
        transformOrigin: 'center center'
      },
      ease: Cubic.easeInOut,
      force3D: true
    };

现在，为什么要单独加载动画设置？它们不能全部加载到一个对象文字中吗？我基本上只是想知道是否有任何令人信服的理由将设置加载到两个单独的对象文字中。

GSAP css:{}对象是可选的。您可以将所有特性放置在一个对象中。css:{}只是为了方便起见，并增加了一点性能提升，因为GSAP不需要为您包装CSS属性。但同样，它只是可选的，自GSAP 1.18.0版本以来，您不必再使用它了。

此外，如果您正在为CSS属性使用css:{}对象包装器。然后应该将force3D: true移动到css:{}对象中，因为force3D是GSAP CSSPlugin的一部分。

tween_options_to = {
  css: {
    transform: 'scale(0)',
    transformOrigin: 'center center',
    force3D: true
  },
  ease: Cubic.easeInOut
};

或者你可以把所有东西都放在一个对象中：

tween_options_to = {
  transform: 'scale(0)',
  transformOrigin: 'center center',
  force3D: true,
  ease: Cubic.easeInOut,
};

使用scale属性也可以这样做。GSAP知道scale是CSS transform 的一部分

tween_options_to = {
  scale: 0,
  transformOrigin: 'center center',
  force3D: true,
  ease: Cubic.easeInOut,
};

CSS转换的GSAP等价物：

  • x=translateX（）
  • y=translateY（）
  • z=translateZ（）
  • 旋转=rotateZ（）或rotate（）
  • rotationX=rotateX（）
  • 旋转Y=旋转Y（）
  • 串X＝串X（）
  • strikeY=strikeY（）

有关更多信息，请参阅GSAP CSSPlugin文档：

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

关于css:{}包装的注意事项

最初，css特定的属性需要包装在自己的对象中，并像TweenLite.to（element，1，{css:{left:"100px"，top:"50px"}}）一样传入；以便引擎可以确定应该传递到CSSPlugin的属性，但由于在浏览器中设置DOM元素的动画非常常见，TweenSite和TweenMax（从1.8.0版本开始）会自动检查目标是否是DOM元素，如果是，它为您创建该css对象，并在tween首次渲染时将任何未直接在元素上定义或保留的属性（如onComplete、ease、delay等或scrollTo、easel等插件关键字）转移到该css对象中。在下面的代码示例中，我们将使用更简洁的样式，该样式省略了css：｛｝对象，但请注意，任何一种样式都是可以接受的。

例如：

//as of 1.8.0 the following lines produce identical results:
TweenLite.to(element, 1, {top:"20px", backgroundColor:"#FF0000", ease:Power2.easeOut});
//longer, less convenient syntax:
TweenLite.to(element, 1, {css:{top:"20px", backgroundColor:"#FF0000"}, ease:Power2.easeOut});
相关文章：