Top

脱jQuery .animate() .stop()

jQueryのカスタムアニメーション animate のネイティブ書き換えです。前回の .fadeIn() 等と基本は変わりません。

詳しくは 脱jQuery その1 をご覧ください。

without-jquery

.animate()

jQuery

$("#main").animate({
    opacity: 0.5,
    height: "300px",
    width: "+=50"
    }, 400
});

書き換え JavaScript

var begin = new Date() - 0;
var myMain = document.getElementById("main");
var myTime = 400;
var id = setInterval(function() {
    var current = new Date() - begin;
    if (current > myTime) {
        clearInterval(id);
        current = myTime;
    }
    myMain.style.opacity = 0.5 * (current / myTime);
    myMain.style.height = 600 - 300 * (current / myTime) + "px";
    myMain.style.height = 300 + 50 * (current / myTime) + "px";
}, 10);

.animate() の書き換えは万能な形で簡単に書き換えるのは困難なので、仕組みを説明してみます。

JavaScript のアニメーション関係の拡張も結構あるので、それを使ってもいい思うのですが、根本的な仕組みは前回紹介した .fadeIn() や .slideUp() などと変わりません。

animation で最も大事な値は上記コードの下の方にある「current / myTime」です。この値が、一定時間(上記コードでは400ミリ秒、0.4秒)の間に0から1に変化します。

opacity

myMain.style.opacity = 0.5 * (current / myTime)

これは current / myTime が0から1に変化するので全体として opacity が「0から0.5に変化」します。

width

myMain.style.height = 600 - 300 * (current / myTime) + "px";

これは同様に考えて width を「600px から 300px に変化」

height

myMain.style.height = 300 + 50 * (current / myTime) + "px"; 

これは height を「300px から 350px に変化」です。

jQuery のアニメーションは様々な形で書くことができるので、万能に対応するのは難しいのですが、「初期値」と「最終値」がわかっていれば、値を増やす方にも減らす方にも記述することが出来ます。

「current / myTime」が0から1に変化すること。これさえ押さえていれば色々応用をきかせて変化をさせることが出来ます。width や height を変化させる場合は、単位が必要なのでその点は注意しましょう。jQuery はあっても無くても補完してくれますがネイティブではなかなか補完までは大変です。

これが ネイティブ JavaScript の animation の基本です。これを応用することで回転運動なども出来る様になります。

.stop()

jquery

$("#main").animate({
    opacity: 0.5,
    height: "300px",
    width: "+=50"
    }, 400
});
    
$("#main").stop();

書き換え JavaScript

var begin = new Date() - 0;
var myMain = document.getElementById("main");
var myTime = 400;
var id = setInterval(function() {
    var current = new Date() - begin;
    if (current > myTime) {
        clearInterval(id);
        current = myTime;
    }
    myMain.style.opacity = 0.5 * (current / myTime);
    myMain.style.height = 600 - 300 * (current / myTime) + "px";
    myMain.style.height = 300 + 50 * (current / myTime) + "px";
}, 10);
    
cleaInterval(id);

アニメーションは上記コードで言うと 「id」の変数の関数が動かしています。このコードでは id という名前になっていますが、単なる変数なので名前は何でも構いません。

それを止める命令が cleaInterval() となります。id を止めたければ、この中に id をいれればOKです。

通常はクリックしたら止まるとかそういう形だと思うので、.on() の書き換えと複合して使う形になるのが基本です。

参考:.on() の書き換え

ボタンを押したら止まる例

var begin = new Date() - 0;
var myMain = document.getElementById("main");
var myTime = 10000;
var id = setInterval(function() {
    var current = new Date() - begin;
    if (current > myTime) {
        clearInterval(id);
        current = myTime;
    }
    myMain.style.opacity = 0.5 * (current / myTime) ;
    myMain.style.height = 600 - 300 * (current / myTime) + "px";
    myMain.style.height = 300 + 50 * (current / myTime) + "px";
}, 10);

//#buttonを押すとアニメーションが止まる
document.getElementById("button").addEventListener("click", function() {
    cleaInterval(id);
}, false);

アニメーション関係に関しては「簡単に書き換える」を全然出来ませんが、こういう形でアニメーションしてるということがわかっていただければ嬉しいです。