ich einen Code haben, wo dies funktioniert:Variable nicht überprüft in if-Bedingung
forward = 1;
rate = forward - remaining/duration;
aber das funktioniert nicht:
forward = 1;
if (forward == 1) {
rate = forward - remaining/duration
}
Warum wäre es nicht?
Da SE will mich halten von den vollständigen Code zu veröffentlichen, weil dann meine „post meist Code ist“, na ja, ich glaube, ich brauche etwas bla bla hinzuzufügen -, die nur verwirren und ablenken Sie, aber Das wird mir hoffentlich erlauben, den kompletten Code hier unten zu posten.
Komplette Arbeitscode:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>1 Minute</title>
<style type="text/css">
svg {
display: block;
width: 250px;
height: 250px;
position: absolute;
top: 20px;
right: 20px;
}
#timer {
fill: #bd4;
}
</style>
</head>
<body>
<svg viewbox="0 0 250 250">
<path id="timer" transform="translate(125,125)"/>
</svg>
<script>
"use strict";
var cancel = false;
/* http://cdn.rawgit.com/darius/requestAnimationFrame/master/requestAnimationFrame.min.js */
/* https://github.com/darius/requestAnimationFrame */
if(!Date.now)Date.now=function(){return(new Date).getTime()};(function(){var n=["webkit","moz"];for(var e=0;e<n.length&&!window.requestAnimationFrame;++e){var i=n[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"];window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}})();
/*! SVG Pie Timer 0.9.1 | Anders Grimsrud, grint.no | MIT License */
/* https://github.com/agrimsrud/svgPieTimer.js */
;(function(w) {
'use strict';
// Date.now fix by Ari Fuchs, afuchs.tumblr.com/post/23550124774/date-now-in-ie8
Date.now = Date.now || function() { return +new Date };
// Draw SVG path
function draw(element, rate) {
var count = element.length,
angle = 360 * rate;
angle %= 360;
var rad = (angle * Math.PI/180),
x = Math.sin(rad) * 125,
y = Math.cos(rad) * - 125,
mid = (angle > 180) ? 1 : 0,
shape = 'M 0 0 v -125 A 125 125 1 '
+ mid + ' 1 '
+ x + ' '
+ y + ' z';
// If array of elements, draw each one
if(element instanceof Array)
while(count--)
element[count].setAttribute('d', shape)
else
element.setAttribute('d', shape)
}
// Prepare timer
// Define in global scope
w.svgPieTimer = function(props) {
var element = props.element,
duration = props.duration || 1000,
forward = props.forward;
// Optional warning
if(!element) throw "SVG Pie Timer: Error - element required"
// This part might be confusing:
// If n==0, do infinite loops
// In other cases where n is set, do n loops
// If n is not set, do 1 loop
// Do it this way to prevent mixing n==0 and !n
var end = Date.now() + duration;
// Animate frame by frame
(function frame() {
var current = Date.now(),
remaining = end - current,
// Now set rotation rate
// E.g. 50% of first loop returns 1.5
// E.g. 75% of sixth loop returns 6.75
// Has to return >0 for SVG to be drawn correctly
// If you need the current loop, use Math.floor(rate)
rate = forward - remaining/duration
// As requestAnimationFrame will draw whenever capable,
// the animation might end before it reaches 100%.
// Let's simulate completeness on the last visual
// frame of the loop, regardless of actual progress
if(remaining < 60) {
// 1.0 might break, set to slightly lower than 1
draw(element, 1 - 0.0001);
// Stop animating when the circle is full
if(remaining < duration) {
return
}
}
// Draw
draw(element, rate);
// Request next frame
if (cancel === false) {
requestAnimationFrame(frame); }
}());
}
})(window, undefined);
svgPieTimer({
// Element (Required) SVG sub element to animate. Accepts array.
element: [timer],
// Duration (Optional) In milliseconds. Defaults to 1000.
duration: 3000,
// 1 = clockwise ("growing"), 0 = counter-clockwise ("decreasing")
forward: 1
});
</script>
</body>
</html>
Funktioniert nicht? Was heißt das? Irgendein Fehler? Was ist der Fehler? –
Es ist wahrscheinlich, weil Sie die Forward Variable außerhalb der Schließung deklarieren? Und ersetzen Sie auch == mit === für mehr Strenge – KyleK
Was sehen Sie in der Konsole, wenn Sie 'console.log (" vorwärts: "+ vorwärts)' –