Greensock - 单个对象上的多个后续补间

Question

我为 div 的位置设置动画，然后以不同的轻松方式回到原点：

var anim_a = new TimelineMax().to($(".mybox"), 3, {x: 400}).stop();
var anim_b = new TimelineMax().to($(".mybox"), 1, {x: 0, ease:Bounce.easeOut}).stop();

问题是在两个动画运行一次之后，它们不再运行了，为什么？我怎样才能按需重复它们？

JSFIDDLE

Answer 1

var anim_a = function() {
  var anm = new TimelineMax().to($(".mybox"), 1, {
    x: 400
  }).stop();
  anm.play();
}
var anim_b = function() {
  var anm = new TimelineMax().to($(".mybox"), 1, {
    x: 0,
    ease: Bounce.easeOut
  }).stop();
  anm.play();
}

$(".run-a").click(function(e) {
  anim_a();
});

$(".run-b").click(function(e) {
  anim_b();
});

.run-a,
.run-b {
  background: green;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.mybox {
  width: 200px;
  height: 200px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

<div class="run-a">Go</div>
<div class="run-b">Go back</div>

<div class="mybox"></div>

我不习惯这个TimeLineMax。我仍然对代码做了一个小改动，现在它按照所说的那样工作。请检查并确认这是否适合您的上下文。我只是将 anim_a 和 anim_b 作为两个包含 play 操作的函数。

Greensock - 单个对象上的多个后续补间

Greensock - Multiple, consequent tweens on a single object

javascript

jquery

gsap