使用 GSAP 和 TweenMax 同时触发多个补间

Question

我想摆脱 jQuery 的动画，所以我一直在使用 GSAP。我试图弄清楚如何在一个元素及其子元素上触发多个动画。基本上，我想给#navicon 一个“720 cork”效果，它工作正常，并将图标淡入/切换到这个根本不工作的#navicon 容器的孩子。

如果我只使用 jQuery，我可能会根据需要添加多个类并使用它们来触发一些 CSS3 转换。但是，GSAP 似乎是really fast。

我已经非常彻底地阅读了 GSAP 文档。而且我看到了如何用“时间线”链接补间，但我不确定如何根据一个事件在不同的元素上触发多个补间。

到目前为止，这是我的代码：

var toggleMobiMenu = function() {
    $('#navicon').on('click touchstart', function() {
        TweenMax.to($(this), 0.5, { rotationY: 720, rotationX: -720 })
            .to($(this).find('#open'), 0.5, { opacity: 0 })
            .to($(this).find('#closed'), 0.5, { opacity: 1 });
    });
}
toggleMobiMenu();

和here 是一样的。有谁知道如何同时补间所有这 3 个元素？

Answer 1

您的代码中有两个问题：

• TweenMax的方法to是静态方法 返回是 TweenMax 的实例。阅读更多关于 静态方法和实例方法的区别 here 这基本上是一个 语言不可知论的概念。因为，在这种情况下，实例不 有一个可用的 to 方法as per the docs，你的代码 休息。
• 代码的第二个问题是您使用 find() 方法在 #open 和 #close 中查找元素 #navicon 元素单击时，但根据您的 HTML 结构，没有像 #open 这样的东西 和 #close 元素。相反，您有 #navicon-open 和 #navicon-close 元素。用它们代替旧的应该可以解决这个问题。

总而言之，您的代码应该如下所示：

var toggleMobiMenu = function() {
    $('#navicon').on('click touchstart', function() {
        TweenMax.to($(this),0.5,{rotationY:720,rotationX:-720});
        TweenMax.to($(this).find('#navicon-open'),0.5,{opacity:0});
        TweenMax.to($(this).find('#navicon-close'),0.5,{opacity:1});
    });
}
toggleMobiMenu();

但如果我理解正确的话，你真正想做的是想出一个向前或向后移动的动画，即每次单击图标时切换。因此，我重新编写了下面 sn-p 中的代码，让您对此有所了解：

片段：

var navIcon=$('#navicon');
var navIconOpen=$('#navicon-open');
var navIconClose=$('#navicon-close');
var timeline=new TimelineMax({paused:true,reversed:true});
var duration=.6;
var ease=Power2.easeOut;
var rotation=360;
var init=function(){
    timeline.to(navIcon,duration,{rotationY:rotation,rotationX:-rotation,ease:ease},0);
    timeline.to(navIconOpen,duration,{opacity:0,ease:ease},0);
    timeline.to(navIconClose,duration,{opacity:1,ease:ease},0);
    navIcon.on('click touchstart',function(){
        toggleMobileMenu();
    });
};
var toggleMobileMenu=function(){
    timeline.reversed()?timeline.play():timeline.reverse();
};
//
init();

#navicon {
	height:45px;
	width:45px;
	border:#000 3px solid;
	border-radius:50%;
	margin:5px 35px 0 0;
	position:relative;
	float:right;
}

#navicon i {
	color:#000;
	top:8px;
	left:11px;
	font-size:24px;
	position:absolute;
}

#navicon #navicon-open {
	opacity:1;
}

#navicon #navicon-close {
	opacity:0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a id="navicon" href="javascript:void(0);">
    <i id="navicon-open" class="fa fa-bars"></i>
    <i id="navicon-close" class="fa fa-times"></i>
</a>

希望这会有所帮助。