jQuery

【jQuery】トランジションでアニメートするMinimit Anima

April 22, 2018
minimit-anima

Minimit Animaはアニメーションを実行するために構築されているjqueryアニメーション。

Browser support

IE8+, Firefox 3.5+, Safari 3+, Chrome, Ios, Android

Api

<script src='jquery.js'></script>
<script src='minimit-anima.min.js'></script>
anima(properties:object, duration:number, easing:string, options:object);
anima3d(properties:object, duration:number, easing:string, options:object);
anima2d(properties:object, duration:number, easing:string, options:object);
stopAnima(clearQueue:boolean, jumpToEnd:boolean);
delayAnima(time:number);
clearAnima();

Parameters

$(this).anima({x:20, y:20});
$(this).anima({x:20, y:20}, 400);
$(this).anima({x:20, y:20}, 400, ".19,1,.22,1");
$(this).anima({x:0, y:0}, 400, "linear");
$(this).anima({x:20, y:20}, 400, ".19,1,.22,1", {complete:function(){$(this).anima({x:-20, y:-20}, 400, "linear");}});
$(this).anima({x:20, y:20}, 400, ".19,1,.22,1", {skipInstant:true});

Properties

$(this).anima({"padding-right":"20px", opacity:0.6}, 400);

####Translate

$(this).anima({translateX:20, translateY:20}, 400); // px is default unit
$(this).anima({translateX:"0%", translateY:"0%"}, 400);
$(this).anima({x:20, y:20}, 400); // px is default unit
$(this).anima({x:"0%", y:"0%"}, 400);

####Scale

$(this).anima({scaleX:0.6, scaleY:0.6}, 400);
$(this).anima({scale:"1, 1"}, 400);

####Rotate

$(this).anima({rotate:45}, 400); // deg is default unit
$(this).anima({rotateX:"0deg"}, 400);

####Skew

$(this).anima({skewX:20, skewY:20}, 400); // deg is default unit
$(this).anima({skew:"0deg, 0deg"}, 400);

Utils

$(this).anima({x:20}, 400); // this get stopped
$(this).delayAnima(400).anima({y:20}, 400);
$(this).stopAnima();
$(this).anima({x:20}, 400); // this get stopped
$(this).delayAnima(400).anima({y:20}, 400); // this get cleared
$(this).stopAnima(true);
$(this).anima({x:20}, 400); // this get stopped and jumped to end
$(this).delayAnima(400).anima({y:20}, 400);
$(this).stopAnima(false, true);

####Delay

$(this).anima({x:20, y:0}, 400);
$(this).delayAnima(400).anima({x:20, y:20}, 400); // this get delayed
$(this).delayAnima(400).anima({x:0, y:20}, 400); // this get delayed

####Clear

$(this).anima({x:20}, 400);
$(this).delayAnima(400).anima({y:20}, 400); // this get cleared
$(this).clearAnima();

Advanced usage

$(this).css("backface-visibility", "hidden").css("perspective", "1000");

####Hardware acceleration

$(this).anima({x:200, z:0, perspective:1000}, 800);

####Transform origin

$(this).css("transform-origin","0% 0%");
$(this).anima({rotate:"45deg"}, 400);

####3D and 2D

$(this).anima3d({rotateX:"100deg", rotateY:"100deg", rotateZ:"100deg"}, 400).anima2d({scale:0.6}, 400);
$(this).anima3d({rotateX:"0deg", rotateY:"0deg", rotateZ:"0deg"}, 400).anima2d({scale:1}, 400);

####Transform values retain

$(this).anima({x:20, y:20});
$(this).anima({x:20, y:20, rotate:"40deg"}, 400);
$(this).anima({x:20, y:20});
$(this).anima({rotate:"40deg"}, 400);

####Perspective

$(this).css("perspective", "100px");
$(this).parent().css("perspective", "100px");
$(this).anima({perspective:"100px", rotateX:"0deg", rotateY:"0deg"});
$(this).anima({perspective:"100px", rotateX:"180deg", rotateY:"0deg"}, 400);
$(this).anima({perspective:"100px", rotateX:"180deg", rotateY:"180deg"}, 400);

####Perspective origin

$(this).css("perspective-origin", "-20px 20px").css("perspective", "100px");
$(this).parent().css("perspective-origin", "-20px 20px").css("perspective", "100px");
$(this).anima({perspective:"100px", rotateX:"0deg", rotateY:"0deg"});
$(this).anima({perspective:"100px", rotateX:"180deg", rotateY:"0deg"}, 400);
$(this).anima({perspective:"100px", rotateX:"180deg", rotateY:"180deg"}, 400);

MIT