javascript - 径向动画因桌面和移动设备而异

Question

我最近几天才开始使用 SVG，并为番茄钟应用程序构建了一个简单的径向动画。我发现动画的起点与我在桌面浏览器(0 度)上设置和看到的不同。下面我的 iPhone 6 在 Safari 中的屏幕截图显示了我所看到的(在 Chrome 和 Firefox 中也有相同的结果)。你可以亲眼看到这个here .

圆的初始起始路径为 90 度，因此我应用以下方法来获得所需的起始点:

<circle className={className} transform="rotate(-90, 50, 60)">

我花了一上午的时间搜索帖子，我真正发现的唯一与我所看到的相关的是这个答案底部的评论 here .我去看了规范并仔细阅读了它，但我不太明白我是否最好使用 path 绘制圆圈或评论中的半圆想法(我根本不理解)。现在我的理解是在移动浏览器中 <circle />被解释为初始起点与桌面浏览器不同(也许我错了，这是一个与操作系统相关的问题？)。

谁能解释一下如何解决这个问题？我不希望有人解决我的问题，只是朝着正确的方向轻推。在过去的两个小时里，我一直在阅读帖子和谷歌搜索，但没有运气，也没有更多地了解这个问题。预先感谢您的帮助。

<circle /> 的完整代码:

import PropTypes from 'prop-types'

import { styles } from '../../lib'

/**
 * @function Circle
 * @description renders <circle /> that is conditionally animated.
 *
 * @prop {String} className
 * @prop {Number} duration - desired length of timer formatted to seconds
 * @returns React Element
 */
 const Circle = ({ className, duration }) => (
  <circle className={className} transform="rotate(-90, 50, 60)">
    <style jsx>{`
      circle {
        cx: 50;
        cy: 60;
        fill: transparent;
        r: 35;
        stroke-width: 4;
      }
      .outer {
        stroke: ${styles.colors.highLight};
      }
      .overlay {
        stroke: none;
        stroke-dasharray: 219; /* NOTE: https://stackoverflow.com/a/33922201/6520579 */
        stroke-linecap: round;
      }
      .cooldownAnimation {
        animation: ${duration}s linear normal forwards cooldown;
        stroke: ${styles.colors.text};
      }
     .timerAnimation {
        -webkit-animation: ${duration}s linear normal forwards timer;
        animation: ${duration}s linear normal forwards timer;
        stroke: ${styles.colors.text};
      }
      @-webkit-keyframes timer {
        from {
          stroke-dashoffset: 219;
        }
        to {
          stroke-dashoffset: 0;
        }
      }
      @keyframes timer {
        from {
          stroke-dashoffset: 219;
        }
        to {
          stroke-dashoffset: 0;
        }
      }
      @-webkit-keyframes cooldown {
        from {
         stroke-dashoffset: 0;
        }
        to {
         stroke-dashoffset: 219;
        }
      }
      @keyframes cooldown {
        from {
         stroke-dashoffset: 0;
        }
        to {
         stroke-dashoffset: 219;
        }
      }
      @media (orientation: landscape) {
        circle {
          r: 50;
        }
        .overlay {
          stroke-dasharray: 314;
        }
        @-webkit-keyframes timer {
          from {
           stroke-dashoffset: 314;
          }
          to {
           stroke-dashoffset: 0;
          }
        }
        @keyframes timer {
          from {
            stroke-dashoffset: 314;
          }
          to {
            stroke-dashoffset: 0;
          }
        }
        @-webkit-keyframes cooldown {
          from {
            stroke-dashoffset: 0;
          }
          to {
            stroke-dashoffset: 314;
          }
        }
        @keyframes cooldown {
          from {
            stroke-dashoffset: 0;
          }
          to {
            stroke-dashoffset: 314;
          }
        }
       }
    `}</style>
   </circle>
)

Circle.propTypes = {
  className: PropTypes.string,
  duration: PropTypes.number
}

export default Circle

Answer 1

看来我已经解决了这个问题，它有两个方面:

1. 部分原因在于我编写 CSS 的方式。我通常在 Chrome 中工作，它不会对我所做的事情造成大惊小怪；然而，在查看 FireFox 开发工具并看到我的 <circle /> 之后并且笔画的动画甚至不可见我发现...

此代码无效:

circle {
  cx: 50; /* NOT VALID */
  cy: 60; /* NOT VALID */
  fill: transparent;
  r: 35;  /* NOT VALID */
  stroke-width: 4;
}

这些属性必须在元素上传递:

<circle
  className={className}
  cx="50"
  cy="60"
  r="35"
  transform="rotate(-90, 50, 60)"
>

1. 阅读此 article 的评论后并找到这个 pen我发现我不需要使用 stroke-dashoffset并且可以只使用 stroke-dasharray ;但不是速记:

速记方法:

.overlay {
  stroke: none;
  stroke-dasharray: 219; /* Set both length of stroke & gap to 219px */
  stroke-linecap: round;
}

手写法:

.overlay {
  stroke: none;
  stroke-dasharray: 0 219; /* Set stroke length to 0px & gap length to 219px */
  stroke-linecap: round;
}

现在在@keyframes我只需要切换到 stroke-dasharray并从无笔划长度移动到整个圆周的长度，反之亦然以进行反向动画。

@keyframes timer {
  from {
    stroke-dasharray: 0 219;
  }
  to {
    stroke-dasharray: 219 0;
  }
}

在执行此操作时，动画现在可以在我的 iPhone 6 和 iPad mini 4 上的 Chrome、FireFox 和 Safari 中正常运行。不幸的是，我没有非 Apple 设备可以进一步测试它。我希望这可以帮助下一个遇到这个问题的人，快乐编码!