/*
* MovieCrop.js
*
* @author mach3
* @license MIT License
* @version 0.9
* @require jQuery 1.7+
*/
(function(b,c){var a=function(e,d){this.init(e,d)};b.extend(a.prototype,{type:"MovieCrop",option:{fps:20,frames:20,repeat:true,direction:"vertical"},ele:null,ms:0,frame:1,timer:null,init:function(e,d){this.option=b.extend({},this.option,d);this.ele=b(e);this.ms=Math.floor(1000/this.option.fps);this.setFrame(1);return this},setPos:function(d,e){if(this.ele.css("background-position-x")){this.ele.css({"background-position-x":d,"background-position-y":e})}else{this.ele.css("background-position",d+"px "+e+"px")}return this},getPos:function(){var d=this.ele.css("background-position").match(/([\-\d]+?)px\s([\-\d]+?)px/);return{x:parseInt(d[1],10),y:parseInt(d[2],10)}},setFrame:function(f){var e,d,g;this.frame=f;e=this.frame-1;d=0;g=0;if(this.frame!==1){if(this.option.direction==="vertical"){g=-(e*this.ele.height())}else{d=-(e*this.ele.width())}}this.setPos(d,g);return this},nextFrame:function(){if(this.frame+1<=this.option.frames){this.setFrame(this.frame+1)}else{if(this.option.repeat){this.setFrame(1)}else{return false}}return this},prevFrame:function(){if(this.frame-1){this.setFrame(this.frame-1)}else{if(this.option.repeat){this.setFrame(this.option.frames)}else{return false}}return this},run:function(d,g){var e,f;g=b.isFunction(g)?g:function(){};f=d?"prevFrame":"nextFrame";clearTimeout(this.timer);e=function(){var h=this;if(this[f]()){this.timer=setTimeout(function(){e.call(h)},h.ms)}else{g()}};e.call(this)},play:function(d){this.run(false,d);return this},reverse:function(d){this.run(true,d);return this},stop:function(){clearTimeout(this.timer);return this},rewind:function(){this.setFrame(1);return this}});window.MovieCrop=a;b.extend(b,{initMovieCrop:function(f,d){var g,e;g=b(f);e="movie-crop";if(!g.data(e)){g.data(e,new a(f,d))}return g.data(e)}});b.fn.extend({movieInit:function(d){this.each(function(){b.initMovieCrop(this,d)});return this},moviePlay:function(d,e){this.each(function(){b.initMovieCrop(this,d).play(e)});return this},movieReverse:function(d,e){this.each(function(){b.initMovieCrop(this,d).reverse(e)});return this},movieStop:function(){this.each(function(){b.initMovieCrop(this,{}).stop()});return this},movieRewind:function(){this.each(function(){b.initMovieCrop(this,{}).rewind()});return this}})}(jQuery));
(function() {
$(function(){
$("code").each(function() {
var c, text, len;
c = $(this);
text = c.next().text();
len = text.match(/\n( +)/)[1].length;
text = text.replace(new RegExp("[ ]{" + len + "}", "g"), "").replace(/\s+?$/, "").replace(/^\n/, "");
c.text(text);
});
});
}());
<div id="container">
<h1>MovieCrop Example</h1>
<div class="items">
<div class="item">
<p>
ブロック要素の背景位置でアニメーションをさせるライブラリです。<br />
ActionScriptのMovieClipライクにコントロールが出来ます。
</p>
</div>
<div class="item">
<h2>Just Play</h2>
<div class="demo">
<div id="demo-loading" class="loading"></div>
</div>
<p>シンプルに再生するだけの例。</p>
<code data-src="loading"></code>
<script type="text/javascript" data-id="loading">
$("#demo-loading").moviePlay({frames:12, fps:12});
</script>
</div>
<div class="item">
<h2>Play / Reverse / Stop / Rewind</h2>
<div class="demo">
<div id="demo-control" class="graph"></div>
<p>
<input type="button" id="button-play-graph" value="PLAY" />
<input type="button" id="button-reverse-graph" value="REVERSE" />
<input type="button" id="button-stop-graph" value="STOP" />
<input type="button" id="button-rewind-graph" value="REWIND" />
</p>
</div>
<p>再生・逆再生・ストップ・巻き戻しのコントロールをする。</p>
<code></code>
<script type="text/javascript">
(function(){
var g = $("#demo-control").movieInit({frames:11});
$("#button-play-graph").on("click", function(){ g.moviePlay(); });
$("#button-reverse-graph").on("click", function(){ g.movieReverse(); });
$("#button-stop-graph").on("click", function(){ g.movieStop(); });
$("#button-rewind-graph").on("click", function(){ g.movieRewind(); });
}());
</script>
</div>
<div class="item">
<h2>Hover Demo</h2>
<div class="demo">
<div id="demo-hover" class="circle"></div>
</div>
<p>再生・逆再生を使ってアニメーションするボタンを作ってみる例。</p>
<code></code>
<script type="text/javascript">
(function(){
var c = $("#demo-hover").movieInit({frames:12, repeat:false});
c.hover(
function(){
$(this).moviePlay();
},
function(){
$(this).movieReverse();
}
);
}());
</script>
</div>
<div class="item">
<h2>Callback Demo</h2>
<div class="demo">
<div class="row">
<div class="circle col demo-callback" id="demo-callback-1"></div>
<div class="circle col demo-callback" id="demo-callback-2"></div>
<div class="circle col demo-callback" id="demo-callback-3"></div>
</div>
<p>
<input type="button" value="START" id="button-demo-callback">
</p>
</div>
<p>アニメーション完了時のコールバックを利用して、1つずつ順々にアニメーションをさせる例。</p>
<code></code>
<script type="text/javascript">
(function(){
var n, end, run;
n = 1;
end = 3;
run = function(){
var o = $("#demo-callback-" + n);
if(o.length){
o.moviePlay({}, function(){
run();
});
}
n += 1;
};
$(".demo-callback").movieInit({frames:12, repeat:false});
$("#button-demo-callback").on("click", function(){
run();
});
}());
</script>
</div>
</div>
</div>
<script type="text/javascript">
</script>
body {
margin:0;
padding:0;
font-size:81.2%;
background-color:#eee;
}
#container {
width:480px;
margin:0 auto;
padding-bottom:50px;
background-color:#fff;
}
h1 {
background-color:#345;
color:#fff;
margin:0 1px;
padding:1em;
}
h2 {
border-left:20px solid #456;
padding-left:1em;
margin-left:-20px;
color:#456;
}
code {
display:block;
white-space:pre;
padding:1em;
margin:20px 0;
border-radius:5px;
background-color:#ddd;
font-size:1em;
box-shadow:inset 0px 0px 5px #789;
}
.item {
margin:40px 20px;
}
.demo {
margin:30px 0;
}
.row {
overflow:hidden;
}
.col {
float:left;
margin-right:20px;
}
.loading {
width:32px;
height:32px;
background:url(https://github.com/mach3/js-moviecrop/raw/master/example/images/loading.png) 0 0 no-repeat;
}
.graph {
width:32px;
height:32px;
background:url(https://github.com/mach3/js-moviecrop/raw/master/example/images/graph.png) 0 0 no-repeat;
}
.circle {
width:32px;
height:32px;
background:url(https://github.com/mach3/js-moviecrop/raw/master/example/images/circle.png) 0 0 no-repeat;
}