Skip to content

Instantly share code, notes, and snippets.

@yamoo9

yamoo9/animate.js

Created November 11, 2018 16:09
Show Gist options
  • Save yamoo9/1b6b667a560a8c62c3c1755171b10bea to your computer and use it in GitHub Desktop.
Save yamoo9/1b6b667a560a8c62c3c1755171b10bea to your computer and use it in GitHub Desktop.
Download ZIP
애니메이션 라이브러리 animate.js 활용
Raw
animate.js
(function (global) {
'use strict';
function animate(render, duration, easing, callback) {
duration = duration || 400;
easing = easing ? animate.easings[easing] : animate.easings['linear'];
var start = performance.now();
requestAnimationFrame(function _animate(time) {
var timeFraction = (time - start) / duration;
var progress = easing(timeFraction);
render(progress);
if (timeFraction < 1) { requestAnimationFrame(_animate); }
else {
timeFraction = 1;
typeof callback === 'function' && callback();
}
});
}
animate.makeEaseOut = function (easing) {
return function (timeFraction) {
return 1 - easing(1 - timeFraction);
}
};
animate.makeEaseInOut = function (easing) {
return function (timeFraction) {
if (timeFraction < .5) { return easing(2 * timeFraction) / 2; }
else { return (2 - easing(2 * (1 - timeFraction))) / 2; }
}
};
animate.easings = {
elasticity: 1.5,
linear: function (timeFraction) { return timeFraction; },
quadIn: function (timeFraction) { return Math.pow(timeFraction, 2) },
circIn: function (timeFraction) { return 1 - Math.sin(Math.acos(timeFraction)) },
backIn: function (timeFraction) {
var x = animate.easings.elasticity; // x = 탄성 계수
return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x)
},
bounceIn: function (timeFraction) {
for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
},
elasticIn: function (timeFraction) {
var x = animate.easings.elasticity;
return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction)
}
};
animate.easings.quadOut = animate.makeEaseOut(animate.easings.quadIn);
animate.easings.quadInOut = animate.makeEaseInOut(animate.easings.quadIn);
animate.easings.circOut = animate.makeEaseOut(animate.easings.circIn);
animate.easings.circInOut = animate.makeEaseInOut(animate.easings.circIn);
animate.easings.backOut = animate.makeEaseOut(animate.easings.backIn);
animate.easings.backInOut = animate.makeEaseInOut(animate.easings.backIn);
animate.easings.bounceOut = animate.makeEaseOut(animate.easings.bounceIn);
animate.easings.bounceInOut = animate.makeEaseInOut(animate.easings.bounceIn);
animate.easings.elasticOut = animate.makeEaseOut(animate.easings.elasticIn);
animate.easings.elasticInOut = animate.makeEaseInOut(animate.easings.elasticIn);
global.animate = animate;
})(window);
Raw
demo.html
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>animate.js 코드 예시</title>
<style>
.box {
width: 100px;
height: 10px;
background: #000;
}
</style>
<script src="animate.js"></script>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
box.addEventListener('click', function(){
// 애니메이션 설정
animate(function(progress){
box.style.opacity = 1 - progress/3;
}, 500);
animate(function(progress){
box.style.transform = 'translateX('+ (200 * progress) +'px)';
}, 1200, 'elasticOut');
});
// 탄성 계수 변경
animate.easings.elasticity = 2;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment