使用CSS制作APPLE WATCH刻度盘动画效果

  • A+
所属分类:DIV+CSS

在这篇文章中,我们将使用CSS来实现Apple Watch界面中的刻度盘动画效果。如果看过Apple Watch的宣传页面,就会看到其中有一个红绿蓝三色形成一个圆形刻度盘动画的效果。

使用CSS制作APPLE WATCH刻度盘动画效果

查看演示

下载:使用CSS制作APPLE WATCH刻度盘动画效果.zip

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

使用CSS制作APPLE WATCH刻度盘动画效果

径向进度条

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

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

使用CSS制作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。将它放置在容器的外部,可以制作一种遮罩效果。

使用CSS制作APPLE WATCH刻度盘动画效果

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

复制代码

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

使用CSS制作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>   

复制代码

两个半圆形被包裹在一个容器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);
      }
    }              

复制代码

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

使用CSS制作APPLE WATCH刻度盘动画效果

进度条效果

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

    <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刻度盘有一点相像了。

使用CSS制作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被设置在容器的中心位置。这样,它就可以绕着圆形进行圆周运动。

使用CSS制作APPLE WATCH刻度盘动画效果

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

使用CSS制作APPLE WATCH刻度盘动画效果

完整的APPLE WATCH刻度盘效果

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

via:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503181542.html

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: