gitmedia/thats-me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Test files für LifeWave mit anime.js

Browse source
This commit is contained in:
Kevin Adametz 2025-04-10 17:26:38 +02:00
parent c6dd063eee
commit 9c48a17152
7 changed files with 3573 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1060
test/anime-points-animation.html Normal file
View file

File diff suppressed because it is too large Load diff

452
test/anime-points-drag.html Normal file
View file

@ -0,0 +1,452 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welle Hintergrund (SVG)</title>
<style type="text/css">
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: sans-serif;
}
h1 {
margin-bottom: 30px;
}
svg {
border: 1px solid #ccc; /* Optional: Rahmen zur Visualisierung */
overflow: visible; /* Damit Punkte am Rand nicht abgeschnitten werden */
}
.point {
fill: #000000; /* Farbe der Punkte */
opacity: 0.8; /* Punkte sichtbar machen */
r: 3.5; /* Einheitliche Punktgröße */
}
.line {
fill: none; /* Keine Füllung für die Linie */
stroke-width: 4; /* Dickere Hauptlinie */
}
.offset-spline {
fill: none;
stroke-width: 2.5; /* Dickere mittlere Linien */
stroke-opacity: 0.6; /* Angepasste Transparenz */
}
.offset-spline-far {
fill: none;
stroke-width: 1.2; /* Etwas dickere äußere Linien */
stroke-opacity: 0.4; /* Höhere Transparenz */
}
.offset-spline-far-2 {
fill: none;
stroke-width: 1; /* Etwas dickere äußere Linien */
stroke-opacity: 0.2; /* Höhere Transparenz */
}
</style>
</head>
<body>
<h1>Welleneffekt (SVG)</h1>
<svg width="600" height="200" id="point-canvas">
<defs>
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(226, 245, 172);stop-opacity:1" />
<stop offset="35%" style="stop-color:rgb(135, 241, 36);stop-opacity:1" />
<stop offset="70%" style="stop-color:rgb(62, 200, 232);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(4, 162, 254);stop-opacity:1" />
</linearGradient>
</defs>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', initializeApp);
// Konstanten und Konfiguration
const CONFIG = {
svgNS: "http://www.w3.org/2000/svg",
pointRadius: 4,
offsetNear: 5,
offsetFar: 10,
minOffsetFactor: 0.2,
splineTension: 1.3,
baseYPositions: [100, 70, 110, 80, 130, 90, 100],
initialAnimDuration: 2500,
contAnimDuration: 1000,
waveAmplitude: 12,
isDraggable: true,
animationEnabled: true
};
// Globale Variablen
let svg, points, pointElements = [], pathElements = {}, currentAnimation, isAnimating = false;
let draggedPointIndex = -1;
function initializeApp() {
// DOM-Referenzen
svg = document.getElementById('point-canvas');
// Punkte definieren
initPoints();
updateVisualization();
addControls();
// Animation starten, wenn aktiviert
if (CONFIG.animationEnabled) {
startWaveAnimation();
}
}
// Punkte initialisieren
function initPoints() {
const xStep = 580 / (CONFIG.baseYPositions.length - 1);
// Punkte erstellen
points = CONFIG.baseYPositions.map((y, i) => {
return { x: 20 + i * xStep, y };
});
// Punktelemente erstellen
pointElements = points.map((p, index) => {
const circle = createSVGElement('circle', {
'class': 'point',
'cx': p.x,
'cy': p.y,
'r': CONFIG.pointRadius,
'cursor': CONFIG.isDraggable ? 'grab' : 'default'
});
// Drag-and-Drop-Funktionalität hinzufügen
if (CONFIG.isDraggable) {
setupDraggable(circle, index);
}
svg.appendChild(circle);
return circle;
});
}
// Hilfsfunktion zur Berechnung von Normalen
function calculateNormals(points) {
return points.map((p1, i, arr) => {
let dx, dy;
if (i === 0) {
dx = arr[1].x - arr[0].x;
dy = arr[1].y - arr[0].y;
} else if (i === arr.length - 1) {
dx = arr[i].x - arr[i-1].x;
dy = arr[i].y - arr[i-1].y;
} else {
const p0 = arr[i - 1];
const p2 = arr[i + 1];
dx = p2.x - p0.x;
dy = p2.y - p0.y;
}
// Normale berechnen (-dy, dx) und normalisieren
const length = Math.sqrt(dx * dx + dy * dy);
return length > 0
? { x: -dy / length, y: dx / length }
: { x: 0, y: 0 };
});
}
// Funktion zum Generieren von Offset-Spline-Pfaden
function generateOffsetSplinePath(originalPoints, normals, offsetDistance) {
if (originalPoints.length < 2) return "";
const { minOffsetFactor, splineTension } = CONFIG;
// Startpunkt mit Offset
const startNormal = normals[0];
const startOffsetX = originalPoints[0].x + startNormal.x * offsetDistance * minOffsetFactor;
const startOffsetY = originalPoints[0].y + startNormal.y * offsetDistance * minOffsetFactor;
let d = `M ${startOffsetX} ${startOffsetY}`;
// Bézier-Kurve für jeden Punkt generieren
for (let i = 0; i < originalPoints.length - 1; i++) {
const p0 = i > 0 ? originalPoints[i - 1] : originalPoints[0];
const p1 = originalPoints[i];
const p2 = originalPoints[i + 1];
const p3 = i < originalPoints.length - 2 ? originalPoints[i + 2] : originalPoints[originalPoints.length - 1];
// Kontrollpunkte berechnen
const cp1x = p1.x + (p2.x - p0.x) / 6 * splineTension;
const cp1y = p1.y + (p2.y - p0.y) / 6 * splineTension;
const cp2x = p2.x - (p3.x - p1.x) / 6 * splineTension;
const cp2y = p2.y - (p3.y - p1.y) / 6 * splineTension;
// Normalen verwenden
const n1 = normals[i];
const n2 = normals[i+1];
// Offset-Punkte berechnen
const offsetCp1x = cp1x + n1.x * offsetDistance;
const offsetCp1y = cp1y + n1.y * offsetDistance;
const offsetCp2x = cp2x + n2.x * offsetDistance;
const offsetCp2y = cp2y + n2.y * offsetDistance;
const offsetP2x = p2.x + n2.x * offsetDistance * minOffsetFactor;
const offsetP2y = p2.y + n2.y * offsetDistance * minOffsetFactor;
// Kubisches Bézier-Segment hinzufügen
d += ` C ${offsetCp1x} ${offsetCp1y}, ${offsetCp2x} ${offsetCp2y}, ${offsetP2x} ${offsetP2y}`;
}
return d;
}
// Hilfsfunktion zum Erstellen von SVG-Elementen
function createSVGElement(type, attributes = {}) {
const element = document.createElementNS(CONFIG.svgNS, type);
Object.entries(attributes).forEach(([key, value]) => {
element.setAttribute(key, value);
});
return element;
}
// Drag-and-Drop-Funktionalität
function setupDraggable(element, pointIndex) {
element.addEventListener('mousedown', (e) => startDrag(e, pointIndex));
element.addEventListener('touchstart', (e) => startDrag(e, pointIndex), { passive: false });
}
function startDrag(event, pointIndex) {
event.preventDefault();
// Stoppe Animationen während des Ziehens
if (currentAnimation) {
currentAnimation.pause();
}
draggedPointIndex = pointIndex;
// Cursor-Stil ändern
document.querySelectorAll('.point').forEach(p => p.setAttribute('cursor', 'grab'));
pointElements[pointIndex].setAttribute('cursor', 'grabbing');
// Event-Listener für Bewegung und Loslassen hinzufügen
document.addEventListener('mousemove', moveDrag);
document.addEventListener('touchmove', moveDrag, { passive: false });
document.addEventListener('mouseup', endDrag);
document.addEventListener('touchend', endDrag);
document.addEventListener('mouseleave', endDrag);
}
function moveDrag(event) {
if (draggedPointIndex === -1) return;
event.preventDefault();
// Mouse- oder Touch-Position ermitteln
const clientX = event.clientX || (event.touches && event.touches[0].clientX);
const clientY = event.clientY || (event.touches && event.touches[0].clientY);
if (clientX === undefined || clientY === undefined) return;
// Position relativ zum SVG berechnen
const svgRect = svg.getBoundingClientRect();
const x = clientX - svgRect.left;
const y = clientY - svgRect.top;
// Punkt aktualisieren
points[draggedPointIndex].x = x;
points[draggedPointIndex].y = y;
// Basisposition für die Animation aktualisieren
CONFIG.baseYPositions[draggedPointIndex] = y;
// SVG aktualisieren
updateVisualization();
}
function endDrag() {
if (draggedPointIndex === -1) return;
// Cursor zurücksetzen
pointElements[draggedPointIndex].setAttribute('cursor', 'grab');
// Variablen zurücksetzen
draggedPointIndex = -1;
// Event-Listener entfernen
document.removeEventListener('mousemove', moveDrag);
document.removeEventListener('touchmove', moveDrag);
document.removeEventListener('mouseup', endDrag);
document.removeEventListener('touchend', endDrag);
document.removeEventListener('mouseleave', endDrag);
// Animation fortsetzen, wenn gewünscht
if (CONFIG.animationEnabled) {
isAnimating = true;
startWaveAnimation();
}
}
// Pfade aktualisieren oder erstellen
function updateOrCreatePath(existingPath, points, normals, offsetDistance, className) {
const d = generateOffsetSplinePath(points, normals, offsetDistance);
if (existingPath) {
existingPath.setAttribute('d', d);
return existingPath;
} else {
const path = createSVGElement('path', {
'class': className,
'stroke': 'url(#lineGradient)',
'd': d
});
svg.appendChild(path);
return path;
}
}
// Punkte aktualisieren
function updatePointsVisualization() {
points.forEach((p, i) => {
if (pointElements[i]) {
pointElements[i].setAttribute('cx', p.x);
pointElements[i].setAttribute('cy', p.y);
}
});
}
// Hauptfunktion zur Visualisierung
function updateVisualization() {
// Zeit- und Animations-Faktoren berechnen
const time = Date.now() / 1000;
const waveOffset1 = Math.sin(time * 1.2) * 1.5;
const waveOffset2 = Math.sin(time * 0.8 + 1) * 2;
// Normalen nur einmal berechnen
const normals = calculateNormals(points);
const { offsetNear, offsetFar } = CONFIG;
// Alle Pfade aktualisieren
const pathUpdates = [
{ key: 'farBg2', offset: (-offsetFar * 1.5) + waveOffset2, className: 'offset-spline-far-2' },
{ key: 'farBg1', offset: (-offsetFar * 1.35) + waveOffset2, className: 'offset-spline-far' },
{ key: 'nearBg', offset: (-offsetNear * 1.2) + waveOffset1, className: 'offset-spline' },
{ key: 'main', offset: 0, className: 'line' },
{ key: 'nearFg', offset: (offsetNear * 1.2) + waveOffset1, className: 'offset-spline' },
{ key: 'farFg1', offset: (offsetFar * 1.35) + waveOffset2, className: 'offset-spline-far' },
{ key: 'farFg2', offset: (offsetFar * 1.5) + waveOffset2, className: 'offset-spline-far-2' }
];
// Pfade aktualisieren
pathUpdates.forEach(({ key, offset, className }) => {
pathElements[key] = updateOrCreatePath(
pathElements[key], points, normals, offset, className
);
});
// Punkte aktualisieren
updatePointsVisualization();
// Alle Punktelemente nach vorne bringen
pointElements.forEach(p => svg.appendChild(p));
}
function startWaveAnimation() {
// Animation beenden, falls bereits vorhanden
if (currentAnimation) {
currentAnimation.pause();
}
// Initiale Animation erstellen
currentAnimation = anime({
targets: points,
y: function(p, i) {
return CONFIG.baseYPositions[i];
},
duration: CONFIG.initialAnimDuration,
direction: 'alternate',
loop: true,
easing: 'easeInOutSine',
delay: anime.stagger(100),
update: updateVisualization,
complete: startContinuousAnimation
});
}
function startContinuousAnimation() {
currentAnimation = anime({
targets: points,
y: function(p, i) {
const baseY = CONFIG.baseYPositions[i];
const amplitude = CONFIG.waveAmplitude;
return function() {
return baseY + amplitude * Math.sin((Date.now()/1000) * Math.PI + i * 0.8);
};
},
duration: CONFIG.contAnimDuration,
autoplay: true,
easing: 'linear',
loop: true,
update: function() {
requestAnimationFrame(updateVisualization);
}
});
}
// Steuerelemente hinzufügen
function addControls() {
const controlPanel = document.createElement('div');
controlPanel.style.marginTop = '20px';
const toggleButton = document.createElement('button');
toggleButton.textContent = 'Animation pausieren';
toggleButton.addEventListener('click', function() {
if (currentAnimation && currentAnimation.paused) {
currentAnimation.play();
this.textContent = 'Animation pausieren';
} else if (currentAnimation) {
currentAnimation.pause();
this.textContent = 'Animation fortsetzen';
}
});
const resetButton = document.createElement('button');
resetButton.textContent = 'Zurücksetzen';
resetButton.style.marginLeft = '10px';
resetButton.addEventListener('click', resetAnimation);
controlPanel.appendChild(toggleButton);
controlPanel.appendChild(resetButton);
document.body.appendChild(controlPanel);
}
function resetAnimation() {
// Originale Basispositionen wiederherstellen
CONFIG.baseYPositions = [100, 70, 110, 80, 130, 90, 100];
// X-Positionen zurücksetzen
const xStep = 580 / (CONFIG.baseYPositions.length - 1);
points.forEach((p, i) => {
p.x = 20 + i * xStep;
p.y = CONFIG.baseYPositions[i];
});
// Visualisierung aktualisieren
updateVisualization();
// Animation neu starten
if (CONFIG.animationEnabled) {
isAnimating = true;
startWaveAnimation();
}
}
</script>
</body>
</html>

635
test/anime-points-fine.html Normal file
View file

@ -0,0 +1,635 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welle Hintergrund (SVG)</title>
<style type="text/css">
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: sans-serif;
}
h1 {
margin-bottom: 30px;
}
svg {
border: 1px solid #ccc; /* Optional: Rahmen zur Visualisierung */
overflow: visible; /* Damit Punkte am Rand nicht abgeschnitten werden */
}
.point {
fill: #000000; /* Farbe der Punkte */
opacity: 0.8; /* Punkte sichtbar machen */
r: 3.5; /* Einheitliche Punktgröße */
}
.line {
fill: none; /* Keine Füllung für die Linie */
stroke-width: 2; /* Dickere Hauptlinie */
}
.offset-spline {
fill: none;
stroke-width: 1; /* Dickere mittlere Linien */
stroke-opacity: 0.6; /* Angepasste Transparenz */
transition: stroke-opacity 0.3s ease;
}
.offset-spline-far {
fill: none;
stroke-width: 1; /* Etwas dickere äußere Linien */
stroke-opacity: 0.4; /* Höhere Transparenz */
transition: stroke-opacity 0.3s ease;
}
.offset-spline-far-2 {
fill: none;
stroke-width: 1; /* Etwas dickere äußere Linien */
stroke-opacity: 0.2; /* Höhere Transparenz */
transition: stroke-opacity 0.3s ease;
}
/* Steuerelemente für die Slider */
.controls {
margin-top: 20px;
padding: 15px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
width: 600px;
max-width: 100%;
}
.control-group {
margin-bottom: 15px;
}
.control-row {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.control-label {
width: 140px;
font-weight: bold;
}
.control-slider {
flex-grow: 1;
margin: 0 10px;
}
.control-value {
width: 50px;
text-align: right;
}
input[type="range"] {
width: 100%;
}
input[type="number"] {
width: 60px;
text-align: center;
}
.control-header {
font-weight: bold;
margin-bottom: 10px;
color: #333;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Welleneffekt (SVG)</h1>
<svg width="600" height="200" id="point-canvas">
<defs>
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(226, 245, 172);stop-opacity:1" />
<stop offset="35%" style="stop-color:rgb(135, 241, 36);stop-opacity:1" />
<stop offset="70%" style="stop-color:rgb(62, 200, 232);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(4, 162, 254);stop-opacity:1" />
</linearGradient>
</defs>
<!-- Punkte und Linie werden hier per JavaScript hinzugefügt -->
</svg>
<!-- Steuerelemente hinzufügen -->
<div class="controls">
<div class="control-header">Wellenanimation einstellen</div>
<div class="control-group">
<div class="control-row">
<div class="control-label">Zeitfaktor:</div>
<input type="range" id="time-factor" class="control-slider" min="0.2" max="3.0" step="0.1" value="1.0">
<div class="control-value"><span id="time-factor-value">1.0</span></div>
</div>
<div class="control-row">
<div class="control-label">Amplitude:</div>
<input type="range" id="amplitude-factor" class="control-slider" min="0.2" max="3.0" step="0.1" value="1.0">
<div class="control-value"><span id="amplitude-factor-value">1.0</span></div>
</div>
<div class="control-row">
<div class="control-label">Turbulenz:</div>
<input type="range" id="turbulence" class="control-slider" min="0" max="3" step="0.1" value="0.5">
<div class="control-value"><span id="turbulence-value">0.5</span></div>
</div>
<div class="control-row">
<div class="control-label">Geschwindigkeit:</div>
<input type="range" id="animation-speed" class="control-slider" min="0.2" max="10.0" step="0.1" value="1.0">
<div class="control-value"><span id="animation-speed-value">1.0</span></div>
</div>
</div>
<div class="control-header">Linieneinstellungen</div>
<div class="control-group">
<div class="control-row">
<div class="control-label">Linienanzahl:</div>
<input type="range" id="total-lines" class="control-slider" min="4" max="24" step="1" value="12">
<div class="control-value"><span id="total-lines-value">12</span></div>
</div>
<div class="control-row">
<div class="control-label">Linienabstand:</div>
<input type="range" id="line-offset" class="control-slider" min="5" max="30" step="1" value="12">
<div class="control-value"><span id="line-offset-value">12</span></div>
</div>
<div class="control-row">
<div class="control-label">Linienspannung:</div>
<input type="range" id="tension" class="control-slider" min="0.5" max="5.0" step="0.1" value="1.5">
<div class="control-value"><span id="tension-value">1.5</span></div>
</div>
</div>
<button id="reset-button">Zurücksetzen</button>
</div>
<!-- Anime.js wird vorerst nicht benötigt, kann aber später wieder eingebunden werden -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
// Konstanten und Konfigurationen
const svg = document.getElementById('point-canvas');
const svgNS = "http://www.w3.org/2000/svg";
let TENSION = 1.5;
const MIN_OFFSET_FACTOR = 0.2;
const OFFSET_NEAR = 5;
let OFFSET_FAR = 12;
let TOTAL_LINES = 12; // Mehr Linien für ein dichteres Aussehen
// Neue Variable für Animationsgeschwindigkeit
let animationSpeed = 1.0;
// Variablen für die Animation
let currentAnimation = null;
let continuousAnimation = null;
// DOM-Elemente für Steuerelemente
const timeFactorSlider = document.getElementById('time-factor');
const timeFactorValue = document.getElementById('time-factor-value');
const amplitudeFactorSlider = document.getElementById('amplitude-factor');
const amplitudeFactorValue = document.getElementById('amplitude-factor-value');
const turbulenceSlider = document.getElementById('turbulence');
const turbulenceValue = document.getElementById('turbulence-value');
const totalLinesSlider = document.getElementById('total-lines');
const totalLinesValue = document.getElementById('total-lines-value');
const lineOffsetSlider = document.getElementById('line-offset');
const lineOffsetValue = document.getElementById('line-offset-value');
const tensionSlider = document.getElementById('tension');
const tensionValue = document.getElementById('tension-value');
const animationSpeedSlider = document.getElementById('animation-speed');
const animationSpeedValue = document.getElementById('animation-speed-value');
const resetButton = document.getElementById('reset-button');
// Mouse-tracking Variablen
let isMouseOver = false;
let mouseX = 0;
let mouseY = 0;
// Dynamische Faktoren
let timeFactor = 1.0;
let amplitudeFactor = 1.0;
let turbulence = 0.5;
// Basispunkte definieren
const points = [
{ x: 20, y: 100 },
{ x: 150, y: 60 },
{ x: 300, y: 140 },
{ x: 450, y: 60 },
{ x: 580, y: 100 }
];
// Speichern der DOM-Elemente für Punkte
let pointElements = [];
// Container für Pfad-Referenzen
const pathElements = {};
// Berechnet Normalen für alle Punkte
function calculateNormals(points) {
const normals = [];
for (let i = 0; i < points.length; i++) {
const p0 = i > 0 ? points[i - 1] : points[i];
const p1 = points[i];
const p2 = i < points.length - 1 ? points[i + 1] : points[i];
let dx = p2.x - p0.x;
let dy = p2.y - p0.y;
// Tangente an Endpunkten approximieren
if (i === 0) {
dx = points[1].x - points[0].x;
dy = points[1].y - points[0].y;
} else if (i === points.length - 1) {
dx = points[i].x - points[i-1].x;
dy = points[i].y - points[i-1].y;
}
const length = Math.sqrt(dx * dx + dy * dy);
let normalX = 0, normalY = 0;
if (length > 0) {
normalX = -dy / length;
normalY = dx / length;
}
normals.push({ x: normalX, y: normalY });
}
return normals;
}
// Erzeugt Pfad mit variablem Offset
function generateOffsetSplinePath(originalPoints, normals, offsetDistance) {
if (originalPoints.length < 2) return "";
// Startpunkt des Offset-Pfades
const startNormal = normals[0];
const startOffsetX = originalPoints[0].x + startNormal.x * offsetDistance * MIN_OFFSET_FACTOR;
const startOffsetY = originalPoints[0].y + startNormal.y * offsetDistance * MIN_OFFSET_FACTOR;
let d = `M ${startOffsetX} ${startOffsetY}`;
for (let i = 0; i < originalPoints.length - 1; i++) {
const p0 = i > 0 ? originalPoints[i - 1] : originalPoints[0];
const p1 = originalPoints[i];
const p2 = originalPoints[i + 1];
const p3 = i < originalPoints.length - 2 ? originalPoints[i + 2] : originalPoints[originalPoints.length - 1];
// Originale Kontrollpunkte berechnen
const cp1x = p1.x + (p2.x - p0.x) / 6 * TENSION;
const cp1y = p1.y + (p2.y - p0.y) / 6 * TENSION;
const cp2x = p2.x - (p3.x - p1.x) / 6 * TENSION;
const cp2y = p2.y - (p3.y - p1.y) / 6 * TENSION;
// Normalen an den relevanten Punkten
const n1 = normals[i];
const n2 = normals[i+1];
// Offset-Kontrollpunkte und Endpunkt berechnen
const offsetCp1x = cp1x + n1.x * offsetDistance;
const offsetCp1y = cp1y + n1.y * offsetDistance;
const offsetCp2x = cp2x + n2.x * offsetDistance;
const offsetCp2y = cp2y + n2.y * offsetDistance;
const offsetP2x = p2.x + n2.x * offsetDistance * MIN_OFFSET_FACTOR;
const offsetP2y = p2.y + n2.y * offsetDistance * MIN_OFFSET_FACTOR;
// Füge kubisches Bézier-Segment hinzu
d += ` C ${offsetCp1x} ${offsetCp1y}, ${offsetCp2x} ${offsetCp2y}, ${offsetP2x} ${offsetP2y}`;
}
return d;
}
// Erstellt oder aktualisiert einen Pfad
function updateOrCreatePath(existingPath, points, normals, offsetDistance, className) {
const d = generateOffsetSplinePath(points, normals, offsetDistance);
if (existingPath) {
existingPath.setAttribute('d', d);
return existingPath;
} else {
const path = document.createElementNS(svgNS, 'path');
path.setAttribute('class', className);
path.setAttribute('stroke', 'url(#lineGradient)');
path.setAttribute('d', d);
svg.appendChild(path);
return path;
}
}
// Erstellt SVG-Punktelemente
function createPoints(points) {
return points.map(p => {
const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('class', 'point');
circle.setAttribute('cx', p.x);
circle.setAttribute('cy', p.y);
circle.setAttribute('r', 3.5);
svg.appendChild(circle);
return circle;
});
}
// Aktualisiert Punktpositionen
function updatePointsVisualization(points, pointElements) {
points.forEach((p, i) => {
if (pointElements[i]) {
pointElements[i].setAttribute('cx', p.x);
pointElements[i].setAttribute('cy', p.y);
}
});
}
// Hauptaktualisierungsfunktion für die Animation
function updateVisualization() {
const normals = calculateNormals(points);
// Zeit-basierter Animationsfaktor für die Offset-Linien
const time = Date.now() / 1000;
// Füge turbulente Bewegung hinzu wenn Maus über SVG
const turbulenceFactor = true ?
turbulence * Math.sin(time * 3) :
turbulence * 0.3 * Math.sin(time * 1.5);
// Zeichne die Hauptlinie
pathElements.main = updateOrCreatePath(pathElements.main, points, normals, 0, 'line');
// Zeichne mehrere Offset-Linien in unterschiedlichen Abständen
for (let i = 1; i <= TOTAL_LINES; i++) {
// Berechne einen variablen Offset für jede Linie
const offsetFactor = i / TOTAL_LINES;
const maxOffset = OFFSET_FAR * 2.5;
// Verschiedene dynamische Wellenkomponenten
const primaryWave = Math.sin(time * timeFactor * 0.8 + i * 0.2) * 2 * amplitudeFactor;
const secondaryWave = Math.cos(time * timeFactor * 0.5 + i * 0.3) * 2 * amplitudeFactor;
const tertiaryWave = Math.sin(time * timeFactor * 1.2 + i * 0.15) * turbulenceFactor;
// Kombiniere alle Wellenkomponenten
const wavePhase1 = primaryWave + tertiaryWave;
const wavePhase2 = secondaryWave + tertiaryWave * 0.7;
// Positive Offsets (oberhalb der Hauptlinie)
const offsetPositive = maxOffset * offsetFactor + wavePhase1;
const className = offsetFactor < 0.3 ? 'offset-spline' :
offsetFactor < 0.6 ? 'offset-spline-far' : 'offset-spline-far-2';
// Speichere jede Linie mit einem eindeutigen Schlüssel
const keyPos = `line_pos_${i}`;
pathElements[keyPos] = updateOrCreatePath(
pathElements[keyPos],
points,
normals,
offsetPositive,
className
);
// Negative Offsets (unterhalb der Hauptlinie)
const offsetNegative = -maxOffset * offsetFactor + wavePhase2;
const keyNeg = `line_neg_${i}`;
pathElements[keyNeg] = updateOrCreatePath(
pathElements[keyNeg],
points,
normals,
offsetNegative,
className
);
}
// Aktualisiere Punkte
updatePointsVisualization(points, pointElements);
// Alle Punkteelemente nach vorne bringen
pointElements.forEach(p => svg.appendChild(p));
}
// Animation starten
function startAnimation() {
// Alle bestehenden Animationen stoppen
if (currentAnimation) anime.remove(currentAnimation);
if (continuousAnimation) anime.remove(continuousAnimation);
// Basis-Animation
currentAnimation = anime({
targets: points,
y: function(p, i) {
const baseY = [100, 60, 140, 60, 100][i];
return baseY;
},
duration: 100 / animationSpeed,
direction: 'alternate',
loop: true,
easing: 'easeInOutSine',
delay: anime.stagger(100 / animationSpeed),
update: updateVisualization,
complete: startContinuousAnimation
});
}
// Kontinuierliche wellenförmige Animation
function startContinuousAnimation() {
// Stoppen einer möglicherweise noch laufenden Animation
if (continuousAnimation) anime.remove(continuousAnimation);
continuousAnimation = anime({
targets: points,
y: function(p, i) {
const baseY = i % 2 === 0 ? 100 : i % 3 === 0 ? 60 : 140;
const amplitude = 20;
return function() {
// Komplexere Wellenbewegung mit mehreren Frequenzen und dynamischen Faktoren
const t = Date.now() / 1000 * animationSpeed; // Direkte Multiplikation der Zeit mit der Geschwindigkeit
// Berechne dynamische Amplitude basierend auf Position und Zeit
const dynamicAmplitude = amplitude * amplitudeFactor;
// Mehrere überlagerte Wellen mit dynamischen Faktoren
const wave1 = dynamicAmplitude * Math.sin(t * timeFactor * 0.8 + i * 0.7);
const wave2 = dynamicAmplitude/2 * Math.sin(t * timeFactor * 1.2 + i * 0.5);
const wave3 = dynamicAmplitude/4 * Math.sin(t * timeFactor * 2.1 + i * 0.3);
// Füge Mauseinfluss hinzu wenn Maus über dem SVG
let mouseEffect = 0;
if (isMouseOver) {
const dx = p.x - mouseX;
const distanceFactor = Math.max(0, 1 - Math.abs(dx) / 200);
mouseEffect = (mouseY - baseY) * distanceFactor * 0.3;
}
return baseY + wave1 + wave2 + wave3 + mouseEffect;
};
},
duration: (1000 / animationSpeed),
autoplay: true,
easing: 'linear',
loop: true,
update: function() {
requestAnimationFrame(updateVisualization);
}
});
}
// Event-Listener für Steuerelemente
function setupControlListeners() {
// Zeitfaktor
timeFactorSlider.addEventListener('input', function() {
timeFactor = parseFloat(this.value);
timeFactorValue.textContent = timeFactor.toFixed(1);
});
// Amplitudenfaktor
amplitudeFactorSlider.addEventListener('input', function() {
amplitudeFactor = parseFloat(this.value);
amplitudeFactorValue.textContent = amplitudeFactor.toFixed(1);
});
// Turbulenz
turbulenceSlider.addEventListener('input', function() {
turbulence = parseFloat(this.value);
turbulenceValue.textContent = turbulence.toFixed(1);
});
// Animationsgeschwindigkeit
animationSpeedSlider.addEventListener('input', function() {
const newSpeed = parseFloat(this.value);
// Nur aktualisieren, wenn sich der Wert tatsächlich ändert
if (newSpeed !== animationSpeed) {
animationSpeed = newSpeed;
animationSpeedValue.textContent = animationSpeed.toFixed(1);
// Animation komplett neu starten, um Geschwindigkeitsänderungen zu übernehmen
anime.remove(points);
if (currentAnimation) anime.remove(currentAnimation);
if (continuousAnimation) anime.remove(continuousAnimation);
startAnimation();
}
});
// Gesamtanzahl der Linien
totalLinesSlider.addEventListener('input', function() {
TOTAL_LINES = parseInt(this.value);
totalLinesValue.textContent = TOTAL_LINES;
// Bestehende Linien entfernen, die nicht mehr benötigt werden
for (let key in pathElements) {
if (key.startsWith('line_pos_') || key.startsWith('line_neg_')) {
const lineNum = parseInt(key.split('_').pop());
if (lineNum > TOTAL_LINES) {
if (pathElements[key].parentNode) {
pathElements[key].parentNode.removeChild(pathElements[key]);
}
delete pathElements[key];
}
}
}
});
// Linienabstand
lineOffsetSlider.addEventListener('input', function() {
OFFSET_FAR = parseInt(this.value);
lineOffsetValue.textContent = OFFSET_FAR;
});
// Linienspannung
tensionSlider.addEventListener('input', function() {
TENSION = parseFloat(this.value);
tensionValue.textContent = TENSION.toFixed(1);
});
// Zurücksetzen-Button
resetButton.addEventListener('click', function() {
// Standardwerte wiederherstellen
timeFactorSlider.value = 1.0;
amplitudeFactorSlider.value = 1.0;
turbulenceSlider.value = 0.5;
totalLinesSlider.value = 12;
lineOffsetSlider.value = 12;
tensionSlider.value = 1.5;
animationSpeedSlider.value = 1.0;
// UI-Werte aktualisieren
timeFactorValue.textContent = "1.0";
amplitudeFactorValue.textContent = "1.0";
turbulenceValue.textContent = "0.5";
totalLinesValue.textContent = "12";
lineOffsetValue.textContent = "12";
tensionValue.textContent = "1.5";
animationSpeedValue.textContent = "1.0";
// Variablen zurücksetzen
timeFactor = 1.0;
amplitudeFactor = 1.0;
turbulence = 0.5;
TOTAL_LINES = 12;
OFFSET_FAR = 12;
TENSION = 1.5;
animationSpeed = 1.0;
// Animation neu starten
anime.remove(points);
if (currentAnimation) anime.remove(currentAnimation);
if (continuousAnimation) anime.remove(continuousAnimation);
startAnimation();
});
// Mouse-Tracking für SVG
svg.addEventListener('mouseover', function() {
isMouseOver = true;
});
svg.addEventListener('mouseout', function() {
isMouseOver = false;
});
svg.addEventListener('mousemove', function(e) {
const rect = svg.getBoundingClientRect();
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
});
}
// Initialisierung
function init() {
pointElements = createPoints(points);
setupControlListeners();
updateVisualization();
startAnimation();
}
// Starte die Anwendung
init();
</script>
</body>
</html>

1060
test/anime-points.html Normal file
View file

File diff suppressed because it is too large Load diff

151
test/anime-wave.html Normal file
View file

@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animierte Welle</title>
<style>
body {
margin: 0;
font-family: sans-serif;
background-color: #ffffff; /* Weißer Hintergrund */
overflow: hidden; /* Verhindert Scrollbalken, falls Welle überläuft */
position: relative; /* Für absolute Positionierung des Textes */
min-height: 100vh; /* Mindesthöhe für Demo */
display: flex;
align-items: center; /* Zentriert den Inhalt vertikal */
justify-content: center; /* Zentriert den Inhalt horizontal */
}
.wave-container {
width: 100%;
position: absolute; /* Positioniert die Welle */
bottom: 0; /* Am unteren Rand */
left: 0;
line-height: 0; /* Entfernt zusätzlichen Leerraum unter dem SVG */
}
#waveSvg {
display: block; /* Entfernt zusätzlichen Leerraum */
width: 100%;
height: 250px; /* Höhe der Welle anpassen */
}
/* Optionaler Text */
.wave-text {
position: absolute;
top: 40%; /* Position anpassen */
left: 50%;
transform: translateX(-50%);
color: #555; /* Dunkelgrau */
font-size: 1.5em;
letter-spacing: 5px;
z-index: 10; /* Stellt sicher, dass der Text über der Welle liegt (falls sie höher ist) */
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<div class="wave-container">
<!-- SVG Container für die Welle -->
<svg id="waveSvg" viewBox="0 0 1440 300" preserveAspectRatio="none">
<defs>
<linearGradient id="waveGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgba(120, 255, 150, 0.7);" /> <!-- Helles Grün -->
<stop offset="40%" style="stop-color:rgba(0, 200, 230, 0.7);" /> <!-- Türkis/Cyan -->
<stop offset="100%" style="stop-color:rgba(0, 120, 220, 0.7);" /> <!-- Helles Blau -->
</linearGradient>
<!-- Zweiter Verlauf für eine weitere Ebene (leicht variiert) -->
<linearGradient id="waveGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgba(80, 230, 120, 0.5);" /> <!-- Etwas dunkleres Grün -->
<stop offset="50%" style="stop-color:rgba(0, 170, 210, 0.5);" />
<stop offset="100%" style="stop-color:rgba(0, 90, 190, 0.5);" /> <!-- Etwas dunkleres Blau -->
</linearGradient>
<!-- Dritter Verlauf für die feinen Linien (noch transparenter) -->
<linearGradient id="waveGradient3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgba(180, 255, 200, 0.3);" />
<stop offset="60%" style="stop-color:rgba(50, 200, 250, 0.3);" />
<stop offset="100%" style="stop-color:rgba(30, 130, 240, 0.3);" />
</linearGradient>
</defs>
<!-- Pfade für die Wellenformen -->
<!-- Diese 'd' Attributes definieren die Form. Wir werden sie animieren. -->
<!-- M = MoveTo, C = Cubic Bezier Curve, S = Smooth Cubic Bezier Curve, L = LineTo, Z = ClosePath -->
<!-- Die Koordinaten basieren auf der viewBox (0 0 1440 300) -->
<path id="wavePath1" d="M0,160 C360,80 720,240 1080,160 S1440,80 1440,160 L1440,300 L0,300 Z" fill="url(#waveGradient1)" />
<path id="wavePath2" d="M0,180 C360,100 720,260 1080,180 S1440,100 1440,180 L1440,300 L0,300 Z" fill="url(#waveGradient2)" />
<path id="wavePath3" d="M0,200 C360,120 720,280 1080,200 S1440,120 1440,200 L1440,300 L0,300 Z" fill="url(#waveGradient3)" />
</svg>
</div>
<!-- Text (optional, wie im Beispielbild) -->
<div class="wave-text">
WAVE BACKGROUND
</div>
<!-- Anime.js Bibliothek einbinden -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<!-- Unser eigenes JavaScript -->
<script>
// Warten bis das DOM vollständig geladen ist
document.addEventListener('DOMContentLoaded', function() {
// Definition der Start- und Endformen für die Animation (d-Attribute)
// Pfad 1
const path1_start = "M0,80 C150,150 350,0 500,80 S850,150 1000,50 L1000,200 L0,200 Z";
const path1_end = "M0,50 C150,0 350,150 500,80 S850,0 1000,80 L1000,200 L0,200 Z";
// Pfad 2 (leicht versetzt)
const path2_start = "M0,100 C180,180 380,30 500,100 S820,180 1000,70 L1000,200 L0,200 Z";
const path2_end = "M0,70 C180,30 380,180 500,100 S820,30 1000,100 L1000,200 L0,200 Z";
// Pfad 3 (nochmals leicht versetzt)
const path3_start = "M0,120 C200,200 400,50 500,120 S800,200 1000,90 L1000,200 L0,200 Z";
const path3_end = "M0,90 C200,50 400,200 500,120 S800,50 1000,120 L1000,200 L0,200 Z";
// Anime.js Animation für jeden Pfad
anime({
targets: '#wavePath1', // Ziel ist der Pfad mit ID wavePath1
d: [ // Animiere das 'd' Attribut
{ value: path1_start }, // Startform (optional, falls schon im HTML gesetzt)
{ value: path1_end } // Endform
],
duration: 4000, // Dauer der Animation in ms
easing: 'easeInOutSine', // Easing-Funktion für sanfte Bewegung
direction: 'alternate', // Animation läuft hin und zurück
loop: true // Animation wiederholt sich unendlich
});
anime({
targets: '#wavePath2',
d: [
{ value: path2_start },
{ value: path2_end }
],
duration: 3500, // Leicht andere Dauer für Asynchronität
delay: 150, // Kleiner Startversatz
easing: 'easeInOutSine',
direction: 'alternate',
loop: true
});
anime({
targets: '#wavePath3',
d: [
{ value: path3_start },
{ value: path3_end }
],
duration: 4500, // Nochmals andere Dauer
delay: 50, // Kleiner Startversatz
easing: 'easeInOutSine',
direction: 'alternate',
loop: true
});
});
</script>
</body>
</html>

91
test/anime.html Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anime.js Welle</title>
<style type="text/css">
body {
display: flex;
flex-direction: column; /* Damit H1 über der Welle steht */
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: sans-serif;
}
.wave-container {
display: flex; /* Elemente nebeneinander anordnen */
align-items: center; /* Vertikal zentrieren (Startposition) */
height: 100px; /* Höhe für die Wellenbewegung */
margin-top: 50px;
}
.wave-dot {
width: 10px; /* Breite des Punktes */
height: 10px; /* Höhe des Punktes */
margin: 0 2px; /* Kleiner Abstand zwischen Punkten */
background-color: #0077cc; /* Farbe der Punkte */
border-radius: 50%; /* Macht die Quadrate zu Kreisen (Punkten) */
/* Wichtig: transform-origin anpassen, falls nötig (hier nicht unbedingt) */
/* transform-origin: center bottom; */
}
</style>
</head>
<body>
<h1>Dynamische Welle mit Anime.js</h1>
<div
class="wave-container"><!-- Die Wellenpunkte werden per JavaScript hinzugefügt -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script type="text/javascript">
const container = document.querySelector('.wave-container');
const numberOfDots = 50;
// Anzahl der Punkte in der Welle
// --- Schritt 1: Wellenpunkte dynamisch erstellen ---
for (let i = 0; i < numberOfDots; i++) {
const dot = document.createElement('div');
dot.classList.add('wave-dot');
container.appendChild(dot);
}
// --- Schritt 2: Anime.js Animation definieren ---
anime({
targets: '.wave-dot', // Wähle alle Elemente mit der Klasse 'wave-dot'
translateY: [
{ // Animiere die vertikale Position
value: -30,
duration: 600
}, { // Bewege 30px nach oben (Dauer: 600ms)
value: 0,
duration: 600
} // Bewege zurück zur Ausgangsposition (Dauer: 600ms)
],
easing: 'easeInOutSine', // Sorgt für sanfte Beschleunigung/Verzögerung
loop: true, // Die Animation soll sich unendlich wiederholen
delay: anime.stagger(30)
// DER SCHLÜSSEL: Verzögert den Start der Animation
// für jedes Element um 30ms gegenüber dem vorherigen.
// Dies erzeugt den Welleneffekt!
});
/*
// Alternative Animation (kontinuierlicher auf/ab):
anime({
targets: '.wave-dot',
translateY: ['-25px', '25px'], // Oszilliert zwischen -25px und +25px
direction: 'alternate', // Kehrt die Richtung am Ende jeder Iteration um
loop: true,
duration: 800, // Dauer für eine halbe Oszillation (hoch ODER runter)
easing: 'easeInOutSine',
delay: anime.stagger(30) // Wellenverzögerung
});
*/
</script>
</body>
</html>

124
test/index.html Normal file
View file

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test-Übersicht</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}
header {
background-color: #2c3e50;
color: white;
padding: 1.5rem;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
margin: 0;
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
.test-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.test-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.test-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.test-card-header {
background-color: #3498db;
color: white;
padding: 1rem;
font-weight: bold;
}
.test-card-body {
padding: 1.5rem;
}
.test-card-body p {
margin: 0 0 1rem;
color: #666;
}
.test-link {
display: inline-block;
text-decoration: none;
color: #3498db;
font-weight: bold;
padding: 0.5rem 0;
border-bottom: 2px solid transparent;
transition: border-color 0.3s;
}
.test-link:hover {
border-color: #3498db;
}
</style>
</head>
<body>
<header>
<h1>Test-Übersicht</h1>
</header>
<div class="container">
<p>Testseite. Hier werden verfügbaren Tests angezeigt.</p>
<div class="test-grid">
<div class="test-card">
<div class="test-card-header">Animation!</div>
<div class="test-card-body">
<p>Ein Test für Animationen mit Controller und Anime.js Bibliothek.</p>
<a href="anime-points-animation.html" class="test-link">Animierte Welle anzeigen</a>
</div>
</div>
<div class="test-card">
<div class="test-card-header">Animation</div>
<div class="test-card-body">
<p>Ein Test einer Background Welle mit Anime.js Bibliothek.</p>
<a href="anime-wave.html" class="test-link">Welle anzeigen</a>
</div>
</div>
<!-- Platzhalter für weitere Testdateien -->
<div class="test-card">
<div class="test-card-header">Anime.js Punkte</div>
<div class="test-card-body">
<p>Ein Test für bewegliche Punkte mit Anime.js Bibliothek.</p>
<a href="anime-points-drag.html" class="test-link">bewegliche Punkte anzeigen</a>
</div>
</div>
</div>
</div>
</body>
</html>