当前位置：移动技术网 > IT编程>开发语言>JavaScript > JavaScript 动画

JavaScript 动画

2020年03月18日 | 移动技术网IT编程 | 我要评论

动画原理

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.queryselector('div');
        var tinner = setinterval(function () {
            if (div.offsetleft > 400) {
                clearinterval(tinner);
            }
            div.style.left = div.offsetleft + 1 + 'px'

        }, 30)

    </script>
</body>

</html>

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div></div>
    <span>夏雨荷</span>
    <script>
       function animate(obj, target) {
           var inner = setinterval(function () {
               if (obj.offsetleft >= target) {
                   clearinterval(inner)
               }
               obj.style.left = obj.offsetleft + 1 + 'px'
           },30)
       }
       var div = document.queryselector('div');
       var span = document.queryselector('span');
       animate(div, 200);
       animate(span, 300);

    </script>
</body>

</html>

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button>点击夏雨荷才走</button>
    <div></div>
    <span>夏雨荷</span>
    <script>
        var btn = document.queryselector('button');
        var div = document.queryselector('div');
        var span = document.queryselector('span');

        function move(obj, target) {
            clearinterval(obj.tinner); // 防止多次点击
            obj.tinner = setinterval(function () {
                if (obj.offsetleft >=target) {
                clearinterval(tinner)
                }
                obj.style.left = obj.offsetleft + 1 + 'px'
            },10)
        }
        move(div, 300);

        btn.addeventlistener('click', function () {
            move(span,400)
        })


    </script>
</body>

</html>

缓动动画

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button>点击夏雨荷才走</button>
    <span>夏雨荷</span>
    <script>
        // 缓动动画函数封装obj目标对象 target 目标位置
        // 思路：
        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
        // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
        function animate(obj, target) {
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearinterval(obj.timer);
            obj.timer = setinterval(function() {
                // 步长值写到定时器的里面
                var step = (target - obj.offsetleft) / 30;
                if (obj.offsetleft == target) {
                    // 停止动画 本质是停止定时器
                    clearinterval(obj.timer);
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetleft + step + 'px';

            }, 15);
        }
        var span = document.queryselector('span');
        var btn = document.queryselector('button');

        btn.addeventlistener('click', function() {
                // 调用函数
                animate(span, 500);
            })
            // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
    </script>
</body>

</html>

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button class="btn500">点击夏雨荷到500</button>
    <button class="btn800">点击夏雨荷到800</button>
    <span>夏雨荷</span>
    <script>

    function animate(obj, target) {
        // 清理定时器，防止多次点击
        clearinterval(obj.timer);

        obj.timer = setinterval(function () {

            // 把我们步长值改为整数 不要出现小数的问题
            var step = (target - obj.offsetleft) / 10;
            step = step > 0 ? math.ceil(step) : math.floor(step);

            // 到达目标就清除
            if (obj.offsetleft == target) {
                clearinterval(obj.timer);
            }

            obj.style.left = obj.offsetleft + step + 'px'

        }, 15);
    }

    var btn500 = document.queryselector('.btn500');
    var btn800 = document.queryselector('.btn800');
    var span = document.queryselector('span');

    btn500.onclick = function () {
        animate(span, 500);
    };

    btn800.onclick = function () {
        animate(span, 800);
    }


    </script>
</body>

</html>

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button class="btn500">点击夏雨荷到500</button>
    <button class="btn800">点击夏雨荷到800</button>
    <span>夏雨荷</span>
    <script>

    function animate(obj, target, callback) {
        // 清理定时器，防止多次点击
        clearinterval(obj.timer);

        obj.timer = setinterval(function () {

            // 把我们步长值改为整数 不要出现小数的问题
            var step = (target - obj.offsetleft) / 10;
            step = step > 0 ? math.ceil(step) : math.floor(step);

            // 到达目标就清除
            if (obj.offsetleft == target) {
                clearinterval(obj.timer);

                // 回调函数
                if (callback){
                    callback()
                }
            }

            obj.style.left = obj.offsetleft + step + 'px'

        }, 15);
    }

    var btn500 = document.queryselector('.btn500');
    var btn800 = document.queryselector('.btn800');
    var span = document.queryselector('span');

    btn500.onclick = function () {
        animate(span, 500);
    };

    btn800.onclick = function () {
        animate(span, 800, function () {
            span.style.backgroundcolor = 'red';  // 回调函数
        });
    }


    </script>
</body>

</html>

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        .sliderbar {
            position: fixed;
            right: 0;
            bottom: 100px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            color: #fff;
        }

        .con {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 40px;
            background-color: purple;
            z-index: -1;
        }
    </style>
    <script src="animate.js"></script>
</head>

<body>
    <div class="sliderbar">
        <span>←</span>
        <div class="con">问题反馈</div>
    </div>

    <script>
        // 获取元素
        var sliderbar = document.queryselector('.sliderbar');
        var con = document.queryselector('.con');

        sliderbar.onmouseenter = function () {
            animate(con, -160, function() {
                // 当我们动画执行完毕，就把 ← 改为 →
                sliderbar.children[0].innerhtml = '→';
            });
        };

        sliderbar.onmouseleave = function () {
            animate(con, 0, function() {
                // 当我们动画执行完毕，就把 → 改为 ←
                sliderbar.children[0].innerhtml = '←';
            });
        }



    </script>
</body>

</html>

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Vue的响应式原理

受现代JavaScript 的限制 (以及废弃 Object.observe)，Vue不能检测到对象属性的添加或... [阅读全文]
PHP+txt聊天室

PHP+txt聊天室最近朋友发了一篇ASP+txt聊天室，非常不爽，我可是支持PHP的啊所以就发了这篇文章由于是... [阅读全文]
教你如何做一个优雅的Ecmascripter /转

看看这些被同事喷的JS代码风格你写过多少殷荣桧JavaScript今天现在写代码比以前好多了，代码的格式都有es... [阅读全文]
Javascript知识点总结（一）

一、走进javascript什么是JS？JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型... [阅读全文]
利用JS来判断输入是否为空以及重复密码是否相同

登录页面HTML如下：<div class="form-group has-feedback"> ... [阅读全文]
Vue入门基础——第一次笔记

Vue.js是什么？是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层... [阅读全文]
react+antd 给switch设置初始值变量

在react项目中表单内的switch功能，设置初始值为变量，所以需要在Form.Item 标签上添加一个val... [阅读全文]
@vue/cli 4.4.6解决跨域问题

在前端@vue/cli 4.4.6解决跨域问题，可以通过vue.config.js配置完成例如：需要访问http... [阅读全文]
offset、client、scroll (width,height、left,top、X,Y)

offsetWidth、clientWidth、scrollWidthdiv{ width: 20px; ... [阅读全文]
vue 性能优化：gzip编译压缩

安装：compression-webpack-pluginnpm install compression-web... [阅读全文]

网友评论


验证码：

JavaScript 动画

2020年03月18日 | 移动技术网IT编程 | 我要评论

动画原理

缓动动画

您可能感兴趣的文章:

相关文章:

网友评论