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. iOS 复杂动画之抽丝剥茧

    一.前言 随着开发者的增多和时间的累积,AppStore已经有非常多的应用了,每年都有很多新的APP产生.但是我们手机上留存的应用有限,所以如何吸引用户,成为产品设计的一项重要内容.其中炫酷的动画效果 ...

  2. 动态代理与AOP

    1. 代理的分类: 静态代理:每个代理类只能为一个接口服务 动态代理:可以通过一个代理类完成全部的代理功能(由JVM生成实现一系列接口的代理类,即:生成实现接口的类的代理) 2. 动态代理: 在Jav ...

  3. Java集群之session共享解决方案

    随着互联网的日益壮大,网站的pv和uv成线性或者指数倍的增加.单服务器单数据库早已经不能满足实际需求.比如像盛大,淘宝这样的大型网络公司,更是如此.     集群,也就是让一组计算机服务器协同工作,达 ...

  4. 在使用Kettle的集群排序中 Carte的设定——(基于Windows)

    本片文章主要是关于使用Kettle的UI界面: Spoon来实现基于集群的对数据库中的数据表数据进行排序的试验. 以及在实验过程中所要开启的Carte服务的一些配置文件的设置, 还有基于Windows ...

  5. POJ3285 River Hopscotch(最大化最小值之二分查找)

    POJ3285 River Hopscotch 此题是大白P142页(即POJ2456)的一个变形题,典型的最大化最小值问题. C(x)表示要求的最小距离为X时,此时需要删除的石子.二分枚举X,直到找 ...

  6. [LeetCode OJ] Best Time to Buy and Sell Stock I

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  7. WHU 1568 Product (DP、逆元)

    题意: 定义f(x) 为数x的所有数字的乘积. 求满足f(k)=f(x)的不同的不含数字1的k的个数. x的长度小于50. 不超过1000组数据. Solution: 由于函数是乘积的形式,可以由质因 ...

  8. java逻辑运算符&&、&、||、|的详解

    public class OperatorDemo{ public static void main(String args[]) { //当我们执行一下代码时会报错(&属于没短路的) if( ...

  9. 机器学习实验报告：利用3层神经网络对CIFAR-10图像数据库进行分类

    PS:这是6月份时的一个结课项目,当时的想法就是把之前在Coursera ML课上实现过的对手写数字识别的方法迁移过来,但是最后的效果不太好… 2014年 6 月 一.实验概述 实验采用的是CIFAR ...

  10. CoreLocation MKMapView

    高德开发者平台 有开发指南 iOS9配置网络: <key>NSAppTransportSecurity</key> <dict> <key>NSAllo ...