anime.js - にほんご。

Timeline

更新日: 2018-09-03

タイムライン

タイムラインを作成し、順番にアニメーションします。

var myTimeline = anime.timeline();

タイムラインは、アニメーションと同様、directionloopautoplayを受け取ります。

var myTimeline = anime.timeline({
  direction: 'alternate',
  loop: 3,
  autoplay: false
});

.add()を使ってアニメーションをタイムラインに追加します。

myTimeline
  .add({
    targets: '.square',
    translateX: 250
  })
  .add({
    targets: '.circle',
    translateX: 250
  })
  .add({
    targets: '.triangle',
    translateX: 250
  });

myTimeline.childrenで、タイムラインの子アニメーションにアクセスします。

デモ

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

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;
}

オフセット(相対値)

offsetはタイムラインのアニメーション開始時間を定義します。 相対値は、前のアニメーションの時間に関連させたアニメーション開始時間を定義します。

type説明
+='+=100'前のアニメーションが終了した100ms後に開始します。
-='-=100'前のアニメーションが終了する100ms前に開始します。
*='*=2'前のアニメーションの2倍の時間で開始します。
myTimeline
  .add({
    targets: '.square',
    translateX: 250
  })
  .add({
    targets: '.circle',
    translateX: 250,
    offset: '-=600' // 前のアニメーションが終了する600ms前に開始します。
  })
  .add({
    targets: '.triangle',
    translateX: 250,
    offset: '-=800' // 前のアニメーションが終了する800ms前に開始します。
  });

デモ

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

JavaScript
var relativeOffset = anime.timeline();

relativeOffset
  .add({
    targets: '#relativeOffset .square.el',
    translateX: 250,
    easing: 'easeOutExpo',
  })
  .add({
    targets: '#relativeOffset .circle.el',
    translateX: 250,
    easing: 'easeOutExpo',
    offset: '-=600' // 前のアニメーションが終了する600ms前に開始します。
  })
  .add({
    targets: '#relativeOffset .triangle.el',
    translateX: 250,
    easing: 'easeOutExpo',
    offset: '-=800' // 前のアニメーションが終了する800ms前に開始します。
  });
HTML
<div id="relativeOffset">
  <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;
}

オフセット(絶対値)

offsetはタイムラインのアニメーション開始時間を定義します。 絶対値は、他のアニメーションとは関係なく、絶対的なアニメーション開始時間を定義します。

myTimeline
  .add({
    targets: '.square',
    translateX: 250,
    offset: 1000 // Starts at 1000ms
  })
  .add({
    targets: '.circle',
    translateX: 250,
    offset: 500 // Starts at 500ms
  })
  .add({
    targets: '.triangle',
    translateX: 250,
    offset: 0 // Starts at 0ms
  });

デモ

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

JavaScript
var absoluteOffset = anime.timeline();

absoluteOffset
  .add({
    targets: '#absoluteOffset .square.el',
    translateX: 250,
    easing: 'easeOutExpo',
    offset: 1000 // タイムラインの1000ms時点で開始します。
  })
  .add({
    targets: '#absoluteOffset .circle.el',
    translateX: 250,
    easing: 'easeOutExpo',
    offset: 500 // タイムラインの500ms時点で開始します。
  })
  .add({
    targets: '#absoluteOffset .triangle.el',
    translateX: 250,
    easing: 'easeOutExpo',
    offset: 0 // タイムラインの0ms時点で開始します。
  });
HTML
<div id="absoluteOffset">
  <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;
}

タイムラインパラメータ

デモ

JavaScript
var timelineParameters = anime.timeline({
  direction: 'alternate',
  loop: true
});

timelineParameters
  .add({
    targets: '#timelineParameters .square.el',
    translateX: [ { value: 80 }, { value: 160 }, { value: 250 } ],
    translateY: [ { value: 30 }, { value: 60 }, { value: 60 } ],
    duration: 3000
  })
  .add({
    targets: '#timelineParameters .circle.el',
    translateX: [ { value: 80 }, { value: 160 }, { value: 250 } ],
    translateY: [ { value: 30 }, { value: -30 }, { value: -30 } ],
    duration: 3000,
    offset: 200
  })
  .add({
    targets: '#timelineParameters .triangle.el',
    translateX: [ { value: 80 }, { value: 250 } ],
    translateY: [ { value: -60 }, { value: -30 }, { value: -30 } ],
    duration: 3000,
    offset: 400
  });
HTML
<div id="timelineParameters">
  <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;
}

パラメータの継承

デモ

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,
  })
  .add({
    opacity: .5,
    translateX: 250,
    scale: 2,
  })
  .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;
}

MIT license. © 2017 Julian Garnier.

このコンテンツはJulian Garnier(juliangarnier)によるanime.jsドキュメントを翻訳/改変したものです。