|
[tr][td]
在这篇文章中，我们将使用CSS来实现Apple Watch界面中的刻度盘动画效果。如果看过Apple Watch的宣传页面，就会看到其中有一个红绿蓝三色形成一个圆形刻度盘动画的效果。 图片：111846cpach8vgpzxxvgx0.jpg  查看演示 下载：使用CSS制作APPLE WATCH刻度盘动画效果.zip 十几天前，苹果公司2015年春季发布会上宣布开始出售Apple Watch时间级售价。Apple Watch是苹果公司的一项新产品，一经发布就引起了人们的广泛关注。在这篇文章中，我们将使用CSS3来实现Apple Watch界面中的刻度盘动画效果。如果看过Apple Watch的宣传页面，就会看到其中有一个红绿蓝三色形成一个圆形刻度盘动画的效果。下面是这个效果的截图： 图片：111846cpach8vgpzxxvgx0.jpg 径向进度条 Apple Watch的刻度盘动画有三部分组成。么一个部分都是一个圆曲线组成的进度条。制作这种圆曲线是一件困难的事情，我们可以通过两个组件和一些定时动画来完成它。 我们先从一个半圆形的动画开讲解。 图片：111846cpach8vgpzxxvgx0.jpg 下面是它的HTML代码： [*] [*] [*] [*] 复制代码 我们通过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。将它放置在容器的外部，可以制作一种遮罩效果。 图片：111846cpach8vgpzxxvgx0.jpg [*].dial-container { [*] position: absolute; [*] top: 0; [*] left: 2em; [*] width: 2em; [*] height: 4em; [*] overflow: hidden; [*]} 复制代码 要制作则个圆的旋转效果，我们可以在制作一个半圆形动画，与刚才的半圆形组合在一起组成一个完整的圆形的旋转动画。 图片：111846cpach8vgpzxxvgx0.jpg 有了这两个半圆形的旋转动画，我们就可以组成一个完整的圆形动画，但是要注意第二个半圆形开始动画的时间。 完整圆形动画 下面是一个完整圆形的HTML代码。 [*] [*] [*] [*] [*] [*] [*] [*] 复制代码 两个半圆形被包裹在一个容器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); [*] } [*]} 复制代码 整个圆形旋转的动画效果如下： 图片：111846cpach8vgpzxxvgx0.jpg 进度条效果 接下来我们要在上面的基础上将它制作成圆形进度条的效果。我们可以在圆形的中间添加一个圆形的伪元素，修改伪元素的颜色和背景颜色一样，这样就可以造成一种一个圆形被挖空中间的效果。 [*] [*] [*] [*] [*] [*] [*] [*] 复制代码 [*].wrapper::after { [*] content: ""; [*] background: #fff; [*] border-radius: 50%; [*] width: 3em; [*] height: 3em; [*] position: absolute; [*] top: 0.5em; [*] left: 0.5em; [*]} 复制代码 下面是完成的进度条效果，已经和Apple Watch刻度盘有一点相像了。 图片：111846cpach8vgpzxxvgx0.jpg 起点和终点的圆角效果 仔细看Apple Watch的刻度盘动画，它的每个圆形进度条的开始和结束处是圆形的。为了制作这个效果，我们在圆形进度条的起点和终点处分别添加一个元素，并使起点处的元素按照进度条的方向和轨迹运动起来。HTML代码如下： [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] 复制代码 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被设置在容器的中心位置。这样，它就可以绕着圆形进行圆周运动。 图片：111846cpach8vgpzxxvgx0.jpg 现在，我们可以将起点和终点的圆形div的颜色修改为红色，使它们和圆形进度条融合在一起，这时，圆形进度条的首位就是圆角的了。另外，为了效果更好，我们可以添加一些贝兹曲线效果。 图片：111846cpach8vgpzxxvgx0.jpg 完整的APPLE WATCH刻度盘效果 完整的Apple Watch刻度盘效果有三个不同半径的圆形进度条组成，每一个圆形进度条的制作原理都是一样的。点击下面的链接查看完整的DEMO。 via:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503181542.html [/td][/tr] |
|
