动画函数封装

最新推荐文章于 2022-03-02 10:42:17 发布
原创 最新推荐文章于 2022-03-02 10:42:17 发布 · 141 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个逐步完善的变速动画函数封装过程，从简单的水平移动到支持多个属性的变化，并加入了回调函数支持，最后实现了包括z-index和opacity在内的多个属性的平滑过渡。

封装变速函数:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 200px;
            height: 100px;
            background-color: #FF6600;
            position: absolute;
            left: 0;
            top: 0;
            margin-top: 40px;
        }
    </style>
</head>
<body>
<input type="button" value="移动到400" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function () {
        animate(my$("dv"),400);
    }
    //移动函数--变速
    function animate(elment,target) {
        //第一步,清除定时器
        clearInterval(elment.timeId);
elment.timeId=setInterval(function () {
    //获取元素的当前位置
    var current=elment.offsetLeft;
    //确定每一次走多少步
    var step=(target-current)/10;//有正负
    //step取整
    step=step>0?Math.ceil(step):Math.floor(step);
    //走完一次后,当前位置发生改变
    current+=step;
    elment.style.left=current+"px";
    //判断是否到当前位置
    if(target==current){
        //清除定时器
        clearInterval(elment.timeId);
    }
    console.log("目标位置:"+target+"当前位置"+current+"每次移动的步数"+step);
},20);

    }
</script>
</body>
</html>

变速动画函数封装增加任意一个属性:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 100px;
            top: 0;
            margin-top: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="显示内容" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function () {
        animate(my$("dv"),"width",400);
    }
    function getStyle(element,attr) {
        if (getComputedStyle) {
            return window. getComputedStyle?getComputedStyle(element,null)[attr]:element.currentStyle[atrr];
        }
    }

    function animate(elment,attr,target) {
        clearInterval(elment.timeId);
        elment.timeId=setInterval(function () {
            var current=parseInt(getStyle(elment,attr));
            var step=(target-current)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            current+=step;
            elment.style[attr]=current+"px";
            if(target==current){
                clearInterval(elment.timeId);
            }
            console.log("目标位置:"+target+"当前位置"+current+"每次移动的步数"+step);
        },20);
    }
</script>
</body>
</html>

变速动画函数封装增加任意多个属性:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 100px;
            top: 0;
            margin-top: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="显示内容" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function () {
        animate(my$("dv"),{"width":300,"left":500});
    }
    //获取任意元素的任意属性---带单位
    function getStyle(element,attr) {
        if (getComputedStyle) {
            return window. getComputedStyle?getComputedStyle(element,null)[attr]:element.currentStyle[atrr];
        }
    }




    function animate(elment,json) {
        //第一步:清除定时器
        clearInterval(elment.timeId);
        elment.timeId=setInterval(function () {
            var flag=true;//默认所有的属性达到目标值
            for (var attr in  json) {
                var current=parseInt(getStyle(elment,attr));//获取数字类型,进行运算
                //确认每次走多少步
                var step=(json[attr]-current)/10;//有正负
                //step取整
                step=step>0?Math.ceil(step):Math.floor(step);
                //走完一次后当前位置发生变化
                current+=step;
                elment.style[attr]=current+"px";
                //判断是否到当前位置
                if(json[attr]!=current){
                    flag=false;
                }
            }
            //清除定时器
            if (flag){
                clearInterval(elment.timeId);
            }

            console.log("目标位置:"+json[attr]+"当前位置"+current+"每次移动的步数"+step);
        },20);
    }
</script>
</body>
</html>

变速函数增加多个属性和回调函数:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 100px;
            top: 0;
            margin-top: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="显示内容" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function () {
        var json={"width":300,"left":500,"top":100,"height":200};
        animate(my$("dv"),json,function () {
            animate(my$("dv"),{"width":50,"height":50,"left":50},function () {
               animate(my$("dv"),{"width":200,"left":300,"top":50})
            })
        })
    }
    //获取任意元素的任意属性---带单位
    function getStyle(element,attr) {
        if (getComputedStyle) {
            return window. getComputedStyle?getComputedStyle(element,null)[attr]:element.currentStyle[atrr];
        }
    }




    function animate(elment,json,fn) {
        //第一步:清除定时器
        clearInterval(elment.timeId);
        elment.timeId=setInterval(function () {
            var flag=true;//默认所有的属性达到目标值
            for (var attr in  json) {
                var current=parseInt(getStyle(elment,attr));//获取数字类型,进行运算
                //确认每次走多少步
                var step=(json[attr]-current)/10;//有正负
                //step取整
                step=step>0?Math.ceil(step):Math.floor(step);
                //走完一次后当前位置发生变化
                current+=step;
                elment.style[attr]=current+"px";
                //判断是否到当前位置
                if(json[attr]!=current){
                    flag=false;
                }
            }
            //清除定时器
            if (flag){
                clearInterval(elment.timeId);
               if (fn) {
                   fn();
               }
            }

            console.log("目标位置:"+json[attr]+"当前位置"+current+"每次移动的步数"+step);
        },20);
    }
</script>
</body>
</html>

变速动画函数封装增加任意多个属性和回调函数和z-index和opacity:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            margin-top: -20px;
            border: 1px solid red;
            z-index: -10;
        }
    </style>
</head>
<body>
<input type="button" value="显示内容" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function () {
        var json={"width":300,"left":500,"top":100,"height":200,"opacity":0.4};
        animate(my$("dv"),json,function () {
            animate(my$("dv"),{"width":50,"height":50,"left":50},function () {
                animate(my$("dv"),{"width":200,"height":250,"top":-20,"left":-20,"zIndex":100})
            })
        })
    }
    //获取任意元素的任意属性---带单位
    function getStyle(element,attr) {

            return window. getComputedStyle?getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }



    /**
     * 变速动画函数添加任意一个属性
     * @param element  要移动的元素
     * @param json  {"attr1":target1，"attr2":target2}
     * @param fn  回调函数
     *
     * "width":400, "height":300, "left":400
     */

    function animate(elment,json,fn) {
        //第一步:清除定时器
        clearInterval(elment.timeId);
        elment.timeId=setInterval(function () {
            var flag = true;//默认所有的属性达到目标值
            for (var attr in  json)
                //判断是不是opacity
                if (attr == "opacity") {
                    //获取当前元素的attr这个属性的属性值
                    var current = getStyle(elment, attr) * 100;//增大100倍
                    //确定每一次走多少步
                    var target = json[attr] * 100;//目标也增大100倍
                    var step = (target - current) / 10;
                    //有正负
                    //step取整
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    //走完一次后当前位置发生变化
                    current += step;
                    elment.style[attr] = current / 100;
                    //判断是否到当前位置
                } else if (attr == "zIndex") {//判断是不是z-index
                    //直接改变层级属性
                    elment.style[attr] = json[attr];
                } else {
                    //普通属性
                    //获取当前元素的attr这个属性的属性值
                    var current = parseInt(getStyle(elment, attr));
                    target = json[attr];
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    current += step;
                    elment.style[attr] = current + "px";
                }
            if (target != current) {
                flag = false;
            }

        if (flag){
                clearInterval(elment.timeId);
                if (fn){
                    fn();
                }
        }
            console.log("目标位置:"+json[attr]+"当前位置"+current+"每次移动的步数"+step);
        },20);
    }
</script>
</body>
</html>

 

JavaScript动画函数封装
流楚丶格念的博客
08-21 3905
文章目录动画函数封装：每0.02s移动10px案例：匀速运动案例：变速运动动画 动画函数封装：每0.02s移动10px <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
mouseinter和mouseover的区别+动画函数封装
phoebemeng的博客
07-18 278
mouseinter和mouseover的区别+动画函数封装+动画函数添加回调函数
前端学习笔记-JS-BOM-动画函数封装
qq_36434637的博客
09-20 263
动画实现原理 核心原理：通过定时器setInterval()不断移动盒子位置 实现步骤： 1. 获得盒子当前位置 2. 让盒子在当前位置加上1个移动距离 3. 利用定时器不断重复这个操作 4. 加一个结束定时器的条件 5. 注意此元素需要添加定位， 才能使用element.style.left <script> var div = document....
保安日记：JavaScript学习第十三篇之动画函数封装
Zhuo_De的博客
10-20 164
动画函数封装 动画实现原理： 核心原理:通过定时器setInterval() 不断移动盒子位置 实现步骤： 获得盒子当前位置 让盒子在当前位置加上一个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left 动画函数简单封装 注意函数需要传递2个参数，动画对象、移动到的距离 // 简单动画函数封装obj目标对象 target 目标位置 function animate(obj, target) {
动画函数独立封装动画函数独立封装
01-11
为了提高代码复用性和维护性，将动画函数独立封装成一个JS文件是非常明智的选择。这样可以在多个项目或页面中轻松调用，避免重复编写相似的代码，降低出错的可能性，并且使得代码结构更加清晰。 封装动画函数的基本...
封装的动画函数
weixin_44389021的博客
01-14 312
function dong(element,target) { clearInterval(element.timeId); element.timeId=setInterval(function () { var zuobian=element.offsetLeft; var step=10; step...
js封装动画函数
tangyuan97的博客
02-05 298
div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } span { posit...
27. 封装一个动画函数
Mr_LiuP的博客
03-02 364
动画函数的原理和简单封装
封装一个动画函数
qq_45052409的博客
07-28 214
function fn(a, b, c) { console.log(c); console.log(b); // 先清除在执行 只保留一个定时器执行 clearInterval(a.ff) // a.ff 表示：谁的函数 动态的 a.ff = setInterval(function () { // 步长值要写在定时器的里面 // 把步长值改为整数 不要出现小数的问题 let step = (b - a.o
动画函数的封装
weixin_43482295的博客
07-21 134
function animate(obj, target, callback) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 // 把我们步长值改为整数 不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLef.
封装动画函数
qq_61838861的博客
02-20 341
// obj是移动对象 target是目标距离 callback回调函数 //前提：obj要带定位 function animate(obj,target,callback){ // 先清除以前的定时器，只保留一个定时器 clearInterval(obj.timer); // obj是个对象，利用对象来添加定时器，实现给不同元素添加不同的定时器 obj.timer=setInterval(function(){ // 匀速动画 当前位置+固...
animate缓动动画函数封装及使用
08-21
总结起来，animate缓动动画函数的封装和使用包括创建函数、获取初始属性值、计算每帧属性值和对应时间、执行动画效果等步骤。它可以通过传入不同的参数来实现各种各样的动画效果，提升网页的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值