资讯频道 → Web前端
阅读更多

2顶
0踩

Web前端

转载新闻 JavaScript动画实现初探

2015-03-24 15:06 by 副主编 mengyidan1988 评论(1) 有3968人浏览
javascript 前端开发
前言

现如今，许多页面上均有一些动画效果。适当的动画效果可以在一定程度上提高页面的美观度，具有提示效果的动画可以增强页面的易用性。

实现页面动画的途径有两种。一种是通过操作JavaScript间接操作CSS样式，每隔一段时间更新一次；一种是直接通过CSS定义动画。第二种方法在CSS3成熟之后被广泛采用。在本文中，我们讨论第一种方法的原理和实现。

JavaScript动画实现原理
首先我们需要知道两个重要的概念，动画时间进程和动画效果进程。

动画时间进程指从时间上看动画的完成度，是一个[0, 1]之间的数字。假设动画于时间戳t1开始，要在t2结束，当前时间戳为t，那么该动画目前的时间进程为(t-t1)/(t2-t1)。如果你不能理解，我建议你用纸笔画出来。理解这一概念对理解本文至关重要。

动画效果进程指被动画的属性值当前的增量。假设我们要将#el元素的CSS left 属性从100px变到200px，当前已经变到了130px，那么该动画目前的效果进程为130px - 100px = 30px。

假设动画时间进程和动画效果进程都是线性的。那么如果知道了动画时间进程，一定可以得到动画效果进程。



根据这个解释，我们很快可以编写出一个线性的动画。 
(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

很多时候，我们需要的动画并非线性的。所谓非线性，从直观上看，就是动画速度随着时间会产生变化。那么如何实现变速的动画呢？

由前所述，我们知道通过控制动画的时间进程就相当于控制动画的效果进程。随着真实世界的时间进程推移，动画的时间进程跟着推移，从而控制动画的效果进程推移。那么，我们可以通过修改真实世界的时间进程和动画的时间进程间的映射关系，从而控制动画进程。如果你感到困惑，没关系，请看下图：



这是线性动画中，真实世界的时间进程和动画进程的映射关系。接下来，我们将其进行变换。



这条曲线实际上是函数y = x * x的图像。可以看到，两个曲线的定义域和值域并没有变化。曲线的斜率就是动画的速率。接下来我们将两张图重叠在一起做一个对比。



在真实世界的时间进行到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去执行动画。动画的时间进程可以决定动画的效果进程。通过操作真实世界的时间进程和动画的时间进程之间的关系，我们可以将线性动画变换成非线性的动画。

本文来自：子回的博客
  • 大小: 11.6 KB
  • 大小: 13.6 KB
  • 大小: 13.5 KB
  • 大小: 19.1 KB
来自: 子回的博客
2
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 mangguo 2015-03-25 10:29

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • JavaScript动画初探

    JavaScript动画初探

  • canvas入门初探—实现人物移动动画

    这一篇通过案例实现人物移动动画，下面一起来看看 实现功能 点击开始，人物按照设定好的路线开始移动，点击暂停停止移动，能够按照设置的路线完成任务移动 步骤 1.绘制人物对象的信息 首先我们要确定人物的行驶路径...

  • JavaScript初探

    》》JavaScript：它是将两种语言合二为一的语言。  第一种语言是内置在Web 浏览器和其他应用程序中的、用户友好的、易于使用的脚本语言，它能提供表单验证之类的功能，  还有下拉菜单、数据更新时的颜色渐变和及席...

  • android 进入三方应用动画,Android 动画各种实现总结分享 AndroidAnimationExercise

    主要内容是Android动画、Android自定义View 相关的知识，包含一些常见应用中动画效果的模仿实例. 随着时间的推移，里面积累的很多代码，大致用5个Fragment 做了分类：扫一扫体验打开ImitateFragment (模仿三方应用...

  • 初探新的 JavaScript 并行特性

    初探新的 JavaScript 并行特性 http://www.spotty.com.cn/archives/48/ 本文转载自：众成翻译 译者：numbbbbb 链接：http://www.zcfy.cc/article/274 原文：https://hacks.mozilla.org/2016/05/a-

  • JavaScript初探之——图片移动

    在很多的时候，我们为了实现一一些效果，比如渐变，移动，如果用Flash的画，无疑为浏览器添加了太大的负载，如果用多张图片一张一张显示的画，这样做又太死板了，不利于我们的变化，所以最好的方法还是封装一个方法...

  • 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越，开源动画库Velocity.js等就展现了强劲的性能。 一、两者的主要区别 先开门见山的说说两者之间的区别。 1）CSS动画： 基于CSS的动画一般由浏览器“主线程”之外的独立...

  • JavaScript初探（一）

    HTML是一种标记语言，用来结构化我们的网页内容和赋予内容...JavaScript 是一种编程语言，允许你创建动态更新的内容，控制多媒体，图像动画，和一些其他的东西。好吧，虽然不是一切，但是它的神奇之处是你能够用几...

  • javascript初探（五）------ BOM

    目录 一、概述 二、window对象 三、navigator对象 四、... 六、screen对象 功能：用户显示器相关信息，移动端用的多 上一篇：javascript初探（四）------事件对象 下一篇：javascript初探（六）------TypeScript浅尝

  • javascript队列执行池类初探

    javascript队列执行池初探在业务逻辑中，有时会遇到这样的逻辑，需要按一定的顺序执行一系列方法，而这一系列方法的个数不确定，执行时间是必须等上一个方法执行完，有时需要取消队列中还没有执行的方法，有时需要...

  • Three.js初探：用requestAnimationFrame优化Web动画

    我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次，来让它动起来，从而形成动画的效果，Js中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 在JavaScript API...

  • 前端初探-JavaScript

    css样式会让页面更加酷炫，就像化上妆一样，js让页面可以动态变化，给页面添加了动画效果，检测访客的浏览信息。 js事件绑定有三种： 第一种： 在html标签中进行事件绑定 在页面中：Function ...

  • 前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画

    说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能...

  • Android 动画各种实现，包括帧动画、补间动画和属性动画的总结分享

    简介： Android 动画各种实现，包括帧动画、补间动画和属性动画的总结分享 更多：作者提 Bug 标签： 转存失败重新上传取消 这是一个关于 Android 中各种 View 的集合，里面包含自己日常开发和博客总结中的代码...

  • Cocos2d-js开发之JavaScript初探

    Cocos2d-js开发之JavaScript初探 一． HelloJS   alert("Hello JS!");      Hello     二． JS的调试（DebugJS） index.html          Hello index.js...

  • ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了，在经历了从最初的彷徨到解决...好了，这次动画初探就到这里，随着学习和实践的深入，还会陆续推出一系列分享，敬请关注。 转载于:https://www.cnblogs.com/dson/p/5442731.html

  • 基于transUnet和swinUnet的医学图像分割项目实验对比

    基于transUnet和swinUnet的医学图像分割项目实验对比，包含完整代码，可以一键运行。评估指标包括dice、iou、recall、precision等

  • ,stm32f030无感foc方案，资料包括原理图，pcb，源程序，观测器参数，电流环参数计算表格

    ,stm32f030无感foc方案，资料包括原理图，pcb，源程序，观测器参数，电流环参数计算表格。

  • 分布式电源DG选址定容优化及帕累托最优解集的粒子群算法研究,多目标粒子群算法 分布式电源 DG 定容选址 网损 成本 电压偏差 通过分布式能源的选址定容确定得到帕累托最优解集，然后选择最优值进行分

    分布式电源DG选址定容优化及帕累托最优解集的粒子群算法研究,多目标粒子群算法 分布式电源 DG 定容选址 网损 成本 电压偏差 通过分布式能源的选址定容确定得到帕累托最优解集，然后选择最优值进行分析，程序采用改进粒子群算法， ,核心关键词：多目标粒子群算法; 分布式电源选址定容; 网损; 成本; 电压偏差; 帕累托最优解集。,改进粒子群算法在分布式电源选址定容中的应用：优化网损与成本，考虑电压偏差

Global site tag (gtag.js) - Google Analytics