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

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

今回はJavascriptを使用しています。
CSS３でもできそうでしたが、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

version="1.0" encoding="UTF-8"?>

<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" />

↑↑↑ Page Top へ ↑↑↑

返信を残す コメントをキャンセル

返信を残すコメントをキャンセル