ease-Methoden
HTML
JavaScript
CSS
Demo
<!DOCTYPE html>
<html>
<head>
<title>ease-Methoden</title>
<link rel="stylesheet" type="text/css" href="ease.css" media="screen" />
<script type="text/javascript" src="ease.js"></script>
</head>
<body align="center">
<h1><br>ease-Methoden</h1>
<p><br>Die ease-Methoden werden hier zur Bewegungs-Animation eines Elements verwendet.</p>
<div class="container">
<div id="rectangle"></div>
</div>
<div class="buttondiv">
<input class="button02" type="button" value="|<" onclick="reset('rectangle');">
<input class="button02" type="button" value="Linear"
onclick="easeMethods('rectangle',0,910,1500,easing='linear');">
</div>
<div class="buttondiv">
<input class="button02" type="button" value="InQuad"
onclick="easeMethods('rectangle',0,910,1500,easing='easeInQuad');">
<input class="button02" type="button" value="OutQuad"
onclick="easeMethods('rectangle',0,910,1500,easing='easeOutQuad');">
<input class="button02" type="button" value="InOutQuad"
onclick="easeMethods('rectangle',0,910,1500,easing='easeInOutQuad');">
</div>
<div class="buttondiv">
<input class="button02" type="button" value="InCubic"
onclick="easeMethods('rectangle',0,910,1500,easing='easeInCubic');">
<input class="button02" type="button" value="OutCubic"
onclick="easeMethods('rectangle',0,910,1500,easing='easeOutCubic');">
<input class="button02" type="button" value="InOutCubic"
onclick="easeMethods('rectangle',0,910,1500,easing='easeInOutCubic');">
</div>
<div class="buttondiv">
<input class="button02" type="button" value="InQuart"
onclick="easeMethods('rectangle',0,910,1500,easing='easeInQuart');">
<input class="button02" type="button" value="OutQuart"
onclick="easeMethods('rectangle',0,910,1500,easing='easeOutQuart');">
<input class="button02" type="button" value="InOutQuart"
onclick="easeMethods('rectangle',0,910,1500,easing='easeInOutQuart');">
</div>
<div class="buttondiv">
<input class="button02" type="button" value="InQuint"
onclick="easeMethods('rectangle',0,910,1500,easing='easeInQuint');">
<input class="button02" type="button" value="OutQuint"
onclick="easeMethods('rectangle',0,910,1500,easing='easeOutQuint');">
<input class="button02" type="button" value="InOutQuint"
onclick="easeMethods('rectangle',0,910,1500,easing='easeInOutQuint');">
</div>
</body>
</html>
// ease-Methoden
function easeMethods(element,startValue,endValue,duration,easing) {
// Animations-Element
const animelement = document.getElementById(element);
// Init Positions-Animation
var anim = requestAnimationFrame((timestamp) => {
var stamp = timestamp || new Date().getTime();
var start = stamp;
easeAnim(start, stamp, duration, endValue, startValue);
})
// ease-Funktionen
const easings = {
linear(t) { return t; },
easeInQuad(t) { return t * t; },
easeOutQuad(t) { return t * (2 - t); },
easeInOutQuad(t) { return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; },
easeInCubic(t) { return t * t * t; },
easeOutCubic(t) { return (--t) * t * t + 1; },
easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1; },
easeInQuart(t) { return t * t * t * t; },
easeOutQuart(t) { return 1 - (--t) * t * t * t; },
easeInOutQuart(t) { return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t; },
easeInQuint(t) { return t * t * t * t * t; },
easeOutQuint(t) { return 1 + (--t) * t * t * t * t; },
easeInOutQuint(t) { return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t; }
};
// Positions-Animation
var easeAnim = (startTime, currentTime, duration, endValue, startValue) => {
var runtime = currentTime - startTime;
let progress = runtime / duration;
progress = Math.min(progress, 1);
// Aufruf der ease-Funktion
var ease = easings[easing](progress);
// Positions-Animation
easeValue = parseFloat(startValue + (endValue * ease));
animelement.style.left = easeValue + 'px';
if (runtime < duration) {
requestAnimationFrame((timestamp) => {
var currentTime = timestamp || new Date().getTime();
easeAnim(startTime, currentTime, duration, endValue, startValue);
})
}
}
}
// Element am linken Rand platzieren
function reset(element) {
var elem = document.getElementById(element);
elem.style.left = '0px';
}
/* Styles ease-Methoden */
#rectangle {
width:50px;
height:50px;
background-color:#2472b9;
left:0px;
position:relative;
}
.container {
width:960px;
height:50px;
border:1px solid #cccccc;
box-sizing:border-box;
margin:20px auto 20px auto;
}
.buttondiv {
width:960px;
height:50px;
box-sizing:border-box;
display:-webkit-flex;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
align-items:center;
margin:0 auto;
}
/* .button02 { ... hier können Sie Ihren eigenen Button verwenden ... } */
Funktionalität verschiedener ease-Methoden
Die ease-Methoden werden hier zur Bewegungs-Animation eines Elements verwendet.
Dieses Beispiel verdeutlicht die Funktionalität verschiedener ease-Methoden.
Sorry, aber die Darstellung der Codes dieses Beispiels ist auf kleinen Displays zu unübersichtlich.Sie können sich jedoch die Codes downloaden und die ease-Methoden auf ihrem PC/Laptop/Tablet ausprobieren.