webkitAnimationEnd动画事件

一世执手 提交于 2020-01-19 05:41:53

在前面的文章中也有介绍过css3动画的内容,可见《关于transition和animation》和《webkitAnimationEnd动画事件》,今天又要唠叨一下这个东西了,随着知道的越多,然后就会发现自己还有更多的不知道。

今天主要说的是利用animate制作帧动画。

我们常见的loading效果,很多的动画效果并不是连续运动,而是一种逐帧运动的感觉。

看一个简单的需要制作动画效果的图片:

甚至就包括我们在这里写博客上传图片,等待上传这个过程中的loading动画,明显的效果是不能连续转动,不然总感觉傻傻的,最开始我也做了一个傻傻的连续旋转的动画,不知道怎么上传这种效果,没法只管的演示,我把所有代码全都贴上自己可以观察一下。

<div class="loading"></div>
.loading{
  width: 1.12rem;
  height: 1.12rem;
  position: absolute;
  left: 50%;
  margin-left: -0.56rem;
  top: 35%;
  z-index: 2;
  background: url(../images/loading.png) no-repeat center center;
  background-size: contain;
  -webkit-animation: rorates 4s infinite linear;
  animation: rorates 4s infinite linear;
}
@-webkit-keyframes rorates {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
@keyframes rorates {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

所引用的图片,就是前面上传的那张,大家可以看一下,连续旋转,真的没有任何的美感可言。这时候,我就想到了逐帧动画的解决方法。

其实,逐帧动画的关键点在于我们常用的控制动画的速度曲线的属性animation-timing-function,该属性我们比较熟悉的值基本上属于一下这些值:

其中三次贝塞尔曲线cubic-bezier(n,n,n,n),我不知道有多少人能够熟练使用,我是从来没使用过,在我的项目中,前面几种动画曲线已经够用了。

事实上,在这个动画曲线上,还应该有一个值,就是steps(step-start, step-end)函数,他有两个参数,step-start其实就是你指定的步进数量,steps()会根据你指定的步进数量,把整个动画切分为step-start帧,并且整个动画会在帧与帧之间硬切。而step-end用于指定动画在每个周期的什么位置发生帧的切换动作,但实际上并没有多大卵用,或者说就我而言,没发现他有多少实际用处吧!

上面的css动画稍作修改,就能实现我们需要的逐帧动画:

.loading{
  width: 1.12rem;
  height: 1.12rem;
  position: absolute;
  left: 50%;
  margin-left: -0.56rem;
  top: 35%;
  z-index: 2;
  background: url(../images/loading.png) no-repeat center center;
  background-size: contain;
  -webkit-animation: rorates 4s infinite steps(8);
  animation: rorates 4s infinite steps(8);
}
@-webkit-keyframes rorates {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
@keyframes rorates {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

  这么再看起来,明显好很多了

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!