JavaScript 动画短笔画和长笔画

Question

大家好，我正在尝试使用 javascrit 和 raphael 为我的网站制作一个时钟。它工作完美，我只是想让它看起来更好。目前，我有 12 个破折号出现在数字中，例如 12 、 1 、 2 、 3 等。但是我想要在我得到的大破折号之间有 4 个额外的破折号。

示例：

但是我无法让小破折号出现。我试着用和我的大破折号一样的方式来做，但不幸的是没有运气。在这件事上的任何帮助都会很棒。

这是我试过的：

Answer 1

您可以将相同的路径围绕时钟中心以 6 度的块进行变换，在某些方面感觉更直观，但这取决于您喜欢使用什么...所以您可以做类似的事情以下，这仅取决于您是否介意在元素上进行变换，您可能更愿意避免这种情况。

这将绘制两组线。

for(i=0;i<60;i++){
  if( i % 5 != 0 ) {
    paper.path('M40,40L45,45').transform('r'+(i*360/60+45)+',100,100')
  } else {
    paper.path('M40,40L55,55').transform('r'+(i*360/12+45)+',100,100');
  }
}

jsfiddle

JavaScript 动画短笔画和长笔画

JavaScript animating short strokes and long strokes

javascript

html

raphael