本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹。然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一些比较特别的动画。

太阳系最终的效果图如下:

  css3的animation是通过关键帧的形式做出来的,首先设定一个动画的运行时间,然后在这个时间轴上的若干位置处插入关键帧,浏览器根据关键帧设定的内容做过渡动画。animation常结合transform属性进行制作。以一个简单的例子说明,以一个div,让其从左到右运动,如下图左所未(没有动画请刷新下页面)

  先用css画出静态的图,然后再加动画的属性。整个工程完整的代码见这个Demo。html如下:

<div class='space'>
<div class='wheel'>
<span class='line'></span>
</div>
</div>

  在轮子wheel加一个动画的属性,

.wheel{
  animation: move 3s linear infinite;
}

  这个的意思是动画的名字是move,时间轴是3s,速度是匀速,播放次数无限。然后move的关键帧keyframes如下:

@keyframes move{
100%{
transform: translateX(350px);
}
}

  即播放到末尾的时候,向X轴右移350px。在0%的时候值0,100%的时候值为350px,时间为3s,还有一个速度曲线的属性,根据这些信息做过渡动画。如果指定速度为线性linear,则动画的过渡效果是匀速的,对于上面来说就是匀速右移。默认的速度曲线为ease,就是渐进和渐出,中间播放比较快。

  然后再给轮子添加一个滚动的效果rotate,用运行的距离除以轮子的周长得出需要滚动多少圈,即375 / (25 * 3.1415926 * 2) * 360 = 859.4度,也就是在这个区间向右移动的同时加上自转的效果,所以给transform添加多一个rotate的属性。

transform: translateX(350px) rotate(859.4deg);

  这样就可以了:

  这就是css3的animation动画,结合transform的大小、旋转、位移、斜切,通过两三行代码,便可做出很多有趣的效果。

接下来讨论太阳系的制作,跟上面不同的地方是行星是围绕着太阳转的,而轮子是围绕着自己的圆心转的,也就是说他们转的基点不同。可以看出,transform的基点默认是本身的中心center,所以我们要改变行星的进行转换的中心点transform-origin。完整的Demo。太阳系的html结构如下:

    <div class="galaxy">
<div class='sun'></div>
<div class='mercury'></div>
<div class='venus'></div>
<div class='earth'></div>
</div>

  太阳位于div galaxy的中间,让其它行星位于太阳的右边排成一条线。设置galaxy的width和height都为1300px。sun图片的大小为100px*100px,所以sun的left值和top值都为(1300 - 100) / 2 = 600px,这样sun就位于中间位置。设置水星mercury的left值为700px,top为625px,这样水星就位于太阳偏右的位置。然后再设置transform-origin:

transform-origin: -50px 25px;

  transform-origin的原点是作用的元素左上角位置,所以往左移(700 - 1300 / 2) = 50px,往下移60 / 2 = 30px(60为水星高度),水星转换的基点就变成了太阳的中心,在此基础上进行旋转:

animation: rotation 2.4s linear infinite;
@keyframes rotation{
to{
transform: rotate(1turn);
}
}

  注意这里改变了同义的属性,0%和100%分别换成from和to,360deg换成1turn。

  其它的行星,也按照这种方法进行设置,计算稍微繁琐。公转的周期以地球10s为基准,其它按比例换算。这样就可以做出一个太阳系公转的图,原理很简单,效果却很好。

  注意到行星运行的轨迹其实是椭圆形的,上面是用了正圆形。因此,下面讨论如何做一个椭圆的运行轨迹。查看完整的Demo。效果图如下:

  上面的椭圆在Y轴上被压扁了,可以考虑在Y轴上添加一个位移变换,原理如下图所示,首先将地球的初始位置放到椭圆和其短轴的交点处,然后transform-origin设置为半径为800px的圆心的位置,但运行时间为50%即到初始位置对面的时候,插入一个关键帧:做一个位移转换,向y轴负方向移动200px,这样就可以形成一个半椭圆的轨迹,到了100%的时候逐渐恢复为初始值0,跟前面的半椭圆相反,就可以完成一个完整的椭圆轨迹。

  需要在earth的外面包一层div,用来设置translateY的效果,因为这个效果的时间曲线需要设置为ease-in-out渐进渐出的效果,让椭圆运行起来更加的顺畅。html的结构如下:

<div class='planet'>
<div class='origin-circle'></div>
<div class='sun'></div>
<div class='track'></div>
<div class='moveY'>
<div class='earth'></div>
</div>
</div>

  给moveY添加一个translateY的动画,其它的一样。

.moveY{
  animation: moveY 2s ease-in-out infinite alternate; /* */
}
@keyframes moveY{
  to{
    transform: translateY(-200px);
  }
}

  注意这里将moveY的周期设置为旋转的一半,同时使用了一个transition-direction为alternate的属性,alternate意为交替,效果等同于

@keyframes moveY{
0%,100%{
transform: translateY(0px);
}
  50%{
    transform: translateY(-200px);
  }
}

  细心的读者会发现,这里的运行轨迹并不是严格的椭圆,旋转是匀速的,但是在y轴上的投影即在y轴上的速度是一条曲线,这条曲线理论上可以用贝赛尔曲线模拟出来,animation的速度参数改用cubic-bezier去模拟,ease-in-out等同于cubic-bezier(0.4,0,0.6,1)。通过一些数学换算理论上是可以模拟的,这里不再深入讨论。

  还可以继续优化,让地球自转,自转的方法,可以在地球的div外面再包多一个div,让公转的动画由外层的div实现,而自转由地球的div完成。读者可以自行尝试。

  接下来,讨论人人网、京东使用animation做动画的实例。

  打开人人网的公共主页,当鼠标放到四个图标上面和离开的时候会有波浪形的动画:

  这个动画研究下源代码,可以发现是用了一张长图,由很多张小图组成,每张小图就是这个动画的一帧。当鼠标hover时,添加一个active类,这个类的css里面使用animation,改变这张长图的translate位移,如下:

.active{
animation: movedown 500ms steps(12) forwards;
}
@keyframes moveup{
to{
background-position: 0 -1800px;
}
}

  上面设置动画的名称为movedown,播放时间500ms,forwars的意思是播放完成后,动画保持最后一帧的样式,相反的是backwards,和刚开始播放的时候一样,默认值是none,不会保持动画的样式。这个动画的重点在于steps,steps(12)的目的是设置播放12帧,这张长图用来播放hover动画是由12图小图组成的,对应12帧,因此每播放一帧,background-position的位置刚好指向下张小图的位置,这样就连成了一个连贯的逐帧动画。类似的动画可以见这个(来自jsfiddle),这个是实时的动画,老的浏览器可能会不支持。

 

  第二个案例是京东首页的时钟,下面是一个实时的demo:

 
 
 

  这个案例的技术手段是用了animation结合transform的rotate,跟上面的太阳系的技术手段一样,这里不再叙述,主要是位置的计算比较琐碎,源码可见这里

  上面的案例都是用了transform,下面使用clip-path做一些比较有趣的动画。关于clip-path的描述,可见笔者的另外一篇文章: 《使用css3新属性clip-path制作小图标》。这里简单作下说明,clip-path是用来裁剪的,如对一个div应用clip-path: circle(40% at 50% 50%)——裁剪的路径为一个圆,圆心在div的(50%, 50%)的位置,半径为40%,效果就是让这个div的可见区域为这个圆,圆外的像素浏览器都不会进行渲染。

  使用transform可以做一些位移、大小、旋转的动画,而使用clip-path能够做一些形状变化的动画。效果如下,当鼠标放上去的时候,从一个圆沿半径方向逐渐外扩直至显示完整的照片。右下图为实时演示,请尝试把鼠标放上去(请使用chrome/safari浏览器)

 

  html结构就是一张照片:

<img src="http://images2015.cnblogs.com/blog/818663/201510/818663-20151015222926741-365571868.png" alt=""/>

  css如下:

img{
clip-path: circle(40% at 50% 50%);
-webkit-clip-path: circle(40% at 50% 50%);
transition: all 400ms ease;
cursor: pointer;
}
img:hover{
clip-path: circle(75% at 50% 50%);
-webkit-clip-path: circle(75% at 50% 50%);
}

  这里使用了transition动画,常和hover结合使用做过渡动画。transition: all 400ms ease这句设置transition作用在该元素所有CSS属性上,你也改成clip-path,只作用在clip-path这个属性,过渡时间为400ms,使用ease渐入渐出的效果和animatio一样。当hover的时候,就过渡到 clip-path: circle(75% at 50% 50%),也就是显示的半径从40%到75%,hover结束时,再恢复成原先的40%,因此就有了上面的效果。当然clip-path还可以做很多有趣的变形动画,例如从四角变成五角,这里只是抛砖引玉,更多动画的效果读者可自行上网查找。

  最后,做个总结。这篇文章介绍了使用animation结合transform做动画的原理和语法,并且分析了几个关键的要点,包括transform的坐标轴、转换的原点,还有,可以通过嵌套几个动画做出复合的效果,接着展示了两个实际的生产案例,最后对transition和clip-path做了一个变形的动画。css3的动画效果不限于此,读者可上网搜索其它更有趣的案例。例如这个20 impressive css3 techniques libraries and examples

个人博客: http://yincheng.site/css3-animation

参考:

1. https://css-tricks.com/almanac/properties/a/animation/ css tricks上关于animation的介绍

2. https://css-tricks.com/almanac/properties/t/transition/ css tricks上关于transition的介绍

使用css3的动画模拟太阳系行星公转的更多相关文章

  1. CSS3实现3D地球自转行星公转

    截图效果:实际效果是动态的:地球自西向东自转,行星绕着地球公转,轨道也会转动 HTML页面代码: <!DOCTYPE html> <html lang="en"& ...

  2. three.js模拟实现太阳系行星体系

    概况如下: 1.SphereGeometry实现自转的太阳: 2.RingGeometry实现太阳系星系的公转轨道: 3.ImageUtils加载球体和各行星贴图: 4.canvas中createRa ...

  3. html+ccs3太阳系行星运转动画

    做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转. 效果静态图: 动画中包括:太阳及各行星,运行轨道,行星公转动画. 先画好草图,设计好大小和位置,根 ...

  4. html+ccs3太阳系行星运转动画之土星有个环,地球有颗小卫星

    在上一篇<html+ccs3太阳系行星运转动画>中实现了太阳系八大行星的基本运转动画. 太阳系又何止这些内容,为丰富一下动画,接下来增加“土星环”和“月球”来充盈太阳系动画. 下面是充盈后 ...

  5. JS+HTML5的Canvas画图模拟太阳系运转

    查看效果:http://hovertree.com/texiao/html5/9.htm 地球自传 http://hovertree.com/texiao/html5/8.htm 代码如下: < ...

  6. css3关键帧动画实现轮播效果

    实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...

  7. CSS3网页动画

    CSS3网页动画 概要:CSS3变形是一些效果的集合 如:平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform)他们可以分别操控元素发生平移.旋转.缩放.倾斜等变化. 网页中能够实现 ...

  8. 超酷!纯CSS3烧烤动画实现教程

    今天在老外的网站上看到一款很有创意的纯CSS3动画,是模拟烧烤活动的.款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真.另外一个有意思的是,这个CSS3烧 ...

  9. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

随机推荐

  1. [Oracle]TRIGGER

    题外话: Oracle 的使用. 以前客户方用的是SQL SERVER,一直在用SQL SERVER,感觉SQL SERVER的用户体验非常好. 不管是开发环境的界面布局到SQL 的写法上,感觉写起来 ...

  2. JavaScript中Array.prototype.sort()的详解

    摘抄来源:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort sor ...

  3. ECMAScript 6 之 let 和 const 命令

    1.let基本用法 1.1.声明变量 let声明的变量只在它所在的代码块有效. 1.2.不存在变量提升 var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined: let命令 ...

  4. linux进程管理和系统状态常用命令简介

    1 进程管理简介 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础 2 常用命令 2.1 pstree 2.1.1 功能描 ...

  5. Cetos 中添加bbr服务

    说明:此方法只适用于KVM架构的,OpenVZ平台无法使用: 一:安装bbr服务: # wget --no-check-certificate https://github.com/teddysun/ ...

  6. 搭建oracle linux虚拟机报错解决

    sysctl -P 报错解决办法问题症状修改 linux 内核文件 #vi /etc/sysctl.conf后执行sysctl  -P 报错error: "net.bridge.bridge ...

  7. java导出数据EXCEL的工具类(以spring-webmvc-4.0.4jar为基础)

    1.本工具类继承于  spring-webmvc-4.0.4jar文件心中的一个类   AbstractExcelView 2.代码如下 package com.skjd.util; import j ...

  8. java mina框架使用

    1.目前为止,看到写mina最清晰的一篇博客:https://my.oschina.net/ielts0909/blog/85946! 2.官网的开发文档:http://mina.apache.org ...

  9. ubuntu 16.04如何生成ssh key以及如何查看ssh key

    检查本地是否有SSH Key存在 在终端输入 ls -al ~/.ssh 如果输出的是: No such file or directory 那就没有ssh key 如果有就会出现这样: 生成新的SS ...

  10. Linux网络子系统

    再Linux的世界里,万物皆文件,通过虚拟文件系统VFS,程序可以用标准的Linux系统调用对不同的文件系统,甚至不同介质上的文件系统进行读写操作.下面我们揭示Linux网络子系统的秘密 sockfs ...