anime.js で、複数の要素の操作がうまくいかない。

前提・実現したいこと

IOS及びandroidアプリを作っています。
ボールが左右に往復するアプリです。
ボールの残像を作りたくて、
動くボール後に透明度を落としたボールを5つずらして、
描画させる仕様としました。ボールの大きさ、スピード、
往復回数、ボールの色を可変させます。

低価格機でも動作させたいので、
軽量のanime.jsで作成したところ、
行きは、本体の後に薄いボールが追従しますが、
帰りは、薄いボールの方が、先頭になってしまいます。

これを改善したいと思います。

宜しくお願い致します。

該当のソースコード

</body>

行動規範の内容に同意します

回答2件

ベストアンサー

どうもaddしたものの開始後指定秒数後に次のアニメーションを処理させていくっていうのがないので、強引にやると

html
1<!doctype html>
2<html lang="ja">
3<head>
4<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.js"></script>
5<script>
6function bbb(){
7  var myt = 200;
8  var duration = 1000;
9  var cdelay = 100;
10  var myTime = anime.timeline({
11    targets: '#oya',
12    easing: 'linear',
13    direction: 'normal',
14    loop: 6
15  });
16
17  myTime
18  .add({
19    targets: '#circle1',
20    duration: duration,
21    translateX: myt
22  })
23  .add({
24    targets: '#circle2',
25    duration: duration,
26    translateX: myt
27  }, cdelay)
28  .add({
29    targets: '#circle1',
30    duration: duration,
31    translateX: 0
32  })
33  .add({
34    targets: '#circle2',
35    duration: duration,
36    delay: 100,
37    translateX: 0
38  }, duration + cdelay);
39}
40</script>
41
42<style type="text/css">
43.CL9{
44  width: 80px;
45  height: 80px;
46  border-radius: 50%;
47  background: skyblue;/*背景色*/
48  z-index: 1;
49  position: absolute;
50  top:100px;
51}
52
53.OP0{
54  width: 80px;
55  height: 80px;
56  border-radius: 50%;
57  background: skyblue;/*背景色*/
58  z-index: 1;
59  position: absolute;
60  top:100px;
61  opacity:0.5;
62
63}
64</style>
65</head>
66<body>
67<div id="oya">
68<div id="circle1" class="CL9"></div>
69<div id="circle2" class="OP0"></div>
70</div>
71<button onclick="bbb()">qqq</button>
72</body>
73</html>

投稿2019/05/30 09:24

rururu3

総合スコア5545

neo009

2019/05/30 20:57

ありがとうございました。行き帰りをきちっと時間割する設定としました。

行動規範の内容に同意します

direction: 'alternate' としていると逆順に動くためうまくいかないようです。
面倒でも帰りの分も指定してみてはどうでしょうか？

JavaScript
1  myTime
2  .add({ targets: '#circle1', translateX: myt })
3  .add({ targets: '#circle2', translateX: myt }, 100)
4  .add({ targets: '#circle1', translateX: 0 }, '-=100')
5  .add({ targets: '#circle2', translateX: 0 }, '-=900');