众多页面上均有一点点卡通效果

前言

现近日,大多页面上均有局地动漫效果。适当的动漫片效果能够在自然水准上抓实页面包车型客车绝色度,具备提醒意义的卡通片能够坚实页面包车型地铁易用性。

金玉锦绣页面动漫的路线有三种。后生可畏种是透过操作JavaScript直接操作CSS样式,每间隔大器晚成段时间更新一回;意气风发种是直接通过CSS定义动漫。第二种办法在CSS3成熟以往被分布应用。在本文中,大家评论第风姿罗曼蒂克种方法的原理和贯彻。

JavaScript动漫完成原理

首先我们需求知道八个根本的定义,动画时间经过和卡通片效果进度。

动画片时间经过指从时间上看动漫片的完成度,是三个[0,
1]中间的数字。如若动漫于时间戳t1开始,要在t2终结,当前时刻戳为t,那么该卡通前段时间的年华经过为(t-t1)/(t2-t1)。假设你不能领悟,小编建议您用纸笔画出来。明白这一定义对通晓本文至关心重视要。

动漫效果进度指被动漫的属性值现阶段的增量。假使咱们要将#el元素的CSS left 属性从100px变到200px,当前早就变到了130px,那么该卡通如今的效应进程为130px - 100px = 30px

倘使动漫时间经过和卡通效果进度都以线性的。那么生机勃勃旦驾驭了动漫时间经过,一定能够赢得动漫效果进度。

图片 1

依赖这么些解释,大家神速得以编写出二个线性的卡通片。

(function() {
      var begin, // 开始动画的时间
        el, start, end, duration; 
      var INTERVAL = 13;

      function now() {
        return (new Date).getTime();
      }

      /**
       * 执行一步动画(更新属性)
       */
      function _animLeft() {
        var pos = (now() - begin) / duration;
        if (pos >= 1.0) {
          return false;
        }
        return !!(el.style.left = start + (end - start) * pos);
      }

      /**
       * 对一个DOM执行动画,left从_start到_end,执行时间为
       * _duration毫秒。
       * 
       * @param  {object} _el       要执行动画的DOM节点
       * @param  {integer} _start   left的起始值
       * @param  {integer} _end     left的最终值
       * @param  {integer} _duration  动画执行时间
       */
      function animLeft(_el, _start, _end, _duration) {
        stopped = false;
        begin = now();
        el = _el;
        start = _start;
        end = _end;
        duration = _duration || 1000;

        var step = function() {
          if (_animLeft()) {
            setTimeout(step, INTERVAL);
          }
        };
        setTimeout(step, 0);
      }

      window.animLeft = animLeft;
    })();

    animLeft(
      document.getElementById('el'),
      100,
      200
    )

JSBin

easing

广大时候,大家需求的动漫而不是线性的。所谓非线性,从直观上看,正是动漫片速度随着时间会发出变化。那么如何落到实处变速的动漫呢?

由前所述,大家知晓通过决定动漫的光阴经过就也便是决定动漫的作用进度。随着真正世界的大运经过推移,动漫的年月经过跟着推移,进而决定动画的效用进度推移。那么,我们得以通过改革真实世界的时刻经过和卡通的时日经过间的照射关系,进而调节动漫进度。假如你以为疑忌,没提到,请看下图:

图片 2

那是线性动画中,真实世界的日子经过和动漫进度的投射关系。接下来,我们将其进行转移

图片 3

那条曲线实际上是函数y = x * x的图像。可以见到,八个曲线的定义域和值域并不曾成形。曲线的斜率便是卡通的速率。接下来我们将两张图重叠在联合做二个相对来讲。

图片 4

在下马看花世界的日子开展到x0的时候,动漫进度原来应该张开到y0,在进行改动之后,只进行到y1。到最终,根追查底,两条线交汇于点(1,
1卡塔尔国。这里,y = x * x变换函数(easing function)

作者们改善一下地点的例证,让动漫产生非线性的。

function ease(time) {
      return time * time;
    }

    /**
     * 执行一步动画(更新属性)
     */
    function _animLeft() {
      var pos = (now() - begin) / duration;
      if (pos >= 1.0) {
        return false;
      }
      pos = ease(pos);
      return !!(el.style.left = (start + (end - start) * pos) + "px");
    }

JSBin

咱俩得以在jQuery的代码中来看那样的函数。

jQuery.easing = {
      linear: function( p ) {
        return p;
      },
      swing: function( p ) {
        return 0.5 - Math.cos( p * Math.PI ) / 2;
      }
    };

故而,你可未来jQuery.easing里边加多easing
function,使得jQuery扶植新的动漫片速率调控措施。注意,easing
function的定义域和值域必须都为[0, 1]。

 jQuery.easing.myEasing = function( p ) { return ... }

总结

本文介绍了JavaScript动漫的最基本的原理。

JavaScript动漫实质上也是透过操作CSS去施行动漫。动漫的小时经过能够操纵动漫的成效进度。通过操作实际世界的时日经过和动漫的日子经过之间的涉嫌,大家能够将线性动漫转变来非线性的卡通。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website