var easingMap = {

        "linear": [0.250, 0.250, 0.750, 0.750],

        "ease": [0.250, 0.100, 0.250, 1.000],

        "easeIn": [0.420, 0.000, 1.000, 1.000],

        "easeOut": [0.000, 0.000, 0.580, 1.000],

        "easeInOut": [0.420, 0.000, 0.580, 1.000],

        "easeInQuad": [0.550, 0.085, 0.680, 0.530],

        "easeInCubic": [0.550, 0.055, 0.675, 0.190],

        "easeInQuart": [0.895, 0.030, 0.685, 0.220],

        "easeInQuint": [0.755, 0.050, 0.855, 0.060],

        "easeInSine": [0.470, 0.000, 0.745, 0.715],

        "easeInExpo": [0.950, 0.050, 0.795, 0.035],

        "easeInCirc": [0.600, 0.040, 0.980, 0.335],

        "easeInBack": [0.600, -0.280, 0.735, 0.045],

        "easeOutQuad": [0.250, 0.460, 0.450, 0.940],

        "easeOutCubic": [0.215, 0.610, 0.355, 1.000],

        "easeOutQuart": [0.165, 0.840, 0.440, 1.000],

        "easeOutQuint": [0.230, 1.000, 0.320, 1.000],

        "easeOutSine": [0.390, 0.575, 0.565, 1.000],

        "easeOutExpo": [0.190, 1.000, 0.220, 1.000],

        "easeOutCirc": [0.075, 0.820, 0.165, 1.000],

        "easeOutBack": [0.175, 0.885, 0.320, 1.275],

        "easeInOutQuad": [0.455, 0.030, 0.515, 0.955],

        "easeInOutCubic": [0.645, 0.045, 0.355, 1.000],

        "easeInOutQuart": [0.770, 0.000, 0.175, 1.000],

        "easeInOutQuint": [0.860, 0.000, 0.070, 1.000],

        "easeInOutSine": [0.445, 0.050, 0.550, 0.950],

        "easeInOutExpo": [1.000, 0.000, 0.000, 1.000],

        "easeInOutCirc": [0.785, 0.135, 0.150, 0.860],

        "easeInOutBack": [0.680, -0.550, 0.265, 1.550],

        "custom": [0.000, 0.350, 0.500, 1.300],

        "random": [Math.random().toFixed(3),

            Math.random().toFixed(3),

            Math.random().toFixed(3),

            Math.random().toFixed(3)]

    }

css3 缓动公式的更多相关文章

  1. 缓动公式整理（附：C#实现及WPF原版对比）

    前言 缓动在动画效果中应用非常广泛,在合适的时候使用一些缓动效果会使得效果更加符合人的直观感受,简单来说,会显得更加自然. WPF提供了11种缓动效果,涵盖了大部分的使用场景.不过如果需要在非WPF下 ...

  2. javascript的缓动效果

    这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...

  3. 缓动动画（json）

    function animate(obj, json){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag = ...

  4. javascript 45种缓动效果BY司徒正美

    javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...

  5. 利用tween.js算法生成缓动效果

    在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

  6. Silverlight动画学习笔记(三)：缓动函数

    (一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效 ...

  7. JS基础知识——缓动动画

    基于距离的缓动动画 原理:设定起始位置  start 和终止位置 end,变化会越来越慢. 公式:start=start+(end-start)/10;     这个10不是固定的,想分成多少份就分成 ...

  8. JS实现缓动动画效果

    原理如下: 假设要从数值A变化到数值B,如果是线性运动,则每次移动距离是一样:如果是缓动,每次移动距离不一样.那如何才能不一样呢?很简单,按比例移动就可以. 例如:每次移动剩余距离的一半. 对吧,超容 ...

  9. tween 缓动动画

    在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

随机推荐

  1. getResourceAsStream和getResource的用法及Demo实例

    用JAVA获取文件,听似简单,但对于很多像我这样的新人来说,还是掌握颇浅,用起来感觉颇深,大家最经常用的,就是用JAVA的File类,如要取得 D:/test.txt文件,就会这样用File file ...

  2. SpringMVC配置拦截器实现登录控制

    SpringMVC读取Cookie判断用户是否登录,对每一个action都要进行判断.之前使用jstl标签在页面上判断session如果没有登录就使用如下代码跳转到登录页面. <c:if tes ...

  3. jQuery知识点一 each()和toggleClass()

    jQuery的一些东东比较容易忘,所以在这里整理一下... ... 1. each (1) $(selector).each(function(index,element))         inde ...

  4. passive 的事件监听器

    很久以前,addEventListener() 的参数约定是这样的: addEventListener(type, listener, useCapture) 后来,最后一个参数,也就是控制监听器是在 ...

  5. openjdk 完全编译指南

    从openjdk.java.net下载openjdk的软件包,你就获得了所有相关的源码. 强烈建议首先仔细看懂 README-builds.html 指南. 在执行 make all 之前,首先要 执 ...

  6. XMPP作为一个工具的意义

    学习XMPP就是拥有位当前应用程序添加实时,推送,社交功能所需的工具.虽然浏览器不支持XMPP通讯,但是我们可以通过BOSH技术解决. 一个XMPP网络包含如下 服务器:为XMPP节提供路由,是否支持 ...

  7. C#深入浅出 继承（六）

    这个标题写出来好长时间了,都没写内容,今天无论如何都得写完它,昨天写了一段,尼玛,电脑突然死机,重启之后啥都没了. 继承嘛,有人觉得很简单,但是里面还是有内容可以讲的,因为面向对象也就这么点内容,封装 ...

  8. cookie中文乱码

    在学习当中碰到cookie中文乱码问题,问题原因:cookie对中文不太支持,将中文放入cookie中会报错误. 解决办法: 1.编码 将中文进行编码再放入cookie中: String userna ...

  9. rabbitmq 简单梳理

    概念: 生产者(Producer,简写P),负责发布消息. “交换机”(Exchange, 简写X), 负责中转消息. 路由(Route, 简写R), 即 X->Q的路线名. 消息队列 (Que ...

  10. centos 安装 rabbitMQ

    此类文章一大堆,本文主要站在开发角度保证基本rabbitmq的基本访问. 系统:centos6 64bit 官方指引:https://www.rabbitmq.com/install-rpm.html ...