现代 CSS

苹果表动画

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

随着苹果表的大量生产,我想,用CSS来实现拨号动画的时候到了。

在这篇文章中,我们将使用keyframe动画和一点小技巧来实现苹果标表盘进度条动画。

Demo

这是最重效果如下:

拨号进度条

表的动画是由3个线条构成的,每个都是进度条。进度条两边带有圆角。我们将使用一点小技巧来实现。

拨号进度条

我们先来画半个圆。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);
  }
}

遮罩

按照往常的做法,我可能会使用CSS3的clip属性。但是由于浏览器内核兼容性问题,我决定还是放弃。这里,我们简单使用overflow:hidden就够了。

这里使用了两个元素,dial-container的宽度只有wedge的一半,而且它设置了overflowhidden,容器的位置在半圆的右边,并旋转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设置成容器中点。

拨号进度条 拨号进度条

整合到一起

三个这样的进度条整合到一起,就生成苹果表的动画效果。酷吗?

本文根据@Donovan的《Apple Watch Dials》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处://cssanimation.rocks/watch/

返回顶部