径向动画因台式机和移动设备而异

Question

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

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

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

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

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

<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 的cmets 并找到了这个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 设备可以进一步测试。我希望这可以帮助下一个遇到这个问题的人，Happy Coding！