β

WWDC 2015动画效果

W3CPlus 302 阅读
 

每年,苹果都会召开一次重大的会议。 WWDC (苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。

每一年的这个时候,他们都会制造出很多新创意,今年,我被一个用简单圆圈和形状制作出来的图标所惊艳,于是我决定用HTML和CSS来实现它。

WWDC 15邀请卡

苹果的图标通常都会使用颜色和形状的叠加,比如 iOS 7 Photos图标 。今年WWDC邀请函用了下面这货。

WWDC 15邀请卡

它由一些列层叠和半透明的形状构成,非常适合用HTML和CSS来实现。

HTML

设计这样一块负责的东西需要稍微分析一下。首先,我把它分解成各个部分。 大方向看它是由三种形状构成的,主要图形为8个大圆,我先把它们列出来:

<div class="large circle one"></div>
<div class="large circle two"></div>
<div class="large circle three"></div>
<div class="large circle four"></div>
<div class="large circle five"></div>
<div class="large circle six"></div>
<div class="large circle seven"></div>
<div class="large circle eight"></div>

这里我分割成几个类,这样做方便后面把 large , circle ,等类提取出来单独写,代码会整洁很多。

然后我们有八个小形状,处于大圆的上边,这些形状由4个圆形和4个方形构成,方形是由圆角的,我这样写HTML

<div class="small circle one"></div>
<div class="small squircle two"></div>
<div class="small circle three"></div>
<div class="small squircle four"></div>
<div class="small circle five"></div>
<div class="small squircle six"></div>
<div class="small circle seven"></div>
<div class="small squircle eight"></div>

我用了 circle , squircle 以及数字1到8来为各个 div 设置类名,这样做的好处是,后面为它们设置形状和颜色的时候很方便。

最后我们把两个大方形反倒logo中间。

<div class="large squircle one"></div>
<div class="large squircle two"></div>

同样,我用了 large squircle

Logo和内容

接下来我们给中间的方形增添点内容。

<div class="large squircle two">
  <div class="content">
    <svg viewBox="0 0 160 164" xmlns="http://www.w3.org/2000/svg">
   <g>
    <g id="svg_1">
     <path d="m127.805969,90.003128c0.224838,24.213104 21.241287,32.270615 21.474121,32.373459c-0.177704,0.56826 -3.358078,11.482742 -11.072464,22.756622c-6.668747,9.746841 -13.590027,19.457977 -24.493088,19.659103c-10.713348,0.197403 -14.158287,-6.353043 -26.406677,-6.353043c-12.24469,0 -16.072174,6.151901 -26.213551,6.550446c-10.52422,0.398254 -18.538303,-10.539917 -25.26247,-20.251053c-13.740021,-19.864456 -24.24024,-56.132286 -10.1411,-80.613663c7.004152,-12.157551 19.521101,-19.85622 33.10713,-20.053638c10.334515,-0.197132 20.089069,6.952717 26.406689,6.952717c6.313614,0 18.167473,-8.59832 30.628998,-7.335548c5.21682,0.217129 19.860519,2.1073 29.263641,15.871029c-0.75766,0.469692 -17.472931,10.200527 -17.291229,30.443592m-20.134499,-59.456692c5.587379,-6.7633 9.348007,-16.178439 8.322067,-25.546439c-8.053787,0.32369 -17.792625,5.36682 -23.569427,12.126399c-5.177124,5.985922 -9.711121,15.566772 -8.48777,24.749359c8.976891,0.69453 18.147476,-4.561718 23.73513,-11.329308"/>
    </g>
   </g>
  </svg>
  <h1>The epicenter of change.</h1>
  <p><strong>WWDC</strong>15</p>
</div>

这里我们用了一个SVG图片,还有邀请函的内容。邀请函的字体为 San Francisco 但是字体不是OSX标准的,所以这里我换成 Helvetica Neue Light

写圆和方块样式

我要做的第一件事是把 circle squircle 的样式写好。

.circle, .squircle {
  border-top: 0.1em solid rgba(255,255,255,0.4);
  height: 12.5em;
  position: absolute;
  width: 12.5em;
}

大部分形状是大得,所以这我把默认值设大了。每个元素的定位都是 absolute 并且有一个白的边框。边框可能不会跟邀请函的一模一样,但是可以给形状多点光泽。

接下来我们给大圆加上样式,设置 border-radius 50% ,并且使用 left , top 值设置位置。

.circle {
  border-radius: 50%;
  box-shadow: 0 1em 2em rgba(0,0,0,0.5);
  left: calc(50% - 6.25em);
  top: calc(50% - 12.5em);
  transform-origin: 50% 12.5em;
}

这个时候所有的圆都是在同一个位置上边。我们使用点小技巧,通过 transform-origin 的值来改变位置。默认的 transform-origin 值为( 50%,50% ),这里我们把值设为圆的底部,然后我们稍微旋转一下,形状就出来了。

wwdc15

让我们给每个圆添加CSS样式,仔细研究邀请函的图片,我们可以看到一个圆的位置在左下角。知道了这一点,我们就可以写出其他与圆圈的旋转角度。

.one {
  background: rgba(16, 63, 236, 0.75);
  transform: rotateZ(225deg);
}
.two {
  background: rgba(37, 172, 162, 0.75);
  transform: rotateZ(180deg);
}
.three {
  background: rgba(233, 124, 32, 0.75);
  transform: rotateZ(135deg);
}
.four {
  background: rgba(235, 67, 35, 0.75);
  transform: rotateZ(90deg);
}
.five {
  background: rgba(190, 28, 65, 0.75);
  transform: rotateZ(45deg);
}
.six {
  background: rgba(208, 57, 159, 0.75);
  transform: rotateZ(0);
}
.seven {
  background: rgba(150, 32, 198, 0.75);
  transform: rotateZ(-45deg);
}
.eight {
  background: rgba(95, 33, 203, 0.75);
  transform: rotateZ(-90deg);
}

每个块都有一个颜色,并且旋转一定角度。下面的动画动态展示了生成过程。

wwdc15

有了上面这些原型,我们给其他形状写样式。首先方形也可以看成有不同圆角的圆。

.squircle {
  border-radius: 25%;
}

当我们定位了圆以后,我们给了特定的旋转角度和颜色。高兴的是,相同的形状也可以使用相同的样式,我们写好小形状的样式。

.small {
  width: 4em;
  height: 4em;
  left: calc(50% - 2em);
  top: calc(50% - 15em);
  transform-origin: 50% 15em;
  box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}

我们把这些形状设得小一些,并且离中心更远的距离。并且使用跟上面相同的诡计。

小方块

小的方形角度错了,我们需要给它旋转 45deg

wwdc15

这里有两种方法可供选择,我们可以给每个方形加多一个额外的元素,并旋转,或者我们选择CSS中的伪类。两种方法都行,不过我更倾向于后者。

首先我们把背景颜色,边框,盒子阴影去掉。

.small.squircle {
  background: none;
  border: none;
  box-shadow: none;
}

我们使用 ::after 伪类来创建一个相同的方形,并旋转 45deg

.small.squircle::after {
  background: red;
  border-radius: 25%;
  box-shadow: -0.25em 0.25em 0.5em rgba(0,0,0,0.2);
  content: "";
  height: 100%;
  position: absolute;
  transform: rotateZ(-45deg);
  width: 100%;
}
.small.squircle.two::after {
  background: rgba(37, 172, 162, 0.75);
}
.small.squircle.four::after {
  background: rgba(235, 67, 35, 0.75);
}
.small.squircle.six::after {
  background: rgba(208, 57, 159, 0.75);
}
.small.squircle.eight::after {
  background: rgba(95, 33, 203, 0.75);
}

现在我们有了大圆和其他小形状了。

wwdc15

内容方块

两个大的方形包含所有内容,我们把他们定位到中间,并且给他们一个比较深的透明色。

.large.squircle {
  background: rgba(30, 7, 66, 0.65);
  border: none;
  height: 15em;
  left: calc(50% - 7.5em);
  position: absolute;
  top: calc(50% - 7.5em);
  transform: none;
  width: 15em;
}

我们可以旋转一下第一个大方形。

.large.squircle.one {
  transform: rotateZ(45deg);
}

wwdc15

添加动画

最初的邀请函是静态的,但是我们的网站叫做 CSS Animation Rocks 可不是浪得虚名。

我像把每个集合分开,为了做到这一点,我用 span 元素把它们分别包裹起来,后面就把动画应用到 span 元素上即可。

<span class="large-circles">
  <!-- Large Circles here ... -->
</span>
<span class="small-shapes">
  <!-- Small Shapes here... -->
</span>
  <!-- Squircles -->
<span class="content-squircle">
  <div class="large squircle one"></div>
</span>

我们先给 span 元素定位,防止他们溢出。

span {
  display: block;
  height: 20em;
  left: calc(50% - 10em);
  position: absolute;
  top: calc(50% - 10em);
  width: 20em;
}

每个 span 元素都定位到中点。

接下来我们把动画应用到每个span元素上面。

.large-circles {
  animation: spin 10s linear infinite;
}
.small-shapes {
  animation: spin 30s linear infinite;
}
.content-squircle {
  animation: spin 20s linear infinite;
}

我们使用了相同的 keyframes 但是改变了动画时间,分别为 10s , 20s , 30s 。于是他们一分钟后回到原来的位置

keyframes 如下所示

@keyframes spin {
% {
    transform: rotateZ(0);
  }
% {
    transform: rotateZ(360deg);
  }
}

开始位置旋转角度为 0 ,最终旋转角度 360deg

重用CSS

这是个有趣的实验,但是我觉得最大的收获是重用了CSS.旋转和小形状使用相同的CSS很方便。还有所有的 animation 用了同一个 keyframes 。这样有助于压缩CSS文件的大小,保证加载速度。

前缀

创建这个例子的时候,我用了 autoprefixer ,这样就不用每次写动画都要考虑浏览器内核了。

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

HelKyle

我是周晓楷,华南师范大学在校本科生,有轻微强迫症,拖延症,正在努力学习前端知识!微博@Helkyle。

如需转载,烦请注明出处: http://www.w3cplus.com/css3/wwdc15.html

 
作者:W3CPlus
原文地址:WWDC 2015动画效果, 感谢原作者分享。

发表评论