请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2016-9-6 09:21  /   查看:5158  /  回复:0
本帖最后由 断天涯大虾 于 2017-1-20 10:12 编辑

以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app,那么就有机会利用css3去实现一些很酷的效果,这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍几种实现的方案。


方案1. 图片辅助

传统做法是直接用动态的GIF图片,这个方案是用PNG图片加上背景颜色来模拟静止的加载图片,然后利用css中的animation处理图片的旋转。相比传统方案,这个方案的好处是可以直接通过修改CSS来改变背景色,可以修改大小和旋转速度。如下是具体的CSS代码:

  1. <span style="background-color: white;"><font color="#000000">@-webkit-keyframes rotate {
  2.   from {-webkit-transform:rotate(0deg);}
  3.   to {-webkit-transform:rotate(360deg);}
  4. }
  5. p#spinner {
  6.   height: 30px;
  7.   width: 30px;
  8.   overflow: hidden;
  9.   background: #000;
  10.   -webkit-mask-image: url("data:image/png[...]");
  11.   -webkit-mask-size: 30px 30px;
  12.   -webkit-animation-name: rotate;
  13.   -webkit-animation-duration: 1.5s;
  14.   -webkit-animation-iteration-count: infinite;
  15.   -webkit-animation-timing-function: linear;
  16. }</font></span>
复制代码

具体效果查看这里:Demo1

这个方案,只有safari可以很好地支持。chrome下支持不是很好,所以这是一个不太成熟的方案。


方案2. 纯CSS实现

方案的思路是,首先用css渲染12个静态的bar,每个bar间隔30度的角度,给每个bar添加背景变淡的动画,但是相邻bar的动画效果延迟1/12秒,来保证12个bar是按顺序变亮然后变暗。从而模拟出旋转的效果。

这个旋转效果是伪旋转,所有的bar都没有真正做到旋转。

  1. <span style="background-color: white;"><font color="#000000">@-webkit-keyframes fade {
  2.     from {opacity: 1;}
  3.     to {opacity: 0.25;}
  4. }
  5. div.spinner {
  6.     position: relative;
  7.     width: 30px;
  8.     height: 30px;
  9.     display: inline-block;
  10. }
  11. div.spinner div {
  12.     width: 20%;
  13.     height: 40%;
  14.     background: #000;
  15.     position: absolute;
  16.     left: 100%;
  17.     top: 100%;
  18.     opacity: 0;
  19.     -webkit-animation: fade 1s linear infinite;
  20.     -webkit-border-radius: 30px;
  21. }
  22. div.spinner div.bar1 {
  23.     -webkit-transform:rotate(0deg) translate(0, -142%);
  24.         -webkit-animation-delay: 0s;
  25. }
  26. [......]
  27. div.spinner div.bar12 {
  28.     -webkit-transform:rotate(330deg) translate(0, -142%);
  29.     -webkit-animation-delay: -0.0833s;
  30. }</font></span>
复制代码

具体效果查看这里:Demo2

safari和chrome都能很好地渲染这个效果,并且也很容易定义实际大小,因为所有的bar的高度,宽度有是用百分比来定义的。缺点也很明显,需要定义12个bar,并且每个bar都要定义独立的css,相对来说html和css的代码量有点多。


方案3. 这个方案类似sencha touch中实现的效果

方案的基本思想是:首先利用html和css呈现4个bar,再通过css的伪元素: before和:after定义每个bar的前后内容,这样使得由原始的4个bar产生12个bar的效果,其次通过css设置让12个bar的透明度逐渐递减,最后应用css3中旋转动画达到实际loading的效果。

  1. <span style="background-color: white;"><font color="#000000">.x-loading-spinner {
  2.     font-size: 250%;
  3.     height: 1em;
  4.     width: 1em;
  5.     position: relative;
  6.     -webkit-transform-origin: 0.5em 0.5em;
  7. }
  8. .x-loading-spinner > span, .x-loading-spinner > span:before, .x-loading-spinner > span:after {
  9.     display: block;
  10.     position: absolute;
  11.     width: 0.1em;
  12.     height: 0.25em;
  13.     top: 0;
  14.     -webkit-transform-origin: 0.05em 0.5em;
  15.     -webkit-border-radius: 0.05em;
  16.     border-radius: 0.05em;
  17.     content: " ";
  18. }
  19. .x-loading-spinner > span.x-loading-top {
  20.     background-color: rgba(170, 170, 170, 0.99);
  21. }
  22. .x-loading-spinner > span.x-loading-top::after {
  23.     background-color: rgba(170, 170, 170, 0.9);
  24. }
  25. .x-loading-spinner > span.x-loading-left::before {
  26.     background-color: rgba(170, 170, 170, 0.8);
  27. }
  28. .x-loading-spinner > span.x-loading-left {
  29.     background-color: rgba(170, 170, 170, 0.7);
  30. }
  31. .x-loading-spinner > span.x-loading-left::after {
  32.     background-color: rgba(170, 170, 170, 0.6);
  33. }
  34. .x-loading-spinner > span.x-loading-bottom::before {
  35.     background-color: rgba(170, 170, 170, 0.5);
  36. }
  37. .x-loading-spinner > span.x-loading-bottom {
  38.     background-color: rgba(170, 170, 170, 0.4);
  39. }
  40. .x-loading-spinner > span.x-loading-bottom::after {
  41.     background-color: rgba(170, 170, 170, 0.35);
  42. }
  43. .x-loading-spinner > span.x-loading-right::before {
  44.     background-color: rgba(170, 170, 170, 0.3);
  45. }
  46. .x-loading-spinner > span.x-loading-right {
  47.     background-color: rgba(170, 170, 170, 0.25);
  48. }
  49. .x-loading-spinner > span.x-loading-right::after {
  50.     background-color: rgba(170, 170, 170, 0.2);
  51. }
  52. .x-loading-spinner > span.x-loading-top::before {
  53.     background-color: rgba(170, 170, 170, 0.15);
  54. }
  55. .x-loading-spinner > span {
  56.     left: 50%;
  57.     margin-left: -0.05em;
  58. }
  59. .x-loading-spinner > span.x-loading-top {
  60.     -webkit-transform: rotate(0deg);
  61.     -moz-transform: rotate(0deg);
  62. }
  63. .x-loading-spinner > span.x-loading-right {
  64.     -webkit-transform: rotate(90deg);
  65.     -moz-transform: rotate(90deg);
  66. }
  67. .x-loading-spinner > span.x-loading-bottom {
  68.     -webkit-transform: rotate(180deg);
  69.     -moz-transform: rotate(180deg);
  70. }
  71. .x-loading-spinner > span.x-loading-left {
  72.     -webkit-transform: rotate(270deg);
  73.     -moz-transform: rotate(270deg);
  74. }
  75. .x-loading-spinner > span::before {
  76.     -webkit-transform: rotate(30deg);
  77.     -moz-transform: rotate(30deg);
  78. }
  79. .x-loading-spinner > span::after {
  80.     -webkit-transform: rotate(-30deg);
  81.     -moz-transform: rotate(-30deg);
  82. }
  83. .x-loading-spinner {
  84.     -webkit-animation-name: x-loading-spinner-rotate;
  85.     -webkit-animation-duration: 0.5s;
  86.     -webkit-animation-iteration-count: infinite;
  87.     -webkit-animation-timing-function: linear;
  88. }

  89. @-webkit-keyframes x-loading-spinner-rotate {
  90.     from {
  91.     -webkit-transform: rotate(30deg);
  92.     }
  93.     to {
  94.     -webkit-transform: rotate(330deg);
  95.     }
  96. }</font></span>
复制代码

具体效果查看这里:Demo3

这个方案是3个方案中应用css技术最彻底的一个,html的代码最少,并且也真正做到了旋转效果。缺点是不易扩展,chrome浏览器支持不是很理想。

综上分析,方案1浏览器支持不好,但是实现简单,方案2的html代码太多,但扩展好,浏览器支持不错,方案3的扩展性不好,浏览器支持也不好,但是较好地利用了css的特性。

如果开发桌面web系统,推荐方案2,如果是mobile系统,则方案2和方案3各有优势。

   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部