495 lines
15 KiB
JavaScript
495 lines
15 KiB
JavaScript
/**
|
||
*
|
||
* jQuery A3D v1.0 To use CSS3 Keyframe Animation from JavaScript
|
||
* http://
|
||
* Copyright 2012, ShikemokuMK
|
||
|
||
*Free to use and abuse under the MIT license.
|
||
*https://twitter.com/shikemokumk
|
||
*
|
||
*/
|
||
|
||
(function($){
|
||
var vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' : (/firefox/i).test(navigator.userAgent) ? 'Moz' : (/Trident/i).test(navigator.userAgent) ? 'ms' : 'opera' in window ? 'O' : '';
|
||
$.fn.a3d=function(arg){
|
||
|
||
var base_point = null;
|
||
|
||
return this.each(function(i){
|
||
|
||
var that = this;
|
||
|
||
var keyframe = arg.frames;
|
||
var config = arg.config;
|
||
var cb_complete = arg.complete;
|
||
var cb_start = arg.start;
|
||
var cb_iteration = arg.iteration;
|
||
|
||
var point = {x:0, y:0, z:0};
|
||
|
||
|
||
var anim_id = "id_"+Math.floor( Math.random() * 1000000000 );
|
||
|
||
var trans = {};
|
||
var master_text ="";
|
||
|
||
var defaults={
|
||
duration:"4s",
|
||
state:"running",
|
||
easing:"0.0,0.0,1.0,1.0",
|
||
count:"1",
|
||
delay:"0",
|
||
direction:"",
|
||
mode:"forwards",
|
||
maintain:"true"
|
||
|
||
}
|
||
|
||
var options=$.extend(defaults, trimAll(config));
|
||
|
||
var last_frame_text = "";
|
||
var last_style_text = "";
|
||
|
||
var mod_frames ={};
|
||
var mod_styles ={};
|
||
|
||
var ext_array = [];
|
||
|
||
|
||
base_point = $.data(this,"base_point") || null;
|
||
|
||
|
||
if(base_point != null){
|
||
|
||
}else{
|
||
|
||
base_point = $.extend({x:0,y:0,z:0},{x:parseInt($(this).offset().left),y:parseInt($(this).offset().top)});
|
||
$.data(this,"base_point",base_point);
|
||
|
||
}
|
||
|
||
if(keyframe["0%"]){
|
||
//0%が存在する場合,そのまま適応
|
||
|
||
}else{
|
||
|
||
var last_frame_text = $.data(this,"last_frame_text") || "";
|
||
var last_style_text = $.data(this,"last_style_text") || "";
|
||
|
||
var last_mod_frames = $.data(this,"last_mod_frames") || {};
|
||
var last_mod_styles = $.data(this,"last_mod_styles") || {};
|
||
|
||
point = $.data(this,"point") || {x:0,y:0,z:0}
|
||
|
||
var state_text = last_frame_text + "; " + last_style_text;
|
||
|
||
var maintain_state = " 0%{ -"+vendor+"-transform:";
|
||
maintain_state += state_text+" } ";
|
||
|
||
master_text = maintain_state;
|
||
|
||
mod_frames = last_mod_frames;
|
||
mod_styles = last_mod_styles;
|
||
|
||
|
||
}
|
||
|
||
var mstime = parseInt(options.duration);
|
||
//options.duration.substring(options.duration.substring.length-1,options.duration.substring.length)!="s"){
|
||
if(options.duration.indexOf("ms")!=-1){
|
||
}else if(options.duration.indexOf("s")!=-1){
|
||
mstime = mstime * 1000
|
||
}
|
||
|
||
//キーフレーム登録
|
||
for(percentage in keyframe){
|
||
|
||
var frames = [];
|
||
var styles = [];
|
||
|
||
keyframe[percentage].trans = keyframe[percentage].trans || {};
|
||
keyframe[percentage].styles = keyframe[percentage].styles || {};
|
||
|
||
frames = convertTrans(trimAll(keyframe[percentage].trans),point,base_point);
|
||
styles = trimAll(keyframe[percentage].styles);
|
||
|
||
var head_text = " "+percentage+"{ -"+vendor+"-transform:";
|
||
|
||
var frame_text = "";
|
||
var style_text = "";
|
||
|
||
mod_styles = $.extend(mod_styles,styles);
|
||
mod_frames = $.extend(mod_frames,frames);
|
||
|
||
|
||
//スタイルの状態を引き継ぐ
|
||
if(options.maintain == "true"){
|
||
|
||
for(key in mod_styles){
|
||
style_text+=" "+key+":"+mod_styles[key]+";";
|
||
}
|
||
|
||
for(var key in mod_frames){
|
||
frame_text+=key+"("+mod_frames[key]+") ";
|
||
}
|
||
|
||
}else{
|
||
for(key in styles){
|
||
style_text+=" "+key+":"+styles[key]+";";
|
||
}
|
||
|
||
for(var key in frames){
|
||
frame_text+=key+"("+frames[key]+") ";
|
||
}
|
||
}
|
||
|
||
master_text += head_text + frame_text+ "; "+style_text+" } ";
|
||
|
||
last_frame_text = frame_text;
|
||
|
||
//関数登録
|
||
if (typeof keyframe[percentage].ext == "function"){
|
||
|
||
|
||
(function(){
|
||
var _fnc = keyframe[percentage].ext;
|
||
var _mstime = mstime*(parseInt(percentage));
|
||
var tfnc = function(){
|
||
setTimeout(function(){_fnc.call(that);},_mstime*0.01);
|
||
};
|
||
|
||
ext_array.push(tfnc);
|
||
|
||
})();
|
||
}
|
||
|
||
|
||
}
|
||
|
||
if(ext_array.length>0){
|
||
|
||
if(typeof cb_start !== "function"){
|
||
cb_start = function(){};
|
||
}
|
||
if(typeof cb_iteration !== "function"){
|
||
cb_iteration = function(){};
|
||
}
|
||
}
|
||
|
||
$.data(this,"ext_array",ext_array);
|
||
|
||
|
||
for(key in mod_styles){
|
||
last_style_text += " "+key+":"+mod_styles[key]+";"
|
||
}
|
||
|
||
|
||
var last_text = last_frame_text + "; " + last_style_text;
|
||
|
||
var lastSheet = document.styleSheets[document.styleSheets.length - 1];
|
||
lastSheet.insertRule("@-"+vendor+"-keyframes " + anim_id + " {"+master_text+"} ", lastSheet.cssRules.length);
|
||
|
||
|
||
var obj = $(this);
|
||
|
||
obj.a3d_name = anim_id;
|
||
|
||
var original_css_param={
|
||
|
||
"-animation-name":obj.a3d_name,
|
||
"-animation-duration":defaults.duration,
|
||
"-animation-play-state":defaults.state,
|
||
"-animation-delay":defaults.delay,
|
||
"-animation-iteration-count":defaults.count,
|
||
"-animation-direction": defaults.direction,
|
||
"-animation-fill-mode": defaults.mode,
|
||
"-animation-timing-function":defaults.easing
|
||
|
||
};
|
||
|
||
var css_param = {};
|
||
|
||
for(prefix in original_css_param){
|
||
|
||
css_param["-"+vendor+prefix] = original_css_param[prefix];
|
||
|
||
}
|
||
|
||
obj.css(css_param);
|
||
|
||
$.data(this,"last_frame_text",last_frame_text);
|
||
$.data(this,"last_style_text",last_style_text);
|
||
|
||
$.data(this,"last_mod_frames",mod_frames);
|
||
$.data(this,"last_mod_styles",mod_styles);
|
||
|
||
$.data(this,"point",point);
|
||
|
||
if(vendor == "Moz"){
|
||
|
||
obj.css(css_param).one('animationend',function(){
|
||
|
||
if(typeof cb_complete === "function"){
|
||
|
||
obj.css("transform", obj.css("transform"));
|
||
for (var key in mod_styles) {
|
||
obj.css(key, obj.css(key));
|
||
}
|
||
obj.css("animation-name","");
|
||
|
||
cb_complete.call(that);
|
||
}
|
||
|
||
});
|
||
obj.css(css_param).bind('animationiteration',function(){
|
||
|
||
if(typeof cb_iteration === "function"){
|
||
cb_iteration.call(that);
|
||
}
|
||
|
||
//タイムアウト呼び起こし
|
||
var tanim = $.data(that,"ext_array");
|
||
|
||
if(tanim.length>0){
|
||
for(var i=0;i<tanim.length;i++){
|
||
|
||
tanim[i]();
|
||
|
||
}
|
||
}
|
||
|
||
|
||
});
|
||
|
||
obj.css(css_param).one('animationstart',function(){
|
||
|
||
|
||
if(typeof cb_start === "function"){
|
||
cb_start.call(that);
|
||
|
||
}
|
||
//タイムアウト呼び起こし
|
||
var tanim = $.data(that,"ext_array");
|
||
|
||
if(tanim.length>0){
|
||
for(var i=0;i<tanim.length;i++){
|
||
|
||
tanim[i]();
|
||
|
||
}
|
||
}
|
||
|
||
|
||
});
|
||
|
||
}else{
|
||
|
||
//if(vendor =="ms") vendor="";
|
||
//alert(vendor);
|
||
//var hasAnimationEvt = 'AnimationEvent' in window;
|
||
//alert(hasAnimationEvt);
|
||
|
||
obj.css(css_param).one(''+vendor+'AnimationEnd animationend',function(){
|
||
|
||
if(typeof cb_complete === "function"){
|
||
obj.css("transform",obj.css("transform"));
|
||
|
||
for (var key in mod_styles) {
|
||
obj.css(key, obj.css(key));
|
||
}
|
||
|
||
obj.css("-"+vendor+"-animation-name","");
|
||
cb_complete.call(that);
|
||
}
|
||
|
||
});
|
||
obj.css(css_param).bind(''+vendor+'AnimationIteration animationiteration',function(){
|
||
|
||
if(typeof cb_iteration === "function"){
|
||
cb_iteration.call(that);
|
||
}
|
||
|
||
//タイムアウト呼び起こし
|
||
var tanim = $.data(that,"ext_array");
|
||
|
||
if(tanim.length>0){
|
||
for(var i=0;i<tanim.length;i++){
|
||
|
||
tanim[i]();
|
||
|
||
}
|
||
}
|
||
|
||
|
||
});
|
||
obj.css(css_param).one(''+vendor+'AnimationStart animationstart',function(){
|
||
if(typeof cb_start === "function"){
|
||
cb_start.call(that);
|
||
}
|
||
|
||
//タイムアウト呼び起こし
|
||
var tanim = $.data(that,"ext_array");
|
||
|
||
if(tanim.length>0){
|
||
for(var i=0;i<tanim.length;i++){
|
||
|
||
tanim[i]();
|
||
|
||
}
|
||
}
|
||
|
||
});
|
||
|
||
}
|
||
|
||
|
||
});
|
||
|
||
|
||
};
|
||
|
||
//アニメーション開始
|
||
$.fn.a3dstate=function(str_stat){
|
||
|
||
return this.each(function(i){
|
||
|
||
$(this).css("-"+vendor+"-animation-play-state",str_stat);
|
||
|
||
});
|
||
|
||
};
|
||
|
||
|
||
//アニメーション開始
|
||
$.fn.a3dInfo=function(){
|
||
|
||
var result_array = [];
|
||
|
||
this.each(function(i){
|
||
|
||
var last_frame_text = $.data(this,"last_frame_text") || "";
|
||
var last_style_text = $.data(this,"last_style_text") || "";
|
||
|
||
var last_mod_frames = $.data(this,"last_mod_frames") || {};
|
||
var last_mod_styles = $.data(this,"last_mod_styles") || {};
|
||
|
||
var point = $.data(this,"point") || {x:0,y:0,z:0}
|
||
|
||
var result = {
|
||
point : point,
|
||
frame_text :last_frame_text,
|
||
style_text :last_style_text,
|
||
frames:last_mod_frames,
|
||
styles:last_mod_styles
|
||
}
|
||
|
||
result_array.push(result);
|
||
|
||
});
|
||
|
||
return result_array;
|
||
|
||
|
||
};
|
||
|
||
//アニメーションをつなげる
|
||
$.fn.a3dChain=function(a3ds,cb){
|
||
|
||
var chain_num = a3ds.length;
|
||
var index = 0;
|
||
|
||
var array_a3d = [];
|
||
|
||
var target = $(this);
|
||
|
||
for(var i=0;i<a3ds.length;i++){
|
||
|
||
var a3d = a3ds[i];
|
||
|
||
a3d.complete = function(){
|
||
|
||
index++;
|
||
if(array_a3d.length > index){
|
||
|
||
target.a3d(array_a3d[index]);
|
||
target.a3dstate("running")
|
||
|
||
}else{
|
||
|
||
if(typeof cb =="function"){
|
||
cb();
|
||
}
|
||
}
|
||
};
|
||
|
||
//初期状態は強制的に停止状態
|
||
a3d.config["state"] = "pause";
|
||
|
||
array_a3d.push(a3d);
|
||
|
||
}
|
||
|
||
target.a3d(array_a3d[0]);
|
||
target.a3dstate("running");
|
||
|
||
};
|
||
|
||
function trimAll(array_obj) {
|
||
|
||
var result = {};
|
||
|
||
for(key in array_obj){
|
||
array_obj[key] = ""+array_obj[key] ;
|
||
result[key.replace(/^\s+|\s+$/g, "")] = array_obj[key].replace(/^\s+|\s+$/g, "");
|
||
}
|
||
|
||
return result;
|
||
|
||
}
|
||
|
||
function convertTrans(array_obj,point,base_point){
|
||
|
||
var result = {};
|
||
|
||
for(key in array_obj){
|
||
|
||
if(key == "x" || key == "y" || key == "z"){
|
||
|
||
var tmp = array_obj[key];
|
||
|
||
//相対位置指定
|
||
if(tmp.substring(0,1)=="="){
|
||
|
||
var tmp_i = parseInt(tmp.replace("=",""));
|
||
point[key] = point[key] + tmp_i ;
|
||
|
||
}else if(tmp.substring(0,1)=="*"){
|
||
|
||
var tmp_i = parseInt(tmp.replace("*",""));
|
||
point[key] = tmp_i - base_point[key];
|
||
|
||
|
||
}else{
|
||
//絶対位置指定
|
||
point[key] = parseInt(tmp) ;
|
||
}
|
||
|
||
delete array_obj[key];
|
||
}
|
||
|
||
}
|
||
|
||
//array_obj["translate3d"] = point["x"]+"px,"+point["y"]+"px,"+point["z"]+"px";
|
||
array_obj["translate"] = point["x"]+"px,"+point["y"]+"px";
|
||
|
||
return array_obj;
|
||
|
||
}
|
||
|
||
})(jQuery);
|
||
|
||
|
||
|
||
|
||
|
||
|