JavaScriptフレーム設計第14章アニメーションエンジン
18791 ワード
ease-js
二次キュービックは三次キュービックで、四次キュービットは五次キュービットで、平方根を開いたMath.sqitExpoは三角関数と開立三方の一次バネ効果Backを組み合わせて計算します.Bounceは高級スプリング効果です.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#taxiway {
width: 800px;
height: 100px;
background: #E8E8EF;
position: relative;
}
#move {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: #a9ea00;
}
</style>
</head>
<body>
<div id="taxiway">
<div id="move"></div>
</div>
<script>
function easeOutBounce(pos) {
if ((pos) < (1/2.75)) {
return (7.5625*pos*pos);
} else if (pos < (2/2.75)) {
return (7.5625*(pos-=(1.5/2.75))*pos + 0.75);
} else if (pos < (2.5/2.75)) {
return (7.5625*(pos-=(2.25/2.75))*pos + 0.9375);
} else {
return (7.5625*(pos-=(2.625/2.75))*pos + 0.984375);
}
}
var el = document.getElementById('move')
var parent = document.getElementById('taxiway')
var distance = parent.offsetWidth - el.offsetWidth
var begin = parseFloat(window.getComputedStyle(el, null).left)
var end = begin + distance
var fps = 30
var interval = 1000 / fps
var duration = 2000
var times = duration / 1000 * fps
var step = distance / times
el.onclick = function() {
var beginTime = new Date
var id = setInterval(function() {
var t = new Date - beginTime
if (t >= duration) {
el.style.left = end + 'px'
clearInterval(id)
} else {
var per = t / duration
el.style.left = begin + easeOutBounce(per) * distance + 'px'
}
}, interval)
}
</script>
</body>
</html>二次キュービックは三次キュービックで、四次キュービットは五次キュービットで、平方根を開いたMath.sqitExpoは三角関数と開立三方の一次バネ効果Backを組み合わせて計算します.Bounceは高級スプリング効果です.