読者です 読者をやめる 読者になる 読者になる

iBooksで複数の画像を使用してアニメーションをさせる

iBooksで本を作る時に、複数の画像を使用してgifアニメーション的なことをさせたかったので作ってみました。
クリックするとアニメーションが開始するような仕組み。

今回はJavascriptを使用しています。
CSS3でもできそうでしたが、JSの方がファイルの管理は楽で流用も簡単だと思ったので、こちらを使用。

style/test.css

@charset "utf-8";

html,body {
    padding:0;
    margin:0;
}

.img {
    visibility:hidden;
    position: absolute;
    top:0;
    left:0;
}

#clickarea {
    position:relative;
}

text/test.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="ja" xml:lang="ja">
<head>
<title>テストページ</title>
<link href="../style/test.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=768, height=1024"/>
</head><body>
<div id="clickarea">
    <div>
        <img src="../images/test001.jpg" />
    </div>
    <div class="img anime1">
        <img src="../images/test001.jpg" />
    </div>
    <div class="img anime1">
        <img src="../images/test001_01.jpg" />
    </div>
    <div class="img anime1">
        <img src="../images/test001_02.jpg" />
    </div>
</div>
<script src="../js/test.js" type="text/javascript"></script>
</body></html>

js/test.js

var count = 0;
var anime_flg = 0; //クリック連打防止用
var speed = 500; //アニメーションの速さ(ミリ秒単位)

function onClick() {
    
    if(anime_flg != 0){
        return;
    }
    
    count = 0;
    anime_flg = 1;

    setTimeout('onTimer()',speed);
}

function onTimer() {
    
    var imgs = document.getElementsByClassName("img");
    var imgs2 = document.getElementsByClassName("anime1");
    
    count++;
    
    if(count < imgs2.length - 1){
        setTimeout('onTimer()',speed);
    }else{
        anime_flg = 0;
    }
    
    for (var i=0; i < imgs.length; i++) {
        imgs[i].style.visibility = "hidden";
    }
    
    for (var i=0; i < imgs2.length; i++) {
        if(count == i){
            imgs2[i].style.visibility = "visible";
        }
    }
}

var clickarea = document.getElementById('clickarea');
clickarea.addEventListener('click', onClick);

javascript を使用する時は、opf ファイルに、「properties="scripted"」の記述が必要になる。ココが重要なポイント!

<item id="text.test.xhtml" href="text/test.xhtml" media-type="application/xhtml+xml" properties="scripted" />