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

Question

我想放弃 jQuery 动画，所以我一直在使用 GSAP。我想弄清楚如何在一个元素及其 children 上触发多个动画。基本上我想给 #navicon 一个工作正常的“720 软木塞”效果和一个 fade/toggle 这个 #navicon 容器的 children 的图标，它不工作全部.

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

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

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

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是相同的fiddle。有谁知道如何一次补间所有这 3 个元素？

Answer 1

您的代码中存在两个问题：

TweenMax的方法to是一个静态方法，但是它是什么 returns 是 TweenMax 的实例。阅读更多关于静态方法和实例方法的区别 here 这基本上是一个语言不可知的概念。因为在这种情况下，实例不有一个 to 方法可用 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();

但是如果我理解正确的话，你真正想做的是想出一个向前或向后移动的动画，即每次单击图标时切换。所以我重新编写了下面代码片段中的代码，为您提供了一个想法：

片段：

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>

希望这对您有所帮助。

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

Fire multiple tweens simultaneously with GSAP and TweenMax

javascript

jquery

gsap