PC端网页特效-动画

8个月前 (09-20) 559次浏览 已收录 0个评论

动画实现原理

核心原理:通过定时器setInterval()不断移动盒子位置

实现步骤:

  • 获得盒子当前位置
  • 让盒子在当前位置加上1个移动距离
  • 利用定时器不断重复这个操作
  • 加一个结束定时器的条件
  • 注意此元素需要添加定位,才能使用element.style.left
<script>
        // 动画原理
        // 1. 获得盒子当前位置  
        // 2. 让盒子在当前位置加上1个移动距离
        // 3. 利用定时器不断重复这个操作
        // 4. 加一个结束定时器的条件
        // 5. 注意此元素需要添加定位, 才能使用element.style.left
        var div = document.querySelector('div');
        var timer = setInterval(function() {
            if (div.offsetLeft >= 400) {
                // 停止动画 本质是停止定时器
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }, 30);
    </script>
结果演示

动画函数简单封装

<script>
        function animate(obj,target){
             //当不断调用一个元素的定时器的时候,元素的速度会越来愈快,因为开启了太多的定时器,
             //所以要让元素只有一个定时器执行,
             //即先清除以前的定时器,只保留当前的一个定时器执行。
             //clearInterval(obj.timer);

            //给不同的元素指定了不同的定时器obj.timer
            obj.timer = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 30);
        }
        var div = document.querySelector('div');
        animate(div,300);
    </script>

缓动效果原理

缓动动画就是让元素运动速度有所变化,比如让速度慢慢停下来。

缓动动画公示

(目标位置-现在的位置)/10 作为每次移动的距离步长

<script>
        function animate(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                //把步长值改为整数(往上取整),不然小数会出现走不到目标位置的问题
                var step = (target - obj.offsetLeft) / 10;
                //当步长大于0就往上取整(即取大值的整数),小于0就往下取整(即取小值的整负数)
                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 span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');

        btn500.addEventListener('click', function() {
            animate(span, 500);
        })
        btn800.addEventListener('click', function() {
                animate(span, 800);
            })
    </script>
结果演示


动画函数添加回调函数

原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后(回调函数写在定时器结束的位置),再执行传进去的这个函数,这个过程称为回调。

<script>
        function animate(obj, target,callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                //把步长值改为整数(往上取整),不然小数会出现走不到目标位置的问题
                var step = (target - obj.offsetLeft) / 10;
                //当步长大于0就往上取整(即取大值的整数),小于0就往下取整(即取小值的整负数)
                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 span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');

        btn500.addEventListener('click', function() {
            animate(span, 500);
        })
        btn800.addEventListener('click', function() {
                animate(span, 800,function(){
                    alert('我是回调函数');
                });
            })
    </script>
结果演示

常见网页特效案例

返回顶部

滚动窗口至文档中的特定位置

window.scroll(x,y)

分析

  • 封装的动画函数要把所有的left值改为页面垂直
  • 页面滚动了多少可以通过window.pageYOffset得到
  • 最后是页面滚动,使用window.scroll(x,y)
<script>
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            animate(window,0)
        })
        function animate(obj, target, callback) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    //把步长值改为整数(往上取整),不然小数会出现走不到目标位置的问题
                    var step = (target - window.pageYOffset) / 10;
                    //当步长大于0就往上取整(即取大值的整数),小于0就往下取整(即取小值的整负数)
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if (window.pageYOffset == target) {
                        clearInterval(obj.timer);
                        if (callback) {
                            callback();
                        }
                    }
                    window.scroll(0, window.pageYOffset+step);
                }, 15);
            }
    </script>
结果演示

筋斗云

功能需求

  • 鼠标经过某个小li,方块会跟到当前小li的位置
  • 鼠标离开这个小li,方块会复原为原来的位置
  • 鼠标点击了某个小li ,方块就会停在这个小li 的位置上

原理

  • 原先方块的起始位置是0
  • 鼠标经过某个小li,就把当前小li的位置(offsetLeft)作为目标值
  • 鼠标离开后,就把目标值设为0
  • 如果点击了某个小li,就把当前的位置储存起来,作为筋斗云的新起始位置
<script>
        window.addEventListener('load', function() {
            // 1. 获取元素
            var cloud = document.querySelector('.cloud');
            var c_nav = document.querySelector('.c-nav');
            var lis = c_nav.querySelectorAll('li');
            // 2. 给所有的小li绑定事件 
            // 这个current 做为筋斗云的起始位置
            var current = 0;
            for (var i = 0; i < lis.length; i++) {
                // (1) 鼠标经过把当前小li 的位置做为目标值
                lis[i].addEventListener('mouseenter', function() {
                    animate(cloud, this.offsetLeft);
                });
                // (2) 鼠标离开就回到起始的位置 
                lis[i].addEventListener('mouseleave', function() {
                    animate(cloud, current);
                });
                // (3) 当我们鼠标点击,就把当前位置做为目标值
                lis[i].addEventListener('click', function() {
                    current = this.offsetLeft;
                });
            }
        })
         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);
                        callback && callback();
                    }
                    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式:(目标值 - 现在的位置) / 10
                    obj.style.left = obj.offsetLeft + step + 'px';

                }, 15);
            }
    </script>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:PC端网页特效-动画
喜欢 (2)

您必须 登录 才能发表评论!