JavaScript twenn动画代码思路

🌙
手机阅读
本文目录结构

代码基础

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>tween动画的基础支持</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            background: orange;
            position: absolute;
            top: 200px;
            left: 100px;
            box-shadow: 5px 5px 10px blue;
            border-radius: 10px;
            border: 2px solid #ff0000;
        }
    </style>
</head>
<body>
<div id="div1">朱安邦</div>
</body>
</html>
<script>
    var oDiv=document.getElementById("div1");
    oDiv.onclick = move;

    /*    动画需要的参数
        - 起始位置:begin;
        - 一共需要移动的juice:change
        - 当前走的时间:times
        - 所需的总时间:duration
          步长:interval:运动是一步一步走的,也就是单步时间,可以通过控制单步的时间,来控制运动的效果;时间要求的短,步子就要迈大点,时间要求的长,就走小碎步
        */

    /*动画的初始条件*/
    var begin=oDiv.offsetLeft;//起点
    var target=600;//重点
    var change=target-begin;//总的移动距离=目的地-其实的位置;
    var times=0;
    var duration=1000;//总的时间;
    var nInterval=13;//一步走多少;步长;


    function move(){
        var timer=window.setTimeout(move,nInterval);
        if(times<duration){//时间到,就停止
            times+=nInterval;
            oDiv.style.left=linear(begin,change,times,duration)+"px";
        }else{
            oDiv.style.left=target+"px";
            clearTimeout(timer);
        }
    }
    /* 匀速运动公式:当前的位置=起始位置+总距离*(当前走的时间/所需要走的时间)*/
    function linear(begin,change,times,duration){
        return begin+change*(times/duration);
    }
</script>

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>tween动画的基础支持</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            background: orange;
            position: absolute;
            top: 200px;
            left: 100px;
            box-shadow: 5px 5px 10px blue;
            border-radius: 10px;
            border: 2px solid #ff0000;
        }
    </style>
</head>
<body>
<div id="div1">JavaScript</div>
</body>
</html>
<script>
    var oDiv=document.getElementById("div1");
    oDiv.onmouseover = function(){
        animate(this,"height",300,1000);
    };
    function animate(ele,attr,target,duration){
        var times=0;
        var begin=setCss(ele,attr);//起点
        var change=target-begin;//总的移动距离=目的地-其实的位置;
        var nInterval=13;//一步走多少;步长;
        function move(){
            times+=nInterval;
            if(times<duration){//时间到,就停止
                ele.style[attr]=begin+change*(times/duration)+"px";
            }else{
                ele.style[attr]=target+"px";
                clearInterval(timer);
            }
        }
        var timer=window.setInterval(move,nInterval);
    };
    function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
        if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
            var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
            var flag="getElementsByClassName" in document;
            var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
            return !reg.test(attr) ? parseFloat(value) : value;
        } else{
            switch (attr) {
                case "opacity":
                    curEle["style"][attr] = value;
                    curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                    break;
                case "zIndex":
                    curEle["style"][attr] = value;
                    break;
                default:
                    curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
            }
        }
    };
</script>

代码-透明度1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>tween动画的基础支持</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            background: orange;
            position: absolute;
            top: 200px;
            left: 100px;
            box-shadow: 5px 5px 10px blue;
            border-radius: 10px;
            border: 2px solid #ff0000;
            opacity: 0.5;
            filter:alpha(opacity=50);
        }
    </style>
</head>
<body>
<div id="div1">朱安邦</div>
</body>
</html>
<script>
    var oDiv=document.getElementById("div1");
    oDiv.onclick = function(){
        animate(this,"opacity",0.2,1000);
    };
    function animate(ele,attr,target,duration){
        var times=0;
        var begin=setCss(ele,attr);//起点
        var change=target-begin;//总的移动距离=目的地-其实的位置;
        var nInterval=13;//一步走多少;步长;
        console.log("开始:"+begin);
        console.log("重点:"+target);
        var timer=window.setInterval(move,nInterval);
        function move(){
            times+=nInterval;
            if(times>=duration){
                if(attr==="opacity"){/*如果是opacity,需要用到小数*/
                    ele.style[attr]=target;
                    ele.style["filter"] = "alpha(opacity=" + target*100 + ")";
                    clearInterval(timer);
                }else{
                    ele.style[attr]=target+"px";
                    clearInterval(timer);
                }

            }else{
                if(attr==="opacity"){
                    ele.style[attr]=begin+change*(times/duration);
                    ele.style["filter"] = "alpha(opacity=" + (begin+change*(times/duration))*100 + ")";
                }else{
                    ele.style[attr]=begin+change*(times/duration)+"px";
                }
            }
        }
    };

    function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
        if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
            var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
            var flag="getElementsByClassName" in document;
            var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
            return !reg.test(attr) ? parseFloat(value) : value;
        } else{
            switch (attr) {
                case "opacity":
                    curEle["style"][attr] = value;
                    curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                    break;
                case "zIndex":
                    curEle["style"][attr] = value;
                    break;
                default:
                    curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
            }
        }
    };
</script>

代码-透明度2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>tween动画的基础支持</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            background: orange;
            position: absolute;
            top: 0px;
            left: 0px;
            box-shadow: 5px 5px 10px blue;
            border-radius: 10px;
            border: 2px solid #ff0000;
            opacity: 0.9;
            filter:alpha(opacity=90);
        }
    </style>
</head>
<body>
<div id="div1">朱安邦</div>
</body>
</html>
<script>
    var oDiv=document.getElementById("div1");
    oDiv.onclick = function(){
        if(!this.timer){
            animate(this,"left",500,1000,toGreen);
        }
    };

    function animate(ele,attr,target,duration,fnCallback){
        var times=0;
        var begin=setCss(ele,attr);//起点
        var change=target-begin;//总的移动距离=目的地-其实的位置;
        var nInterval=13;//一步走多少;步长;
        if(change===0){//解决无效运动,changge=begin;
            if(typeof fnCallback=="function"){
                fnCallback.call(ele);
                return;
            }
        };

        clearInterval(ele.timer);
        ele.timer=window.setInterval(move,nInterval);
        function move(){
            times+=nInterval;
            if(times>=duration){
                setCss(ele,attr,target);
                clearInterval(ele.timer);
                ele.timer=null;//动画停止的时候,变为null;这样就成为elel这个元素是否在运动的判断依据了;
                /*动画行为结束*/
                if(typeof fnCallback=="function"){
                    fnCallback.call(ele);
                }
            }else{
                var targetNumber=begin+change*(times/duration);
                setCss(ele,attr,targetNumber);
            }
        }
    };
    function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
        if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
            var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
            var flag="getElementsByClassName" in document;
            var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
            return !reg.test(attr) ? parseFloat(value) : value;
        } else{
            switch (attr) {
                case "opacity":
                    curEle["style"][attr] = value;
                    curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                    break;
                case "zIndex":
                    curEle["style"][attr] = value;
                    break;
                default:
                    curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
            }
        }
    };

    //回调方法;
    function toGreen(){
        this.style.backgroundColor="green"
    };
    function fnRight(){
        animate(this,"left",600,1000,fnDown);
    }
    function fnDown(){
        animate(this,"top",600,1000,fnLeft);
    }
    function fnLeft(){
        animate(this,"left",0,1000,fnUp);
    }
    function fnUp(){
        animate(this,"top",0,1000,fnRight);
    }
</script>

代码-多方向封装

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>tween动画的基础支持</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            background: orange;
            position: absolute;
            top: 0px;
            left: 0px;
            box-shadow: 5px 5px 10px blue;
            border-radius: 10px;
            border: 2px solid #ff0000;
            opacity: 0.4;
            filter:alpha(opacity=40);
        }
    </style>
</head>
<body>
<div id="div1">朱安邦</div>
</body>
</html>
<script>
    var oDiv=document.getElementById("div1");
    var jsonStr={
        "left":500,
        top:400,
        "width":"200",
        "height":"200",
        "opacity":"0.8"
    };
    oDiv.onclick = function(){
        if(!this.timer){
            starMove(this,jsonStr,1000,toGreen);
        }
    };
    function starMove(ele,jsonStr,duration,fnCallback){
        var oBegin={};//不同方向的起始值;
        var oChange={};//不同方向的运动距离;
        var booleanNum=0;
        for(var attr in jsonStr){
            var begin=setCss(ele,attr);
            var target=jsonStr[attr];
            var change=target-begin;
            if(change){
                oBegin[attr]=begin;
                oChange[attr]=change;
                booleanNum++;
            }
        }
        if(booleanNum===0){
            if(typeof fnCallback=="function"){
                fnCallback.call(ele);
            }
            return;
        }else{
            var interval=13;
            var times=0;
            clearInterval(ele.timer);
            ele.timer=window.setInterval(move,interval);
            function move(){
                times+=interval;
                if(times>=duration){
                    clearInterval(ele.timer);
                    ele.timer=null;
                    for(var attr in jsonStr){
                        setCss(ele,attr,jsonStr[attr]);
                    }
                    if(typeof fnCallback=="function"){
                        fnCallback.call(ele);
                    }
                }else{
                    for(var attr in oChange){
                        var targetNumber=oBegin[attr]+oChange[attr]*(times/duration);
                        setCss(ele,attr,targetNumber);
                    }
                }
            }
        }
    };

    //回调方法;
    function toGreen(){
        setCss(this,"backgroundColor","green");
    };
    function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;att是attribute的缩写;
        if(typeof value==="undefined"){//如果有第三个参数,就是设置Css;如果没有就是获取Css;
            var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
            var flag="getElementsByClassName" in document;
            var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
            return !reg.test(attr) ? parseFloat(value) : value;
        } else{
            switch (attr) {
                case "opacity":
                    curEle["style"][attr] = value;
                    curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                    break;
                case "float":
                    curEle["style"].cssFloat = value;
                    curEle["style"].styleFloat = value;
                    break;
                case "backgroundColor":
                    curEle["style"][attr] = value;
                    break;
                case "zIndex":
                    curEle["style"][attr] = value;
                    break;
                default:
                    curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
            }
        }
    };

</script>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了