js动画多物体运动

最新推荐文章于 2022-09-25 22:08:41 发布

歪大梨

最新推荐文章于 2022-09-25 22:08:41 发布

阅读量127

点赞数

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_64037609/article/details/126919762

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <script src="../../../common.js"></script>
    <script>
        function bufferMove(ele,sty,end) {
            clearInterval(ele.timer);
            //判断：当前样式 是不是 透明度 opacity 如果是 就单独处理
            if(sty=="opacity"){
                var start = getStyle(ele,sty)*100
                end *= 100
            }else{
                var start = parseInt(getStyle(ele,sty));//1000
            }
            
            ele.timer = setInterval(function () {
                var step = (end - start) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                start += step;
                if (start == end) {
                    clearInterval(ele.timer);
                }
                //设置样式的时候 判断 如果是透明度 需要缩小100倍
                if(sty=="opacity"){
                    ele.style[sty] = start/100
                }else{
                    ele.style[sty] = start + 'px'
                }
                
            }, 40)
        }
        //鼠标移入div 宽度变500  鼠标移出 宽度变100
        var divs = document.querySelectorAll("div");
        for(var i=0; i<divs.length; i++){
            divs[i].onmouseover = function(){
                bufferMove(this,"width",500);
            }
            divs[i].onmouseout = function(){
                bufferMove(this,"width",100);
            }
        }
    </script>
</body>
</html>

common.js

// 获取元素样式兼容
function getStyle(ele,sty) {
    if(ele.currentStyle){
        return ele.currentStyle[sty]; 
    }else{
        return getComputedStyle(ele)[sty];
    }
    
}

// js动画兼容
var timer=null;
function animation(ele,sty,end,step) {
    clearInterval(timer);
    step =parseInt(getStyle(ele,sty)) < end? step:-step
    var start =parseInt(getStyle(ele,sty));
    timer=setInterval(function(){
        start+=step;
        if (step>0&&start>=end || step<0&&start<=end) {
            clearInterval(timer);
            start=end;
        }
        ele.style[sty]=start+"px";
        
        },20)
}

// 计算part出现的次数
function count(string,part) {
    var idx = 0;
    var n = 0;
    while (string.indexOf(part, idx) != -1) {
        n++;
        //更新循环变量
        idx = string.indexOf(part, idx) + 1
    }
    return n;
}

// 事件的绑定
function bind(ele,event,fn){
    if(ele.addEventListener==undefined){
        ele.attachEvent("on"+event,fn)
    }else{
        ele.addEventListener(event,fn)
    }
    //提取参数 元素 事件名 处理函数
}

// 解绑事件
function unBind(ele,event,fn){
    if(ele.removeEventListener==undefined){
        ele.detachEvent("on"+event,fn);
    }else{
        ele.removeEventListener(event,fn);
    }
}

// 拖拽动画
function drag(ele) {
    ele.onmousedown=function() {
    // 判断是否在ie低版本中
    if(ele.setCapture!=undefined) {
        ele.setCapture();
    }
    // 获取减去的距离
    var html=document.documentElement;
    var x=event.clientX+html.scrollLeft-ele.offsetLeft;
    var y=event.clientY+html.scrollTop-ele.offsetTop;
    document.onmousemove=function(){
        
        var px=event.clientX+html.scrollLeft-x;
        var py=event.clientY+html.scrollTop-y;
        ele.style.left=px+"px";
        ele.style.top=py+"px";

    }
    // 阻止默认行为
    return false;
}
ele.onmouseup=function(){
    document.onmousemove=null;
    if(ele.setCapture!=undefined) {
        ele.releaseCapture();
    }
}
}

// 封装缓存动画函数
function bufferMove1(ele,sty,end) {
    clearInterval(ele.timer);
    //判断：当前样式 是不是 透明度 opacity 如果是 就单独处理
    if(sty=="opacity"){
        var start = getStyle(ele,sty)*100
        end *= 100
    }else{
        var start = parseInt(getStyle(ele,sty));
    }
    
    ele.timer = setInterval(function () {
        var step = (end - start) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        start += step;
        if (start == end) {
            clearInterval(timer);
        }
        //设置样式的时候 判断 如果是透明度 需要缩小100倍
        if(sty=="opacity"){
            ele.style[sty] = start/100
        }else{
            ele.style[sty] = start + 'px'
        }
        
    }, 40)
}

// 多属性同时运动
function bufferMove(ele,option) {
    clearInterval(ele.timer);
    var flag;
    //1.设置定时器
    ele.timer = setInterval(function(){
        //声明一个变量 记录 当前所有动画是否都完成的状态
        flag = "都到了";
        //编写所有样式动画 都往前走一步的代码
        //1.循环要添加动画的所有样式
        for(var key in option){
            //key是属性名        option[key]是属性值
            //要添加动画的样式名  动画的终点值
            //1.获取动画的两要素
            if(key=="opacity"){
                var start = getStyle(ele,key)*100;
                var end = option[key]*100;
            }else{
                var start = parseInt(getStyle(ele,key));
                var end = option[key];
            }
            //计算步长
            var step = (end-start)/10;
            step = step>0 ? Math.ceil(step) : Math.floor(step);
            //编写走一步的代码
            start += step;
            //判断 是否有人没到终点
            if(start!=end){
                flag = "没到"
            }
            if(key=="opacity"){
                ele.style[key] = start/100
            }else{
                ele.style[key] = start+"px";
            }
        }  
        if(flag=="都到了"){
            clearInterval(ele.timer);
        }
    },30)
}

// 递归实现数组的快速排序算法
function quickSort(arr) {
    if(arr.length<=1){
        return arr;
    }
    var idx=Math.ceil(arr.length/2);
    var center=arr.splice(idx,1)[0];
    var less=[];
    var more=[];
    for(var i=0;i<arr.length;i++) {
        if(arr[i]<center) {
            less.push(arr[i]);
        }else{
            more.push(arr[i]);
        }
    }
    return quickSort(less).concat(center,quickSort(more));

}


//节流函数
function throtling(fn,wait){
    var flag = "能";//声明一个变量 记录本次触发的事件能否执行的状态 假设为能执行。
    //这里返回的函数 也是一会用来做事件处理函数的
    return function(){
        if(flag=="能"){
            //证明本次触发的事件 我们能执行
            fn()
            flag = "不能"
            //控制频率
            setTimeout(function(){
                flag = "能"
            },wait)
        }
    }
}