使用CSS制作Apple Watch刻度盘动画效果

查看演示 下载地址

十几天前，苹果公司2015年春季发布会上宣布开始出售Apple Watch时间级售价。Apple Watch是苹果公司的一项新产品，一经发布就引起了人们的广泛关注。在这篇文章中，我们将使用CSS3来实现Apple Watch界面中的刻度盘动画效果。如果看过Apple Watch的宣传页面，就会看到其中有一个红绿蓝三色形成一个圆形刻度盘动画的效果。下面是这个效果的截图：

径向进度条

Apple Watch的刻度盘动画有三部分组成。么一个部分都是一个圆曲线组成的进度条。制作这种圆曲线是一件困难的事情，我们可以通过两个组件和一些定时动画来完成它。

我们先从一个半圆形的动画开讲解。

下面是它的HTML代码：

<div class="dial-container">
    <div class="wedge">
    </div>
</div>                             
                            

我们通过border-radius属性将元素设置为半圆形，然后使用关键帧动画keyframe来使它动起来：

.wedge {
  animation: rotate 4s infinite linear;
  border-radius: 0 4em 4em 0;
  background: red;
  width: 2em;
  height: 4em;
  transform-origin: 0% 50%;
}
@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}                              
                            

遮罩效果

你可以使用CSS的clip属性来制作遮罩效果，但是我们不推荐，因为该属性的跨浏览器兼容性不好。我们可以简单的在容器上使用overflow: hidden属性来制作遮罩效果。

看下面的效果，这里有两个元素在做动画。.dial-container是.wedge的一半宽，它的overflow属性设置为hidden。将它放置在容器的外部，可以制作一种遮罩效果。

.dial-container {
    position: absolute;
    top: 0;
    left: 2em;
    width: 2em;
    height: 4em;
    overflow: hidden;
}                              
                            

要制作则个圆的旋转效果，我们可以在制作一个半圆形动画，与刚才的半圆形组合在一起组成一个完整的圆形的旋转动画。

有了这两个半圆形的旋转动画，我们就可以组成一个完整的圆形动画，但是要注意第二个半圆形开始动画的时间。

完整圆形动画

下面是一个完整圆形的HTML代码。

<div class="wrapper">
  <div class="dial-container container1">
    <div class="wedge"></div>
  </div>
  <div class="dial-container container2">
    <div class="wedge"></div>
  </div>
</div>                             
                            

两个半圆形被包裹在一个容器div.wrapper中。下面给它样式被使用关键帧动画是它们动起来。

.wrapper {
  position: absolute;
  width: 4em;
  height: 4em;
  left: calc(50% - 2em);
}
.dial-container {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  width: 2em;
}
.wedge {
  background: red;
  height: 4em;
  width: 2em;
}
.container1 {
  left: 2em;
}
.container1 .wedge {
  animation: rotate-bg-1 4s infinite linear;
  border-radius: 0 4em 4em 0;
  left: 0;
  transform-origin: 0 50%;
}
.container2 {
  left: 0;
}
.container2 .wedge {
  animation: rotate-bg-2 4s infinite linear;
  border-radius: 4em 0 0 4em;
  transform-origin: 2em 2em;
}
/* First animation moves 180 degrees in the first 2 seconds */
@keyframes rotate-bg-1 {
  50%, 100% {
    transform: rotateZ(180deg);
  }
}
/* Second animation moves 180 degrees in the last 2 seconds */
@keyframes rotate-bg-2 {
  0%, 50% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(180deg);
  }
}                             
                            

整个圆形旋转的动画效果如下：

进度条效果

接下来我们要在上面的基础上将它制作成圆形进度条的效果。我们可以在圆形的中间添加一个圆形的伪元素，修改伪元素的颜色和背景颜色一样，这样就可以造成一种一个圆形被挖空中间的效果。

<div class="wrapper">
  <div class="dial-container container1">
    <div class="wedge"></div>
  </div>
  <div class="dial-container container2">
    <div class="wedge"></div>
  </div>
</div>                              
                            

.wrapper::after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
}                               
                            

下面是完成的进度条效果，已经和Apple Watch刻度盘有一点相像了。

起点和终点的圆角效果

仔细看Apple Watch的刻度盘动画，它的每个圆形进度条的开始和结束处是圆形的。为了制作这个效果，我们在圆形进度条的起点和终点处分别添加一个元素，并使起点处的元素按照进度条的方向和轨迹运动起来。HTML代码如下：

<div class="wrapper">
  <div class="dial-container container1">
    <div class="wedge"></div>
  </div>
  <div class="dial-container container2">
    <div class="wedge"></div>
  </div>
  <div class="marker start"></div>
  <div class="marker end"></div>
</div>                              
                            

start元素是起点位置，end元素是终点元素。end元素炫耀按照圆形进度条的轨迹进行动画，我们对它添加关键帧动画：

.marker {
  background: green;
  border-radius: 50%;
  height: 0.5em;
  width: 0.5em;
  position: absolute;
  top: 0;
  left: calc(50% - 0.25em);
}
.end {
  animation: rotate-marker 4s infinite linear;
  transform-origin: 50% 2em;
}
@keyframes rotate-marker {
  100% {
    transform: rotateZ(360deg);
  }
}                              
                            

为了让你看清楚整个动画过程，起点和终点的两个圆形di设置了绿色，并位于圆形进度条的中间。end元素通过rotate-marker关键帧动画进行运动，它的transform-origin被设置在容器的中心位置。这样，它就可以绕着圆形进行圆周运动。

现在，我们可以将起点和终点的圆形div的颜色修改为红色，使它们和圆形进度条融合在一起，这时，圆形进度条的首位就是圆角的了。另外，为了效果更好，我们可以添加一些贝兹曲线效果。

完整的Apple Watch刻度盘效果

完整的Apple Watch刻度盘效果有三个不同半径的圆形进度条组成，每一个圆形进度条的制作原理都是一样的。点击下面的链接查看完整的DEMO。

查看演示 下载地址