JS时间板运动框架(Twnne)

最新推荐文章于 2021-08-04 17:13:54 发布
最新推荐文章于 2021-08-04 17:13:54 发布
阅读量529 收藏
点赞数
分类专栏： javasctipt js个人框架 文章标签： 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/babybk/article/details/51273350
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        #box{
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
            left: 30px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        var oBox = document.getElementById('box');

        var getStyle = function( obj , attr ){
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
        };

        var move = function (obj,arrt,time,cv,fn) {
            var This = this;
            var startTime = new Date();
            //var startVal = parseInt(getStyle(obj,arrt));
            var cv = cv?cv:"elasticOut";
            var startVal = {};
            for(var i in arrt){
                startVal[i] = parseInt( getStyle( obj , i ) );
            }

            var timer = setInterval(function () {
                var t = new Date() - startTime;     //动画运行多久了
                //var b = startVal;                   //初始值
                //var c = parseInt(target) - b;       //变化量
                var d = time;                       //持续时间

                if (t>=d){
                    t = d;
                    clearInterval(timer);
                    fn && fn.call( This );
                }

                for(var key in startVal){

                    var b = startVal[key];

                    var c = parseInt( arrt[key] ) - b;


                    var r = Tween[cv](t,b,c,d);

                    obj.style[key] = r + "px";
                }

            },13);
        };


        var Tween = {
            linear: function (t, b, c, d){  //匀速
                return c*t/d + b;
            },
            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;
            },
            easeBoth: function(t, b, c, d){  //加速减速曲线
                if ((t/=d/2) < 1) {
                    return c/2*t*t + b;
                }
                return -c/2 * ((--t)*(t-2) - 1) + b;
            },
            easeInStrong: function(t, b, c, d){  //加加速曲线
                return c*(t/=d)*t*t*t + b;
            },
            easeOutStrong: function(t, b, c, d){  //减减速曲线
                return -c * ((t=t/d-1)*t*t*t - 1) + b;
            },
            easeBothStrong: 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;
            },
            elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线（弹动渐入）
                if (t === 0) {
                    return b;
                }
                if ( (t /= d) == 1 ) {
                    return b+c;
                }
                if (!p) {
                    p=d*0.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;
            },
            elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线（弹动渐出）
                if (t === 0) {
                    return b;
                }
                if ( (t /= d) == 1 ) {
                    return b+c;
                }
                if (!p) {
                    p=d*0.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;
            },
            elasticBoth: function(t, b, c, d, a, p){
                if (t === 0) {
                    return b;
                }
                if ( (t /= d/2) == 2 ) {
                    return b+c;
                }
                if (!p) {
                    p = d*(0.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 - 0.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 )*0.5 + c + b;
            },
            backIn: function(t, b, c, d, s){     //回退加速（回退渐入）
                if (typeof s == 'undefined') {
                    s = 1.70158;
                }
                return c*(t/=d)*t*((s+1)*t - s) + b;
            },
            backOut: function(t, b, c, d, s){
                if (typeof s == 'undefined') {
                    s = 3.70158;  //回缩的距离
                }
                return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
            },
            backBoth: function(t, b, c, d, s){
                if (typeof 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;
            },
            bounceIn: function(t, b, c, d){    //弹球减振（弹球渐出）
                return c - Tween['bounceOut'](d-t, 0, c, d) + b;
            },
            bounceOut: 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 + 0.75) + b;
                } else if (t < (2.5/2.75)) {
                    return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
                }
                return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
            },
            bounceBoth: function(t, b, c, d){
                if (t < d/2) {
                    return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
                }
                return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
            }
        }




        move(oBox,{
            width:"400px",
            height:"400px",
            left:"400px"
        },3000);


    </script>
</body>
</html>
babybk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现时间版运动框架
Della_UI的博客
11-20 866
前面有一个速度版的运动框架，但是如果不同属性的变化量不同的情况下，使用速度版运动框架会在运动过程中出现‘卡顿’一下的状况。而此时间版运动框架则不会有‘卡顿’情况出现。此时间版运动框架是基于tween算法的。 tween有4个参数： -t：current time（当前时间） -b：beginning value（初始值） -c： change in value（变化量） -d：du
JavaScript 日期处理类库 示例vue框架
兴趣释然
04-29 76
可以进入官网 深入研究。
javascript moment.js的使用
ddxr5515的博客
07-08 237
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>moment的使用</title> <script src="js/moment.js"></script> &l...
原生JS时间版运动框架
秀玉轩晨的博客
06-22 361
利用JS时间版运动框架知识做出一个小例子&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; body,
js日历框架
04-11
js日历 框架 ,实用的js脚本框架，下载直接可以运行，内含有两套不同的实现方式，有详细的文档说明哦
前端JavaScript运动框架move.js
11-12
前端JavaScript运动框架move.js,有需要的友友可以自行下载使用。
前端JavaScript运动框架Tween.js
11-12
前端JavaScript运动框架Tween.js
JS运动特效之完美运动框架实例分析
10-18
本篇文章将探讨“JS运动特效之完美运动框架实例分析”，着重讲解如何处理元素运动中的属性检测与判断，以确保所有设定的运动都能正确完成。 在JavaScript中，我们通常使用定时器（`setInterval`）来实现动画效果，...
基于JavaScript的项目框架模板
02-23
通过选择适合的框架和模板，开发者可以更快地进入开发状态，减少配置和调试环境的时间，从而更专注于核心功能的实现。对于初学者，使用这些模板是学习和理解现代JavaScript开发流程的有效途径。而对于经验丰富的...
javascript 缓冲运动框架的实现
10-19
JavaScript 缓冲运动框架是一种用于实现平滑动画效果的技术，尤其在网页动态效果设计中非常常见。这种框架通过控制元素的运动速度，使得物体在移动过程中不会突然加速或减速，而是像真实世界中的物体一样有一个缓冲...
前端框架时间插件
05-16
bootstrap使用的第三方时间插件，包含样式和js
twn:轻量级 Javascript 动画库
07-18
twn.js： ##A 轻量级 Javascript/CSS3 补间库 twnjs 的主要目标是减小文件大小，同时使网络动画师能够对最常用的补间属性进行补间。 这是文件大小的紧凑性非常重要的理想选择，例如在 HTML5 横幅中。 示例用法 twn.to(el, 0.5, { x:500, ease:'quad-ease-in-out', delay:0.35, onComplete:myFunction, onCompleteParams:['foo','bar'] } ); 方法 至（） 函数到（目标，持续时间，属性）； 初始化并启动动画。 目标类型：DOM元素用于 twn 动画的 DOM 元素。 期间类型：号码动画的持续时间（以秒为单位）。 特性类型：对象要动画化的属性和值的对象以及完成的回调。 CSS 属性X 类型：号码要制作动画的 X 平移值是类型
表单验证+对话框+日期格式化+日期选择框+select美化js框架
09-05
表单验证+对话框+日期格式化+日期选择框+select美化js框架
dayjs
pumpkin_truck的博客
08-04 928
时间框架——Day.js 今天给大家推荐一个好用的时间框架，dayjs，一个轻量的处理时间和日期的 JavaScript 库。 在做这个项目以前我都没接触过这个框架，正在我用最元老的方法去完成对时间格式的转变和求时间间隔时，同事使用这个框架让我耳目一新。它和Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 简单地说，只要你会Moment.js，那么你就会Day.js! 但是我们知道的，Moment.js 的大小是200多k, Da
时间版运动框架
维克多噗噗的博客
03-26 298
关于运动 速度的运动 通过速度来控制元素的 位移 / 折叠 / 淡入淡出 时间的简单运动 通过时间来控制元素的 位移 / 折叠 / 淡入淡出(jQuery) 时间的运动 基于一些数学公式 以匀速运动例子==> 在路程的每一个点 速度都一样.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na
基于时间或速度的JS运动框架
bide_tootight的博客
03-29 301
JQuery要实现动画，那是相当的简单啊，现成的函数可以用。那么Javascript如何实现动画呢？哎呀，其实也是so easy啊，也许你没想过如何实现，因为JQuery太给力了、甚至CSS3就可以实现完美动画。今天就教教大家如何实现。实现原理是：动画嘛，不就是一帧一帧的变嘛，打个比方，div元素的width由300px变成400px，那就让它依次变化：305px、310px、315px、320p...
js-运动框架（时间版）
weixin_30616969的博客
11-18 90
周末的时候，在网上看了一篇教程，内容是说jquery的animate运动函数是如何实现的，看完之后自己就抽出了一些时间将之前的运动框架改了一下，改完之后发现效果非常好，而却运动形式也丰富了很多！ 代码如下： 1 //obj:运动对象，json：运动属性json格式，times：运动时间（不能大于间隔时间），fx：运动形式，fn：回掉函数 2 3 function ...
JS完整版运动框架、函数重载
不凡乃大的博客
05-03 287
1、完整版运动框架 函数重载： 函数名一样，参数列表不一样 加入Tween算法 /* * 运动框架封装 * 新增：运动完后变色，透明度 * call 回调函数 * 总共参数(5)： * obj 对象 * myjson 传入的json样式 * time 运动的时间 * tween 缓冲（Tween算法） * ...
js运动框架加速运动
最新发布
10-11
要在 JavaScript 中实现加速运动，可以使用定时器和逐帧动画的方式来逐步改变元素的位置或样式属性。下面是一个简单的示例代码： ```javascript function accelerateMove(element, targetX, targetY, duration) { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值