zoukankan      html  css  js  c++  java
  • 关键帧动画

      在jQuery提供方便的接口的今天,我们很容易就可以利用API :animate()来实现动画。不知道大家发现了没有在animate()的参数中的第一项是一个式样集合,不知道大家是不是和我有同样的疑问:为什么不直接添加一个类而是式样集合呢?我猜测是因为animate()函数只能处理有限的属性,或是相关于尺寸的属性,只有这些属性才能有过度效果。

      其实要想实现动画,我们还有另一种方法,就是用CSS3提供的“关键帧动画”。它可以将动画通过进度百分数,划分为多个阶段,分别为每一个阶段定义不同的状态(式样),再封装成类。我们要做的仅仅是把这个类添加到目标元素上。以让物体移动为例,下面我们一起来看看如何实现关键帧动画。

      第一步:

      我们要定义关键帧效果,即确定动画进度中不同阶段的效果(式样)。我们根据这些式样编写 @keyframes

     1 @-webkit-keyframes move {
     2     70% {
     3         left:0%;
     4         top:124px;
     5     }
     6     80% {
     7         left:0%;
     8         top:160px;
     9     }
    10     100% {
    11         left:24.87%;
    12         top:0px;
    13     }
    14 }
    15 @keyframes move {
    16     70% {
    17         left:0%;
    18         top:124px;
    19     }
    20     80% {
    21         left:0%;
    22         top:160px;
    23     }
    24     100% {
    25         left:24.87%;
    26         top:0px;
    27     }
    28 }

      注意:为了兼容不同浏览器,如果有需要我们要添加前缀以兼容。我们会有多个相同的关键帧组。

      第二步:

      有了针效果,我们就要封装成类以方便调用,同时我们要配置动画属性:

     1 .animation_move {
     2     /* 定义CSS3动画 */
     3     -webkit-animation-name: move; /*动画名字,与keyiframes结合使用*/
     4     -webkit-animation-duration: 400ms; /*动画持续时间*/
     5     -webkit-animation-timing-function: ease-out; /*动画播放方式,当前为线性*/
     6     -webkit-animation-delay: 400ms;/* 动画延时开始时间 */
     7     -webkit-animation-direction: 'normal'; /* 播放方向 */
     8     /* -webkit-animation-play-state: 'running';  播放状态 */
     9     
    10     animation-name: move;
    11     animation-duration: 400ms;
    12     animation-timing-function: ease-out;
    13     animation-delay: 400ms;
    14     animation-direction: 'normal';
    15 }

      我们在动画类中分别配置了两种前缀的动画属性,这和之前的关键帧组是一一对应的。

      第三步:

      我们的动画已经完成了90%;接下来,我们要做的只是在需要的时候将这个类(animation_move)添加到目标元素上就可以了。不同的js库有不同的方法,我仅给出jQuery的方法:

    $("#id").addClass("animate_move");

      这样动画就启动了。但是,动画的过程并没有到此为止。

      第四步:

      回调。关键帧动画也是有回调的。但是这个回调针对的并不是动画,而是加载动画的元素。

    $("#id").bind('oanimationend animationend webkitAnimationEnd' ,function(){
            //回调函数的函数体
    
        });

      如果你在元素上加载了不止一个动画,你可以在回调中把自己的bind给unbind掉。再添加下一个动画的回调,和下一个动画。

      

      

  • 相关阅读:
    Quicksum -SilverN
    uva 140 bandwidth (好题) ——yhx
    uva 129 krypton factors ——yhx
    uva 524 prime ring problem——yhx
    uva 10976 fractions again(水题)——yhx
    uva 11059 maximum product(水题)——yhx
    uva 725 division(水题)——yhx
    uva 11853 paintball(好题)——yhx
    uva 1599 ideal path(好题)——yhx
    uva 1572 self-assembly ——yhx
  • 原文地址:https://www.cnblogs.com/webARM/p/3792624.html
Copyright © 2011-2022 走看看