Df.717 2024-04-06 21:59 采纳率: 28.6%
浏览 2

时间版运动框架(整合版)封装,运行不起来

时间版运动框架(整合版)封装,运行不起来,这是为啥?
检查了代码,也无报错
求解!!

这是html代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>时间版运动框架整合</title>
  <style>
    *{margin:0;padding:0;}
    #box{
        width:100px;
        height:100px;
        margin-left:100px;
        background:red;
    }
  </style>
 </head>
 <body>
  <div id="box"></div>
  <script type="text/javascript" src="move.js"></script>
  <script type="text/javascript">
    var oBox=document.getElementById("box");
    move(oBox,{
        marginLeft:"800px",
        width:"200px",
        height:"200px"
    },3000,"linear");
  </script>
 </body>
</html>


这是js代码

function move(obj,mJson,time,cv){
    var startVal={};
    var endVal={};
    var startTime=new Date();
    cv=cv||"linear";

    for (var key in mJson)
    {
        startVal[key]=parseInt(getStyle(obj,key));
        endVal[key]=parseInt(mJson[key]);
    };
    
    var timer=setInterval(function(){
        var t=new Date()-startTime;
        var d=time;
        if (t>=d)
        {
            t=d;
            clearInterval(timer);
        }
        
        for (var key in mJson)
        {
            var b=startVal[key];
            var c=endVal-b;
            var s=Tween[cv](t,b,c,d);
            obj.style[key]=s+"px";
        }
    },13)

    function getStyle(obj,attr){
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    };
};
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;
    }
};

  • 写回答

4条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-04-06 21:59
    关注

    引自免费微信小程序:皆我百晓生

    好的,我可以尝试解决这个问题。首先,我们需要确认一下代码是否有任何语法错误,或者是因为JavaScript解释器出现问题导致的。

    让我们从HTML部分开始看。

    <div id="box"></div>
    

    这个部分看起来没有明显的错误,但我建议在JavaScript部分添加一个onload事件监听器,以便在加载完成后对盒子进行一些操作。

    document.getElementById("box").addEventListener("load", function() {
        move(oBox, {}, 3000, "linear");
    });
    

    然后,在move()函数中,我们需要注意一些关键参数,包括 cv(选择的速度类型),mJson(时间版本运动框架的数据结构)。如果你需要修改这些值,请提供相应的数据结构。我们可以使用以下代码获取当前容器中的时间和位置:

    var boxObj = document.getElementById("box");
    var oBox = boxObj;
    var startVal = {};
    var endVal = {};
    var startTime = new Date();
    
    for (var key in mJson) {
        startVal[key] = parseInt(getStyle(boxObj,key));
        endVal[key] = parseInt(mJson[key]);
    }
    

    接下来,我们将使用setInterval函数更新盒子的位置,并根据速度类型对时间进行适当的调整。

    var intervalId = setInterval(move(oBox, {}, 3000, "linear");
    
    function move(obj, mJson, time,cv){
        var startVal={};
        var endVal={};
        var startTime=new Date();
        cv=cv||"linear";
    
        for (var key in mJson)
        {
            startVal[key]=parseInt(getStyle(obj,key));
            endVal[key]=parseInt(mJson[key]);
        };
    
        var timer=setInterval(function(){
            var t=new Date()-startTime;
            var d=time;
            if (t>=d)
            {
                t=d;
                clearInterval(timer);
            }
            
            for (var key in mJson)
            {
                var b=startVal[key];
                var c=endVal-b;
                var s=TWEEN[cv](t,b,c,d);
                obj.style[key]=s+"px";
            }
        },13)
    
        function getStyle(obj,attr){
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
        };
    };
    
    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+t*b;
            }
            return -c/2 * ((--t)*(t-2) - 1) + b;
        },
        easeInStrong: function(t, b, c, d){  //加加速曲线
            return c*(t/=d)*t*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+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*npow(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*\pi) * Math.asin (c/a);
            }
            if (t < 1) {
                return - 0.5*(a*npow(2,10*(t-=1)) * 
                        Math.sin( (t*d-s)*(2*\pi)/p )) + b;
            }
            return a*npow(2,-10*t) * Math.sin( (t*d-s)*(2*\pi)/p肤色) + c + b;
        },    
        elasticBoth: function(t, b, c, d, a, p){
            if (t === 0) {
                return b;
            }
            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) + 1) + 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;
        }
    };
    

    让我们继续检查CSS部分。可以看到,没有包含必要的元素,因此可以删除它们并修复它们。这将导致样式正确。

    #box{
        width:100px;
        height:100px;
    }
    

    以上是一个基本的解决方案。您可能还需要查看其他代码以确定是否存在其他问题,例如是否存在循环引用或其他难以处理的情况。如果您有更多细节,我很乐意为您提供帮助。

    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 4月6日