From 8404037d15a1820566ab8e4b67a0f9152d8e2326 Mon Sep 17 00:00:00 2001
From: Malte Schmitz <schmitz@isp.uni-luebeck.de>
Date: Sat, 15 Feb 2020 22:58:08 +0100
Subject: [PATCH] Better controls for animation
---
hugo/layouts/shortcodes/animation.html | 46 +++++++++++++++++---------
1 file changed, 30 insertions(+), 16 deletions(-)
diff --git a/hugo/layouts/shortcodes/animation.html b/hugo/layouts/shortcodes/animation.html
index bfc343a..62eb1e3 100644
--- a/hugo/layouts/shortcodes/animation.html
+++ b/hugo/layouts/shortcodes/animation.html
@@ -1,4 +1,4 @@
-<svg viewbox="0 0 760 390" width="760" height="390" version="1.1" id="plot" class="img-fluid">
+<svg viewbox="0 0 760 390" width="760" height="390" version="1.1" id="plot" class="img-fluid w-100">
<defs>
<marker id="arrow" markerHeight="4" markerWidth="4" orient="auto-start-reverse" refX="5" refY="5" viewBox="0 0 10 10">
<path d="m0 0 10 5-10 5z"/>
@@ -251,13 +251,13 @@
</g>
<path d="m550.63 133.01 74.11 28.432c10.89 32.789-6.2603 43.051-31.462 46.843l-54.301-54.767z" fill="#ffd750" opacity="0" filter="url(#filter1948)" id="light"/>
<path d="m526.23 163.27-5.2487-21.988-69.356-42.625 10.48-17.052 69.356 42.625 21.988-5.2487 13.338 8.1972-27.22 44.289z" fill="url(#linearGradient1832)"/>
+ <foreignObject x="460" y="300" width="160" height="160">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ <button id="animationPlay" class="ml-2 btn btn-secondary animation-hide"><i class="fas fa-play"></i></button>
+ </div>
+ </foreignObject>
</svg>
-<p id="animationControls" class="animation-hide">
- <input type="range" id="animationSlider" min="0" max="5000" value="0" style="width:400px;margin-left:45px;vertical-align:-3px">
- <button id="animationPlay" class="ml-2 btn btn-secondary"><i class="fas fa-play"></i></button>
-</p>
-
<script>
var clipRect = SVG.adopt(plot.getElementById('clipRect'));
var light = SVG.adopt(plot.getElementById('light'));
@@ -269,17 +269,18 @@
var lineLed2 = SVG.adopt(plot.getElementById('lineLed2'));
var lineLed1 = SVG.adopt(plot.getElementById('lineLed1'));
+ var duration = 5000;
+ var moveTimeline = undefined;
+
function animate() {
+ moveTimeline = undefined;
var timeline = new SVG.Timeline();
timeline.persist(true);
- animationSlider.addEventListener("input", () => {
- timeline.time(animationSlider.value);
- });
clipRect
.width(0)
.timeline(timeline)
- .animate(5000, 0, 'absolute').ease('-').width(390);
+ .animate(duration, 0, 'absolute').ease('-').width(390);
linePhoto.opacity(1);
lineRef.opacity(1);
@@ -300,17 +301,30 @@
.animate(1, 3600, 'absolute').fill('#80ff80');
setTimeout(() => {
- animationControls.classList.add('animation-show');
- animationControls.classList.remove('animation-hide');
- animationSlider.value = 5000;
- }, 5000);
+ animationPlay.classList.add('animation-show');
+ animationPlay.classList.remove('animation-hide');
+ moveTimeline = timeline;
+ }, duration);
}
+ var point = plot.createSVGPoint();
+ plot.addEventListener("mousemove", (event) => {
+ if (!moveTimeline) {
+ return;
+ }
+ point.x = event.clientX;
+ point.y = event.clientY;
+ var cursor = point.matrixTransform(plot.getScreenCTM().inverse());
+ var x1 = 54;
+ var x2 = 431;
+ moveTimeline.time((cursor.x - x1) / (x2 - x1) * duration);
+ });
+
animate();
animationPlay.addEventListener("click", () => {
- animationControls.classList.add('animation-hide');
- animationControls.classList.remove('animation-show');
+ animationPlay.classList.add('animation-hide');
+ animationPlay.classList.remove('animation-show');
linePhoto.animate(200).opacity(0);
lineRef.animate(200).opacity(0);
lineLed1.animate(200).opacity(0);
--
GitLab