【Javascript】Velocity.jsのアニメーションやAjaxの実行順序をDeferredで管理する | Wood-Roots:blog

2016
11/08

Velocity.jsのアニメーションやAjaxの実行順序をDeferredで管理する

最近アニメーションを作るときはVelocity.jsを多用しています。
ほぼjQueryのanimate()と同じ要領で軽快なアニメーションが作成できますが、複雑なアニメーションの場合はうまく処理を管理しないと後々ひどい目にあいます。

jQueryのanimate()でも強い武器になったDeferredをVelocity.jsでも使えないかと思い、試してみました。

jQueryのanimate()を使った場合の方法については下記記事をご参照ください。
Ajaxじゃなくても使える、$.Deferredで好きな処理を連鎖的に実行する方法

ADs

やりたいこと

以下の処理を順番に実行することを目指します。

1.「Loading…」という文字を5回点滅させます。
2.XML(import.xml）をAjaxで読み込みます。読み込んだ内容はdiv#import内に書き込みます。
3.読み込み完了後、div#import内に読み込んだHTML(div.itemとなっています）のopacityを1にします。
4.div#importの枠線を赤にします。

何も考えずに処理を順番に書くだけだと、Ajaxの部分が完了する前に移行の処理に進んでしまったり、アニメーションが同時に実行されたりしてしまいます。

きちんと処理が終了してから次に進むように、Deferredを使って書いてみます。

デモ

デモはこちら

ブログのRSSをオフィシャルサイトの一部分に読み込む、みたいな処理を想定しています。

コード

velocity.jsには「complete」という処理完了後に実行する関数を指定するオプションがあるため、ここでresolve()として処理完了を伝えます。
そして関数自体はpromise()を返します。

これでwhen()やthen()で連鎖的な処理を行うことができます。

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
(function($){
//loading end
var loading = function(){
var d = new $.Deferred();
$('#loading').velocity({
opacity: 0
},{
loop: 5,
complete: function(){
$('#loading').remove();
d.resolve();
}
});
return d.promise();
}
 
//xml load
var loadXml = function(){
return $.ajax({
dataType: 'xml',
url: 'import.xml'
}).done(function(data){
html = '';
$(data).find('item').each(function(key,value){
html += '<div class="item">';
html += '<h1><a href="' + $(this).find('link').text() + '">' + $(this).find('title').text() + '</a></h1>';
html += '<div>' + $(this).find('description').text() + '</div>';
html += '</div>';
});
$('#import').append(html);
});
}
//xml show
var showXml = function(){
var d = new $.Deferred();
$('#import > div').velocity({
opacity: 1
},{
duration: 1000,
complete: function(){
d.resolve();
}
});
return d.promise();
}
//end
var ending = function(){
var d = new $.Deferred();
$('#import').velocity({
borderColor: '#f33'
},{
duration: 1000,
complete: function(){
d.resolve();
}
});
return d.promise();
}
$(function(){
//実行部分
var def = $.Deferred(function(d){
d.then(loading).then(loadXml).then(showXml).then(ending);
});
def.resolve();
});
})(jQuery);

complete部分が入れ子祭りにならないのでだいぶマシではありますが、少々煩雑になりました。

velocity.jsにはシーケンス機能というものもあるようなので、さらによい方法がないかについて引き続き考えていきたいと思います。

ADs

Related Articles関連記事

Post Comments

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

Comments

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

Category

Archive

Search

Social