欢迎訪问我们的博客：http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/
随着苹果表的大量生产，我想。用CSS来实现拨号动画的时候到了。
在这篇文章中。我们将使用keyframe动画和一点小技巧来实现苹果标表盘进度条动画。
Demo
这是终于效果例如以下：
See the Pen Apple Watch Activity Dials CSS by Helkyle (@HelKyle) on CodePen.
拨号进度条
表的动画是由3个线条构成的。每一个都是进度条。进度条两边带有圆角。我们将使用一点小技巧来实现。
我们先来画半个圆。HTML代码例如以下：
<div class="dial-container">
<div class="wedge"></div>
</div>我们使用border-radius属性和keyframe来实现半月形状和旋转动画。
(图片为gif)
.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);
}
}遮罩
依照往常的做法，我可能会使用CSS3的clip属性。可是因为浏览器内核兼容性问题，我决定还是放弃。这里。我们简单使用overflow:hidden就够了。
这里使用了两个元素，dial-container的宽度仅仅有wedge的一半，并且它设置了overflow为hidden。容器的位置在半圆的右边，并旋转wedge。这样就出现了扇形效果。
.dial-container {
position: absolute;
top: 0;
left: 2em;
width: 2em;
height: 4em;
overflow: hidden;
}为了画完整个圆，我们须要创建第二个wedge和第二个container，放在左边。
整个圆
我使用了一个wrapper来给两个containers定位。
<div class="wrapper">
<div class="dial-container container1">
<div class="wedge"></div>
</div>
<div class="dial-container container2">
<div class="wedge"></div>
</div>
</div>并使用以下css来处理它们的位置关系。
.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);
}
}执行结果：
进度
下一步是让wedge变成进度条。我们能够使用伪类在中间画个圆圈遮盖掉。
<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;
} 如今看起来有点进度条的样子了。
边缘处理
苹果表动画看起来非常柔和还跟它的圆角有关。要创建这种圆角，在weget上用css属性时不行的。
只是我们能够使用点小技巧。
<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元素是两个多余的元素用来放在进度条的開始和结尾（这样就生成圆角了！
）
.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);
}
}上面的css把end圆设成绿色。
并把transform-origin设置成容器中点。
整合到一起
三个这种进度条整合到一起。就生成苹果表的动画效果。酷吗?
See the Pen Apple Watch Activity Dials CSS by Helkyle (@HelKyle) on CodePen.