easing-js

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        #taxiway {

            width: 800px;

            height: 100px;

            background: #E8E8EF;

            position: relative;

        }

        #move {

            position: absolute;

            left: 0;

            width: 100px;

            height: 100px;

            background: #a9ea00;

        }

    </style>

</head>

<body>

    <div id="taxiway">

        <div id="move"></div>

    </div>

    <script>

        function easeOutBounce(pos) {

            if ((pos) < (1/2.75)) {

                return (7.5625*pos*pos);

            } else if (pos < (2/2.75)) {

                return (7.5625*(pos-=(1.5/2.75))*pos + 0.75);

            } else if (pos < (2.5/2.75)) {

                return (7.5625*(pos-=(2.25/2.75))*pos + 0.9375);

            } else {

                return (7.5625*(pos-=(2.625/2.75))*pos + 0.984375);

            }

        }

        var el = document.getElementById('move')

        var parent = document.getElementById('taxiway')

        var distance = parent.offsetWidth - el.offsetWidth

        var begin = parseFloat(window.getComputedStyle(el, null).left)

        var end = begin + distance

        var fps = 30

        var interval = 1000 / fps

        var duration = 2000

        var times = duration / 1000 * fps

        var step = distance / times

        el.onclick = function() {

            var beginTime = new Date

            var id = setInterval(function() {

                var t = new Date - beginTime

                if (t >= duration) {

                    el.style.left = end + 'px'

                    clearInterval(id)

                } else {

                    var per = t / duration

                    el.style.left = begin + easeOutBounce(per) * distance + 'px'

                }

            }, interval)

        }

    </script>

</body>

</html>

easeIn
linear(easeNone)
In 表示加速
Out 表示减速
InOut 表示加速到中途又开始减速

以实现方式与指数或开根进行区分
Sine 表示由三角函数实现
Quad 是二次方
Cubic 是三次方
Quart 是四次方
Quint 是五次方
Cire 使用开平方根的 Math.sqit
Expo 使用开立方根的 Math.pow
Elastic 是结合三角函数与开立三方根的初级弹簧效果
Back 是使用了一个 1.70158 常数来计算的回退效果
Bounce 是高级弹簧效果

JavaScript框架设计 第14章 动画引擎的更多相关文章

  1. 偶的《javascript框架设计》终于出版

    #cnblogs_post_body p{ text-indent:2em!important; } 历时两年多,我的书终于付梓出版了.应各方面的要求,写软文一篇,隆重介绍一下此书对各位程序员的钱途有 ...

  2. JS读书心得：《JavaScript框架设计》——第12章 异步处理

    一.何为异步   执行任务的过程可以被分为发起和执行两个部分. 同步执行模式:任务发起后必须等待直到任务执行完成并返回结果后,才会执行下一个任务. 异步执行模式:任务发起后不等待任务执行完成,而是马上 ...

  3. JavaScript框架设计(三) push兼容性和选择器上下文

    JavaScript框架设计(三) push兼容性和选择器上下文 博主很久没有更博了. 在上一篇 JavaScript框架设计(二) 中实现了最基本的选择器,getId,getTag和getClass ...

  4. JavaScript框架设计(四) 字符串选择器(选择器模块结束)

    JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...

  5. Javascript框架设计思路图

    这个系列的随笔都是关于Javascript框架设计一书的读书笔记(作者是司徒正美),不是本人原创!!! 一.简介: 1.市面上主流的JS框架,大多数是由一个个模块组合而成,模块化是大多数让软件所遵循的 ...

  6. MySQL性能调优与架构设计——第 14 章 可扩展性设计之数据切分

    第 14 章 可扩展性设计之数据切分 前言 通过 MySQL Replication 功能所实现的扩展总是会受到数据库大小的限制,一旦数据库过于庞大,尤其是当写入过于频繁,很难由一台主机支撑的时候,我 ...

  7. JavaScript 框架设计

    JavaScript 高级框架设计 在现在,jQuery等框架已经非常完美,以致于常常忽略了JavaScript原生开发,但是这是非常重要的. 所以,我打算写一个简单的框架,两个目的 熟练框架的思想 ...

  8. JavaScript 框架设计(二)

    JavaScript 高级框架设计 (二) 上一篇,JavaScript高级框架设计(一)我们 实现了对tag标签的选择 下来我们实现对id的选择,即id选择器. 我们将上一篇的get命名为getTa ...

  9. JS框架设计读书笔记之-动画

    基础概念 CSS样式可分为两种,一种值接近无限的集合(color,width),一种值只有几种(display),可以进行计算的样式,产生了动画效果.\ 1. 动画的第一步是获得元素的精确样式值. 2 ...

随机推荐

  1. Android（java）学习笔记213：开源框架post和get方式提交数据（qq登录案例）

    1.前面提到Http的get/post方式  . HttpClient方式,实际工作的时候不常用到,因为这些方式编写代码是很麻烦的 2.Android应用会经常使用http协议进行传输,网上会有很完善 ...

  2. Activity的几种启动跳转方式

     一.显示调用方法 •Intent intent=new Intent(this,OtherActivity.class); //方法1 •Intent intent2=new Intent(); • ...

  3. Android Listview with different layout for each row

    http://stackoverflow.com/questions/4777272/android-listview-with-different-layout-for-each-row 其关键在重 ...

  4. Android图表引擎AChartEngine之折线图使用

    最近在帮老师做一个课题,其中app端需要显示折线图以便直观地看数据波动,上网查了些资料后发现了这款图标引擎,另外感谢李坤老师的博客,帮助很大. 废话不多说,下面写代码. 一.AChartEngine是 ...

  5. Android-自定义多TAB悬浮控件实现蘑菇街首页效果

    因为项目的一些需求需要用到此种展现方式.  找了市面上大部分有类似功能的应用.  基本思路嵌套ScrollView 转换事件分发给listview 实现. 但是此种方案有个缺点. 在ScrollVie ...

  6. Eclipse代码自动填充.

    在默认情况下,Eclipse只在程序员输入“.”并用ALT+/组合键强制调用编码提示功能 我们可以通过少量配置,让Eclipse更聪明,实现完全自动编码提示:1.在你的“工作空间”下找到下在文件.me ...

  7. EntityFrameowk6.1 使用enum和低版本的不同

    原有项目中使用EF5.0 实体类 public partial class Log : BaseEntity { public Nullable<int> LogLevelId { get ...

  8. Ubuntu系统配置日志/var/log/message

    ubuntu系统默认不生成/var/log/messages文件,有时候想查看相关日志就很不方便,于是我们可以设置使系统生成此文件. 1.先安装 apt-get install rsyslog2.用v ...

  9. C# 泛型2

    我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一个是处理string数据,或者其他自定义的数据类型,但我们没有办法,只能分别写多个方法处理每个数据类型,因为方法的参数类 ...

  10. POJ 2186.Popular Cows （强连通）

    强连通缩点,统计入度为1的缩点后的点的个数 个数1的话输出这个强连通分量的点的数量 否则输出0: code /* Kosaraju算法,无向图的强连通分量,时间复杂度O(n+m) 思路: 按照图G的深 ...