JavaScript 动画

程序员文章站 2022-03-10 16:44:07

动画原理 Document 动画原理 Document 夏雨荷动画封装 Document 点击夏雨荷才走夏雨荷不同动画缓动动画 Document 点击夏雨荷才走夏雨荷 ... ......

动画原理

<!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>

JavaScript 动画

动画原理

缓动动画

html+javascript+bootstrap实现层级多选框全层全选和多选功能

javascript实现数据双向绑定的三种方式小结

CSS3实现3D文字动画效果

Android自定义View实现loading动画加载效果

JavaScript实现渐变色效果(不使用图片)

Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

JavaScript实现两个select下拉框选项左移右移

Android仿支付宝的头部伸缩动画效果

纯CSS3实现漂亮的input输入框动画样式库(Text input love)

用CSS3和table标签实现一个圆形轨迹的动画的示例代码