【Javascript】【anime.js】ループするタイムライン内でcompleteを実行する | Wood-Roots:blog

2019
07/01

【anime.js】ループするタイムライン内でcompleteを実行する

ループするタイムラインの中ではcompleteで呼んでいる関数が初回しか実行されない、という事態に見舞われました。

たとえば、緑の矩形が開いたり閉じたりしている裏で画像が切り替わる、という処理を考えてみます。

ADs

うまくいきそうだけどうまくいかない例

失敗例

以下のように書けば、

1.div.maskのwidthを0に
1-2.コンソールに「1st end」と表示
2.div.maskのwidthを100%に
2-2.コンソールに「2nd end」と表示
3.div.bgの背景を変更
3-2.コンソールに「3rd end」と表示

1に戻る

となりそうなものですが、各コンソール（つまり各アニメーションのcomplete）は初回しか実行されません。
3の背景変更処理もcompleteで呼んでいるため、2枚目以降の画像が変更されません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$(function(){
//背景にしたいパス一覧
var bg = [
'slide1.jpg',
'slide2.jpg',
'slide3.jpg',
];
//背景用配列を取得するためのカウント
var count = 0;
$('.bg').css('background-image','url("' + bg[0] + '")');
 
var tl = anime.timeline({
loop: true
});
tl.add({
targets: '.mask',
width: 0,
duration: 1000,
easing: 'easeOutExpo',
complete: function(){
console.log('1st end');
}
}).add({
targets: '.mask',
width: '100%',
duration: 1000,
easing: 'easeOutExpo',
complete: function(){
console.log('2nd end');
}
}).add({
duration: 0,
complete: function(){
count++;
var nextBg = count % bg.length;
$('.bg').css('background-image','url(' + bg[nextBg] + ')');
console.log('3rd end');
}
});
});

個人的にはループ内部といえども毎回completeを呼んでくれるほうが都合がいいと思うのですが、どうもそうなっていないようです。

しょうがないので以下のような対策を考えました。

うまくいく例

成功例

loopオプションでループさせるのではなく、最後のアニメーション完了後に再帰で呼び出すという方法です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$(function(){
//背景にしたいパス一覧
var bg = [
'slide1.jpg',
'slide2.jpg',
'slide3.jpg',
];
//背景用配列を取得するためのカウント
var count = 0;
$('.bg').css('background-image','url("' + bg[0] + '")');
 
var anim = function(){
var tl = anime.timeline({
//loop: true
});
tl.add({
targets: '.mask',
width: 0,
duration: 1000,
easing: 'easeOutExpo',
complete: function(){
console.log('1st end');
}
}).add({
targets: '.mask',
width: '100%',
duration: 1000,
easing: 'easeOutExpo',
complete: function(){
console.log('2nd end');
}
}).add({
duration: 0,
complete: function(){
count++;
var nextBg = count % bg.length;
$('.bg').css('background-image','url(' + bg[nextBg] + ')');
console.log('3rd end');
anim();
}
});
}
anim();
});

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social