JS动画原理

　　通过CSS缓慢变化从而实现动画效果

获取css属性

　　Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

Demo box斜线运动

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box {

            width: 20px;

            height: 20px;

            background-color: black;

            position: absolute; /*必须要有定位才能实现动画效果*/

            left: 0;

            right: 0;

        }

    </style>

</head>

<body>

<div class="box"></div>

<script>

        var speedx = 3;  // 设置每次移距离

        var speedy = 3; // 设置每次移距离

        var dv = document.getElementsByClassName("box")[0]; // 获取要移动的元素 这里使用的是ClassName 所以需要索引取出element_obj

        function move(el) {  // 创建移动函数
            var currentleft = parseInt(window.getComputedStyle(el).left); //实时获取当前标签的left距离并转化为int类型

            var currenttop = parseInt(window.getComputedStyle(el).top); //实时获取当前标签的top距离并转化为int类型

            var left = currentleft + speedx;  //进行动态数据计算

            var top = currenttop + speedy; //进行动态数据计算

            el.style.left = `${left}px`; //通过style属性实时更改数据量

            el.style.top = `${top}px`;//通过style属性实时更改数据量

        }

    setInterval(function () {  //设置定时任务

        move(dv)

    },20)

    </script>

</body>

</html>

获取浏览器的宽/高

　　window.innerWidth

　　window.innerHeight

Demo box斜线运动边缘碰撞改良版

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box {

            width: 20px;

            height: 20px;

            background-color: black;

            position: absolute;

            left: 0;

            right: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div class="box"></div>

<script>

    var speedx = 3;

    var speedy = 3;

    var dv = document.getElementsByClassName("box")[0];

    function move(el) {

        var style = window.getComputedStyle(el);

        var currentleft = parseInt(style.left);

        var currenttop = parseInt(style.top);
　　　　 check_border_collision(el);

        var left = currentleft + speedx;

        var top = currenttop + speedy;

        el.style.left = `${left}px`;

        el.style.top = `${top}px`;

    }

    function check_border_collision(el) { // 矫正函数

        var style = window.getComputedStyle(el); // 获取box对象css属性

        var left = parseInt(style.left); // 获取当前左边距

        var top = parseInt(style.top); // 获取当前下距离

        var w = parseInt(style.width); // 获取元素宽度

        var h = parseInt(style.height); // 获取元素高度

        if (left < 0 || left > window.innerWidth - w) { // 判断条件 如果box左边距距离小于0 或者大于浏览器宽度-元素宽度

            left = 0;

            speedx *= -1; //反转移动

        }

        if (top < 0 || top > window.innerHeight - h) {// 判断条件 如果box上边距距离小于0 或者大于浏览器高度-元素高度

            top = 0;

            speedy *= -1; //反转移动

        }

    }

    setInterval(function () {

        move(dv); //调用移动函数

    }, 20)

</script>

</body>

</html>

Demo 两个box互相碰撞

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {

            overflow: hidden;

        }

        .box {

            width: 40px;

            height: 40px;

            background-color: black;

            position: absolute;

            left: 0;

            right: 0;

            overflow: hidden;

        }

        .box2 {

            width: 40px;

            height: 40px;

            background-color: black;

            position: absolute;

            left: 100px;

            right: 100px;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div class="box"></div>

<div class="box2"></div>

<script>

    var middleware_x;  // 声明中间变量 用于存放交换变量

    var middleware_y; // 声明中间变量 用于存放交换变量

    var dv1 = document.getElementsByClassName("box")[0]; // 获取要移动的元素 这里使用的是ClassName 所以需要索引取出element_obj

    var dv2 = document.getElementsByClassName("box2")[0];// 获取要移动的元素 这里使用的是ClassName 所以需要索引取出element_obj

    // 分别设置box横纵坐标移动速度

    dv1.speedx = 3;

    dv1.speedy = 5;

    dv2.speedx = 5;

    dv2.speedy = 3;

   // 移动函数

    function move(el) { // el 为element_obj

        var style = window.getComputedStyle(el); // 获取标签的css属性obj

        var currentleft = parseInt(style.left);

        var currenttop = parseInt(style.top);

        check_border_collision(el); // 调用函数 用于碰到周围弹回

        if (check_block_collision(dv1, dv2)) { // 条件判断 如果两个box碰撞 速度属性反转 先试用中间变量存储x,y速度在依次调换

            middleware_x = dv1.speedx;

            middleware_y = dv1.speedy;

            dv1.speedx = dv2.speedx;

            dv1.speedy = dv2.speedy;

            dv2.speedx = middleware_x;

            dv2.speedy = middleware_y;

        }

        // 计算速度

        var left = currentleft + el.speedx;

        var top = currenttop + el.speedy;

        // 更新至box标签

        el.style.left = `${left}px`;

        el.style.top = `${top}px`;

    }

    function check_border_collision(el) { // 矫正函数

        var style = window.getComputedStyle(el); // 获取box对象css属性

        var left = parseInt(style.left); // 获取当前左边距

        var top = parseInt(style.top); // 获取当前下距离

        var w = parseInt(style.width); // 获取元素宽度

        var h = parseInt(style.height); // 获取元素高度

        if (left < 0 || left > window.innerWidth - w) { // 判断条件 如果box左边距距离小于0 或者大于浏览器宽度-元素宽度

            left = 0;

            el.speedx *= -1; //反转移动

        }

        if (top < 0 || top > window.innerHeight - h) {// 判断条件 如果box上边距距离小于0 或者大于浏览器高度-元素高度

            top = 0;

            el.speedy *= -1; //反转移动

        }

    }

    // 判断函数 用于判断两个box是否相撞

    function check_block_collision(ev1, ev2) {

        var style1 = window.getComputedStyle(ev1);

        var style2 = window.getComputedStyle(ev2);

        var left1 = parseInt(style1.left);

        var left2 = parseInt(style2.left);

        var top1 = parseInt(style1.top);

        var top2 = parseInt(style2.top);

        var width1 = parseInt(style1.width);

        var width2 = parseInt(style2.width);

        var height1 = parseInt(style1.height);

        var height2 = parseInt(style2.height);

        // box坐标 x=left1+width/2  y=top+height/2

        var center1 = {

            x: left1 + width1 / 2,

            y: top1 + height1 / 2

        };

        var center2 = {

            x: left2 + width2 / 2,

            y: top2 + height2 / 2

        };

        // 计算两个box的坐标差的绝对值

        var diffx = Math.abs(center1.x - center2.x);

        var diffy = Math.abs(center1.y - center2.y);

        // 判断是否碰撞 如果x轴向大于两个box的宽之和且y轴大于两个box的高之和即为碰撞

        if (diffx < (width1 + width2) / 2 && diffy < (height1 + height2) / 2) {

            return true

        }

        return false

    }

    // 设置定时器

    setInterval(function () {

        move(dv1); //调用移动函数

        move(dv2);

    }, 20)

</script>

</body>

</html>

封装动画函数

　　实现功能: 动态的渐变效果 支持多参数 例如 {"left":500} 从左至右500px从快至慢渐停

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {

            overflow: hidden;

        }

        .box {

            width: 40px;

            height: 40px;

            background-color: black;

            position: absolute;

            left: 0;

            right: 0;

            opacity: 1;

        }

    </style>

</head>

<body>

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

<script>

    // 封装函数 解决兼容问题 得到Style

    function getStyle(el) { // el指element节点

        if (getComputedStyle) {

            return window.getComputedStyle(el)

        } else {

            return el.currentStyle

        }

    }

    function animate(el, properties) {

        //el指element节点  property指方向等但是只能使用默认的方向 left等  target 目标值

        // property 新增透明模式 opacity

        var interval_id; //声明计时器id 如果抛错把这个声明至外部

        var current;

        var speed;

        if (interval_id) { //如果有定时器 清除

            clearInterval(interval_id);

        }

        interval_id = setInterval(function () { // 创建定时器函数

            for (var property in properties) {

                var target = properties[property];

                if (property === 'opacity') { // 透明度特殊处理

                    current = Math.round(parseFloat(getStyle(el)["opacity"]) * 100)

                    //获取element透明度并x100进行后续数据处理 该方法将进行上舍入。

                } else {

                    current = parseInt(getStyle(el)[property]); // 渐变值

                }

                speed = (target - current) / 30; // 步长

                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // Math.ceil向上取整 Math.floor向下取整

                if (property === 'opacity') {

                    // 对opacity进行特殊处理

                    el.style.opacity = (current + speed) / 100 // 将前面先乘的除掉

                } else {

                    el.style[property] = current + speed + 'px'

                }

            }

        }, 20)

    }

    el = document.getElementById('box1'); //获取节点

    animate(el, {'opacity': 0,"left":200,'width':500}) // 调用封装函数

</script>

</body>

</html>

JavaScript动画相关的更多相关文章

  1. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  2. javascript动画系列第三篇——碰撞检测

    前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...

  3. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  4. JavaScript动画知多少？

    今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...

  5. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  6. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  7. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  8. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  9. CSS3之动画相关

    CSS3动画相关的属性:transform,transition,animation. 变形Transform 语法: transform: rotate | scale | skew | trans ...

随机推荐

  1. DFT 问答 III

    1.Boundary scan Boundary Scan就是我们俗称的边界扫描.Boundary Scan是上世纪90年代由 Joint Test Action Group(JTAG)提出的,它的初 ...

  2. 如何获取object数据的描述符

    const data = { portLand: '78/50', Dublin: '88/52', Lima: '58/40' } Object.defineProperty(data, 'Lima ...

  3. pytorch数学运算与统计属性入门（非常易懂）

    pytorch数学运算与统计属性入门1.Broadcasting (维度)自动扩展,具有以下两个重要特征:(1)expand (2)without copying data重点的核心实现功能是:(1) ...

  4. navicat导入.csv表格

    我本地的navicat不知道啥情况,导入不了表格,然后把表格转为.csv的,然后导入就好了 1.表格另存为.csv格式的 2.打开Navicat,选择要导入的表,然后右键->导入向导,选择.cs ...

  5. Win2012或Win2016安装网卡

    在电脑安装了Windows Server 2012或者2016等系统之后,可能面临的很大的问题就是没有有线或无线网卡. 1.安装网卡的功能 2.一直到“功能”这部分,选择安装“DirectPlay”和 ...

  6. springboot无法查询到后台的数据

    问题:springbooot中,整合mybatis时,在IUserMapper接口中, @Select("select * from user where name like '%李%'&q ...

  7. 一些 乱码 GPU的问题

    # # s = '网站地图' 原始 # s1 = s.encode('utf-8') # print(s1.decode('gbk')) #res 缃戠珯鍦板浘 # s = '缃戠珯鍦板浘' 原始 # ...

  8. 解决springboot 出现异常： java.net.BindException: Address already in use: bind

    解决springboot 出现异常: java.net.BindException: Address already in use: bind 这是引文在启动springboot 的时候,没有关闭端口 ...

  9. 「JSOI2015」圈地

    「JSOI2015」圈地 传送门 显然是最小割. 首先对于所有房子,权值 \(> 0\) 的连边 \(s \to i\) ,权值 \(< 0\) 的连边 \(i \to t\) ,然后对于 ...

  10. 流式计算（三）-Flink Stream 篇一

    原创文章,谢绝任何形式转载,否则追究法律责任! ​流的世界,有点乱,群雄逐鹿,流实在太多,看完这个马上又冒出一个,也不知哪个才是真正的牛,据说Flink是位重量级选手,能流计算,还能批处理, 和其他伙 ...