Question

我有一些代码，其中有效：

forward = 1;
rate = forward - remaining / duration;

但这不起作用：

forward = 1;
if (forward == 1) {
    rate = forward - remaining / duration
}

为什么不呢？

由于SE希望阻止我发布完整的代码，因为那时我的“帖子主要是代码”，好吧，我想我需要添加一些bla bla - 这只会让你感到困惑和贬低，但希望能够允许我在下面发布完整的代码。

完整的工作代码：

    <!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>

Answer 1

我认为你有一些语法错误：

 var current = Date.now(),
                        remaining = end - current,
                        rate;

而不是

 var current = Date.now(),
                        remaining = end - current,

看到这个小提琴：http://jsfiddle.net/pmxffvp8

变量不在if条件中验证

1 个答案: