Timeline

タイムラインの基本

タイムラインを使うと、複数のアニメーションを同期させることができます。

デフォルトでは、 タイムラインに追加された各アニメーションは、 前のアニメーションが終了した後に開始します。

タイムライン作成

var myTimeline = anime.timeline(parameters);

タイムラインにアニメーションを追加

myTimeline.add(parameters, offset);

// デフォルトパラメータを指定してタイムラインを生成
var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

// タイムラインに子アニメーションを追加
tl
.add({
  targets: '.basic-timeline-demo .el.square',
  translateX: 250,
})
.add({
  targets: '.basic-timeline-demo .el.circle',
  translateX: 250,
})
.add({
  targets: '.basic-timeline-demo .el.triangle',
  translateX: 250,
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var basicTimeline = anime.timeline();

basicTimeline
  .add({
    targets: '#basicTimeline .square.el',
    translateX: 250,
    easing: 'easeOutExpo'
  })
  .add({
    targets: '#basicTimeline .circle.el',
    translateX: 250,
    easing: 'easeOutExpo'
  })
  .add({
    targets: '#basicTimeline .triangle.el',
    translateX: 250,
    easing: 'easeOutExpo'
  });

HTML

<div id="basicTimeline">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="circle shadow"></div>
    <div class="circle el"></div>
  </div>
  <div class="line">
    <div class="triangle shadow"></div>
    <div class="triangle el"></div>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.circle {
  border-radius: 50%;
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.triangle {
  pointer-events: none;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 14px 24px 14px;
  border-color: transparent transparent currentColor transparent;
}

タイムオフセット

タイムオフセットは、 タイムラインの.add()関数の2つ目のオプションパラメータで指定することができます。 タイムラインでアニメーションをいつ開始するかを定義します。 もしオフセットが指定されていない場合、前のアニメーションが終了した後に開始されます。

オフセットは最後のアニメーションを基準として指定することもできますし、 タイムライン全体を基準として指定することもできます。

// デフォルトパラメータを指定してタイムラインを生成
var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl
.add({
  targets: '.offsets-demo .el.square',
  translateX: 250,
})
.add({
  targets: '.offsets-demo .el.circle',
  translateX: 250,
}, '-=600') // オフセット(相対値)
.add({
  targets: '.offsets-demo .el.triangle',
  translateX: 250,
}, 0); // オフセット(絶対値)

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var timeOffset = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

timeOffset
.add({
  targets: '#timeOffset .el.square',
  translateX: 250,
})
.add({
  targets: '#timeOffset .el.circle',
  translateX: 250,
}, '-=600') // オフセット(相対値)
.add({
  targets: '#timeOffset .el.triangle',
  translateX: 250,
}, 0); // オフセット(絶対値)

HTML

<div id="timeOffset">
  <div class="line">
    <div class="label">no offset</div>
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="label">drelative offset ('-=600')</div>
    <div class="circle shadow"></div>
    <div class="circle el"></div>
  </div>
  <div class="line">
    <div class="label">absolute offset (400)</div>
    <div class="triangle shadow"></div>
    <div class="triangle el"></div>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.circle {
  border-radius: 50%;
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.triangle {
  pointer-events: none;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 14px 24px 14px;
  border-color: transparent transparent currentColor transparent;
}

.label {
  position: absolute;
  opacity: .5;
  text-align: left;
  padding-left: 38px;
}

パラメータの継承

親タイムラインに設定されたパラメータは、 全ての子アニメーションに継承されます。

var tl = anime.timeline({
  targets: '.params-inheritance-demo .el',
  delay: function(el, i) { return i * 200 },
  duration: 500,
  easing: 'easeOutExpo',
  direction: 'alternate',
  loop: true
});

tl
.add({
  translateX: 250,
  // イージングを上書きします
  easing: 'spring',
})
.add({
  opacity: .5,
  scale: 2
})
.add({
  // ターゲットを上書きします
  targets: '.params-inheritance-demo .el.triangle',
  rotate: 180
})
.add({
  translateX: 0,
  scale: 1
});

デモ

JavaScript

var TLParamsInheritance = anime.timeline({
  targets: '#TLParamsInheritance .el',
  delay: function(el, i) { return i * 200 },
  duration: 500,
  easing: 'easeOutExpo',
  direction: 'alternate',
  loop: true
});
TLParamsInheritance
  .add({
    translateX: 250,
    // イージングを上書きします
    easing: 'spring',
  })
  .add({
    opacity: .5,
    scale: 2,
  })
  .add({
    // ターゲットを上書きします
    targets: '#TLParamsInheritance .el.triangle',
    rotate: 180
  })
  .add({
    translateX: 0,
    scale: 1
  });

HTML

<div id="TLParamsInheritance">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="circle shadow"></div>
    <div class="circle el"></div>
  </div>
  <div class="line">
    <div class="triangle shadow"></div>
    <div class="triangle el"></div>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.circle {
  border-radius: 50%;
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.triangle {
  pointer-events: none;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 14px 24px 14px;
  border-color: transparent transparent currentColor transparent;
}