JavaScript缓动函数

最新推荐文章于 2023-01-06 10:16:05 发布
最新推荐文章于 2023-01-06 10:16:05 发布
阅读量752 收藏 2
点赞数 1
分类专栏： Vue JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_Novice_Programmer/article/details/120388428
版权 
var Tween = {
    Linear: function(t, b, c, d) {
        return c * t / d + b;
    },
    Quad: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOut: function(t, b, c, d) {
            return - c * (t /= d) * (t - 2) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t + b;
            return - c / 2 * ((--t) * (t - 2) - 1) + b;
        }
    },
    Cubic: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t + 2) + b;
        }
    },
    Quart: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return - c * ((t = t / d - 1) * t * t * t - 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return - c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }
    },
    Quint: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
        }
    },
    Sine: {
        easeIn: function(t, b, c, d) {
            return - c * Math.cos(t / d * (Math.PI / 2)) + c + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sin(t / d * (Math.PI / 2)) + b;
        },
        easeInOut: function(t, b, c, d) {
            return - c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
        }
    },
    Expo: {
        easeIn: function(t, b, c, d) {
            return (t == 0) ? b: c * Math.pow(2, 10 * (t / d - 1)) + b;
        },
        easeOut: function(t, b, c, d) {
            return (t == d) ? b + c: c * ( - Math.pow(2, -10 * t / d) + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if (t == 0) return b;
            if (t == d) return b + c;
            if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * ( - Math.pow(2, -10 * --t) + 2) + b;
        }
    },
    Circ: {
        easeIn: function(t, b, c, d) {
            return - c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return - c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        }
    },
    Elastic: {
        easeIn: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (!p) p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return - (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        easeOut: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (!p) p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
        },
        easeInOut: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d / 2) == 2) return b + c;
            if (!p) p = d * (.3 * 1.5);
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            if (t < 1) return - .5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
        }
    },
    Back: {
        easeIn: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOut: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        easeInOut: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        }
    },
    Bounce: {
        easeIn: function(t, b, c, d) {
            return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
        },
        easeOut: function(t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },
        easeInOut: function(t, b, c, d) {
            if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
            else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
        }
    }
}


var tween = {
    easeInQuad: function(pos) {
        return Math.pow(pos, 2);
    },
    easeOutQuad: function(pos) {
        return - (Math.pow((pos - 1), 2) - 1);
    },
    easeInOutQuad: function(pos) {
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 2);
        return - 0.5 * ((pos -= 2) * pos - 2);
    },
    easeInCubic: function(pos) {
        return Math.pow(pos, 3);
    },
    easeOutCubic: function(pos) {
        return (Math.pow((pos - 1), 3) + 1);
    },
    easeInOutCubic: function(pos) {
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 3);
        return 0.5 * (Math.pow((pos - 2), 3) + 2);
    },
    easeInQuart: function(pos) {
        return Math.pow(pos, 4);
    },
    easeOutQuart: function(pos) {
        return - (Math.pow((pos - 1), 4) - 1)
    },
    easeInOutQuart: function(pos) {
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 4);
        return - 0.5 * ((pos -= 2) * Math.pow(pos, 3) - 2);
    },
    easeInQuint: function(pos) {
        return Math.pow(pos, 5);
    },
    easeOutQuint: function(pos) {
        return (Math.pow((pos - 1), 5) + 1);
    },
    easeInOutQuint: function(pos) {
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 5);
        return 0.5 * (Math.pow((pos - 2), 5) + 2);
    },
    easeInSine: function(pos) {
        return - Math.cos(pos * (Math.PI / 2)) + 1;
    },
    easeOutSine: function(pos) {
        return Math.sin(pos * (Math.PI / 2));
    },
    easeInOutSine: function(pos) {
        return ( - .5 * (Math.cos(Math.PI * pos) - 1));
    },
    easeInExpo: function(pos) {
        return (pos == 0) ? 0 : Math.pow(2, 10 * (pos - 1));
    },
    easeOutExpo: function(pos) {
        return (pos == 1) ? 1 : -Math.pow(2, -10 * pos) + 1;
    },
    easeInOutExpo: function(pos) {
        if (pos == 0) return 0;
        if (pos == 1) return 1;
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(2, 10 * (pos - 1));
        return 0.5 * ( - Math.pow(2, -10 * --pos) + 2);
    },
    easeInCirc: function(pos) {
        return - (Math.sqrt(1 - (pos * pos)) - 1);
    },
    easeOutCirc: function(pos) {
        return Math.sqrt(1 - Math.pow((pos - 1), 2))
    },
    easeInOutCirc: function(pos) {
        if ((pos /= 0.5) < 1) return - 0.5 * (Math.sqrt(1 - pos * pos) - 1);
        return 0.5 * (Math.sqrt(1 - (pos -= 2) * pos) + 1);
    },
    easeOutBounce: function(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 + .75);
        } else if (pos < (2.5 / 2.75)) {
            return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
        } else {
            return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
        }
    },
    easeInBack: function(pos) {
        var s = 1.70158;
        return (pos) * pos * ((s + 1) * pos - s);
    },
    easeOutBack: function(pos) {
        var s = 1.70158;
        return (pos = pos - 1) * pos * ((s + 1) * pos + s) + 1;
    },
    easeInOutBack: function(pos) {
        var s = 1.70158;
        if ((pos /= 0.5) < 1) return 0.5 * (pos * pos * (((s *= (1.525)) + 1) * pos - s));
        return 0.5 * ((pos -= 2) * pos * (((s *= (1.525)) + 1) * pos + s) + 2);
    },
    elastic: function(pos) {
        return - 1 * Math.pow(4, -8 * pos) * Math.sin((pos * 6 - 1) * (2 * Math.PI) / 2) + 1;
    },
    swingFromTo: function(pos) {
        var s = 1.70158;
        return ((pos /= 0.5) < 1) ? 0.5 * (pos * pos * (((s *= (1.525)) + 1) * pos - s)) : 0.5 * ((pos -= 2) * pos * (((s *= (1.525)) + 1) * pos + s) + 2);
    },
    swingFrom: function(pos) {
        var s = 1.70158;
        return pos * pos * ((s + 1) * pos - s);
    },
    swingTo: function(pos) {
        var s = 1.70158;
        return (pos -= 1) * pos * ((s + 1) * pos + s) + 1;
    },
    bounce: function(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 + .75);
        } else if (pos < (2.5 / 2.75)) {
            return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
        } else {
            return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
        }
    },
    bouncePast: function(pos) {
        if (pos < (1 / 2.75)) {
            return (7.5625 * pos * pos);
        } else if (pos < (2 / 2.75)) {
            return 2 - (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
        } else if (pos < (2.5 / 2.75)) {
            return 2 - (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
        } else {
            return 2 - (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
        }
    },
    easeFromTo: function(pos) {
        if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 4);
        return - 0.5 * ((pos -= 2) * Math.pow(pos, 3) - 2);
    },
    easeFrom: function(pos) {
        return Math.pow(pos, 4);
    },
    easeTo: function(pos) {
        return Math.pow(pos, 0.25);
    },
    linear: function(pos) {
        return pos
    },
    sinusoidal: function(pos) {
        return ( - Math.cos(pos * Math.PI) / 2) + 0.5;
    },
    reverse: function(pos) {
        return 1 - pos;
    },
    mirror: function(pos, transition) {
        transition = transition || tween.sinusoidal;
        if (pos < 0.5) return transition(pos * 2);
        else return transition(1 - (pos - 0.5) * 2);
    },
    flicker: function(pos) {
        var pos = pos + (Math.random() - 0.5) / 5;
        return tween.sinusoidal(pos < 0 ? 0 : pos > 1 ? 1 : pos);
    },
    wobble: function(pos) {
        return ( - Math.cos(pos * Math.PI * (9 * pos)) / 2) + 0.5;
    },
    pulse: function(pos, pulses) {
        return ( - Math.cos((pos * ((pulses || 5) - .5) * 2) * Math.PI) / 2) + .5;
    },
    blink: function(pos, blinks) {
        return Math.round(pos * (blinks || 5)) % 2;
    },
    spring: function(pos) {
        return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp( - pos * 6));
    },
    none: function(pos) {
        return 0
    },
    full: function(pos) {
        return 1
    }
}

转自：http://www.cnblogs.com/sky000/archive/2010/10/14/1851274.html

小于___
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯JS缓动函数
04-09
纯JS缓动函数
wave:Javascript 动画缓动函数
06-28
有两种方法可以获得缓动函数 按名字： var easing = wave ( 'easeInCubic' ) ; 通过贝塞尔点： var easing = wave ( [ 0 , 1 ] ) ; // or var easing = wave ( [ .54 , .15 , .42 , .83 ] ) ; // or even more ...
常用动画缓动函数js
qq_40765480的博客
10-27 1027
常用缓动函数，JavaScript实现
js缓动函数
weixin_30402085的博客
05-28 154
公式一： var Tween = { Linear: function(t, b, c, d) { return c * t / d + b; }, Quad: { easeIn: function(t, b, c, d) { return c * (t /= d) * t + b; ...
JavaScript缓动函数浅谈
weixin_30781631的博客
03-13 499
前段时间的一个周末，自己在家看jQuery源码解析的文章，动手写了一个粗糙的模仿jQuery的animate方法的一个插件，也顺带了解了animate方法有用到的缓动函数。因此以下内容就是基于本次练手的一些见解。 缓动函数的概念 缓动函数并不是从JavaScript这个语言发展出来的，而是从其他可以实现动画的语言搬运过来的，例如Flash。因为这只是个纯函数，所以在语言当中迁移也很容易。...
JavaScript 动画缓动函数
jpmoney的博客
10-23 495
JavaScript 动画缓动函数。
缓动函数requestAnimationFrame 更好的实现浏览器经动画
09-05
这个函数的主要目的是优化动画性能，减少不必要的重绘和回流操作，从而提高用户体验，并且在用户切换标签页或设备处于非活动状态时智能地暂停动画，节省系统资源。 **requestAnimationFrame 的工作原理** `...
easiness:单参数缓动函数
06-09
easiness是一组“纯”缓动函数，旨在处理域和范围0..1 - 单数输入，单数输出。 十分简单。 如果您发现自己需要在其他值之间进行插值，则easiness的每个函数都提供了一个.mapped()方法来派生另一个可以映射您想要的...
reanimated-easing:在“ React Native Reanimated”中使用缓动函数，然后使用“ easings.net”
04-12
在使用easing函数，然后使用 。 安装 $ yarn add reanimated-easing 用法 import Animated from 'react-native-reanimtaed' import { Easing } from 'reanimated-easing' const { Clock , Value , set , cond , ...
EaseJS:EaseJS 一个简洁的 JavaScript 库
06-21
easy.js 一个简洁的 JavaScript 库 easy.js 是一个简洁易用的 JavaScript 库，包含了核心库和组件库。核心库有符合 W3C 标准的 CSS3 选择器，常用的 DOM 操作方法，增强的动画模块，支持 promise 模式的 ajax 模块以及优雅便捷的事件处理模块。easy.js 还集成了模块加载器，遵循 AMD 的模块化规范。 组件库是基于核心库开发的，目前为止有一些最常见的组件诸如 Drag(对话框)、Switchable(轮播)、Lazyload(延迟加载)、Dialog(对话框)等等，后续还会继续开发更多的常用组件。 网站 easy.js 为什么能提高你的开发效率？ easy.js 为什么能提高你的开发效率？ 让 DOM 操作化繁为简，不再担心浏览器的兼容 模块化能更好的组织和管理代码 组件使用简单，便于扩展 开源协议 easy.js 遵循 MIT
JavaScript封装缓动动画函数
kuke_kuke的博客
08-16 662
本文将从封装缓动动画的以下几个部分进行封装（1、单个属性，2、多个属性，3、缓动框架之回调函数，4、缓动框架之层级与透明度）首先：获取元素样式的兼容方式getStyker //获取任意类型的CSS样式的属性值
JS动画函数——缓动动画
weixin_44145894的博客
01-06 261
【代码】JS动画函数——缓动动画。
Javascript中缓动动画函数实例
Harryの心阁
02-20 737
scroll系列属性 scrollTop/scrollLeft/ScrollWidth/scrollHeight overflow:auto 使滑动自动显示 页面被卷去的头部:可以通过window.pageYOffset获得如果是被卷的是左window.pageXoffset 注意，元素被卷去的头部是elent.scollTop ,如果是页面被卷去的头部则是window.pageYoffset <body> <style> * {
JS封装缓动动画效果函数
qq_15034541的博客
12-14 188
JS封装缓动动画效果函数 JS动画效果原理:添加一个定时器，每多少毫秒调用一次可以使盒子运动一次 // 封装缓动动画函数，两个参数第一个缓动对象，第二个目标位置 function animate(object, target) { clearInterval(object.time);//清除之前调用的定时器 object.time = setInterval(function () { //步长值:(目标位置
原生JS——缓动动画函数封装（任意个属性、层级、透明度及回调函数）
薛增辉的博客
11-20 480
function animate(element, json, fn) { clearInterval(element.timeId); element.timeId = setInterval(function () { var flag = true;//假设全部到达目标 for (var attr in json) { ...
JavaScript——封装缓动函数案例
weixin_46360905的博客
08-18 139
<style> #demo{ width: 100px; height: 100px; background-color: #ffdfef; position: absolute; } </style> </head> <body> <input id="btn" type="button" value="点我鸭~"/&
js动画函数封装（缓动动画）
刘珈佚的博客
08-25 262
js动画函数封装 //obj:目标对象 target:目标位置 callback回调函数 function animate(obj, target, callback) { // console.log(callback); callback=function(){} 调用的时候 callback() clearInterval(obj.timer); obj.timer = setInterval(function() { //（目标值 - 现在的位置） / 1
animate缓动动画函数封装及使用
最新发布
08-21
常见的缓动函数有线性缓动、弹性缓动、加速缓动等，根据需求选择合适的函数。 最后，执行动画效果，通过设置定时器来改变元素的属性值，直到达到目标属性或动画持续时间结束。在每一帧更新元素属性值时，要使用这些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小于___

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值