js运动-链式运动、摩擦运动、缓冲运动、运动框架加入缓冲

最新推荐文章于 2019-05-19 11:25:00 发布
最新推荐文章于 2019-05-19 11:25:00 发布
阅读量411 收藏
点赞数
分类专栏： JavaScript 文章标签： 链式运动 摩擦运动 缓冲运动 运动框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/della_ui/article/details/53106616
版权
本文介绍了JavaScript中的链式运动、摩擦运动和缓冲运动的概念及实现。在摩擦运动中，物体速度逐渐减小，可能导致无法精确到达目标点。缓冲运动则通过速度变化实现从快到慢的效果，文中提出了针对js解析小数导致的定位问题的解决方案，通过Math.ceil()和Math.floor()来确保物体能准确到达目标位置。最后讨论了如何将缓冲运动整合进运动框架。
摘要由CSDN通过智能技术生成

1、链式运动

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>链式运动</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; top: 30px; left: 400px;}
</style>
<script>
window.onload = function() {

    var oDiv1 = document.getElementById('div1');

    oDiv1.onclick = function() {

        startMove(this, {
            width : 200
        }, 10,function(){
            startMove(this,{
                height:200
            },10)
        });
    }

    function startMove(obj, json, iSpeed,fn) {
        clearInterval(obj.iTimer);
        var iCur = 0;

        obj.iTimer = setInterval(function() {

            var flag = true;

            for ( var attr in json ) {

                var iTarget = json[attr];

                if (attr == 'opacity') {
                    iCur = Math.round(css( obj, 'opacity' ) * 100);
                } else {
                    iCur = parseInt(css(obj, attr));
                }

                if (iCur != iTarget) {
                    flag = false;
                    if (attr == 'opacity') {
                        obj.style.opacity = (iCur + iSpeed) / 100;
                        obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
                    } else {
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                }

            }

            if (flag) {
                clearInterval(obj.iTimer);
                fn && fn.call(obj);  //存在回调函数的时候执行回调函数，call()改变this指向
            }

        }, 30);
    }

    function css(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }

}
</script>
</head>

<body>
    <div id="div1"></div>
</body>
</html>

2、摩擦运动
摩擦 : 在运动过程中，速度越来越慢
缺点：无法准确到达目标点

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;}
</style>
<script>
//摩擦，减速 : 在运动过程中，速度越来越慢
window.onload = function() {

    var oBtn = document.getElementById('btn');
    var oDiv = document.getElementById('div1');
    var iTimer = null;
    var iSpeed = 50;

    oBtn.onclick = function() {

        clearInterval(iTimer);

        iTimer = setInterval(function() {

            iSpeed *= 0.92;

            if (oDiv.offsetLeft == 500) {
                clearInterval(iTimer);
            } else {
                oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
            }

        }, 30);

    }

}
</script>
</head>

<body>
    <input type="button" value="动起来" id="btn" />
    <div id="div1"></div>
</body>
</html>

3、缓冲运动

缓冲运动的特点是开始时运动速度很快，随着离目标位置越来越近，速度也越来越小。

缓冲运动速度计算：速度=（目标位置-当前位置）/缩放系数

速度取整：js在解析obj.offsetLeft时，对于小数情况会自动四舍五入计算。因此，当速度在0-0.5之间时，obj.offsetLeft+iSpeed=obj.offsetLeft，obj就无法到达目标点。当速度在0-（-0.5）之间同上述。
解决：
obj向右运动时：速度向上取整,Math.ceil();
obj向左运动时：速度向下取整，Math.floor()
speed=(target-obj.offsetLeft)/8;
speed=speed > 0 ? Math.ceil(speed) : Math.floor(speed);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                top: 50px;
                left: 800px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById("btn");
                var oDiv=document.getElementById("div1");
                var iTimer=null;

                oBtn.onclick=function(){
                    clearInterval(iTimer);
                    var iSpeed=0;

                    iTimer=setInterval(function(){

                        iSpeed=(500-oDiv.offsetLeft)/8;
                        iSpeed=iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                        if (oDiv.offsetLeft==500) {
                            clearInterval(iTimer);
                        }else{
                            oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
                        }
                    },30)
                }

            }
        </script>
    </head>
    <body>
        <input id="btn" type="button" value="点击" />
        <div id="div1"></div>
    </body>
</html>

4、运动框架加入缓冲

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;}
</style>
<script>
window.onload = function() {

    var oDiv1 = document.getElementById('div1');

    oDiv1.onclick = function() {

        startMove(this, {
            width : 800,
            height : 200
        });
    }

    function startMove(obj, json, fn) {
        clearInterval(obj.iTimer);
        var iCur = 0;
        var iSpeed = 0;

        obj.iTimer = setInterval(function() {

            var iBtn = true;

            for ( var attr in json ) {

                var iTarget = json[attr];

                if (attr == 'opacity') {
                    iCur = Math.round(css( obj, 'opacity' ) * 100);
                } else {
                    iCur = parseInt(css(obj, attr));
                }

                iSpeed = ( iTarget - iCur ) / 8;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                if (iCur != iTarget) {
                    iBtn = false;
                    if (attr == 'opacity') {
                        obj.style.opacity = (iCur + iSpeed) / 100;
                        obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
                    } else {
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                }

            }

            if (iBtn) {
                clearInterval(obj.iTimer);
                fn && fn.call(obj);
            }

        }, 30);
    }

    function css(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }

}
</script>
</head>

<body>
    <div id="div1"></div>
</body>
</html>
della_uii
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js-运动总结(常见运动效果)
李dayday
10-02 292
匀速运动 加速运动 缓冲运动 碰撞运动 重力运动 多物体多链式运动框架 1. 匀速运动 速度isSpeed是个定值 function startmov(obj) { clearInterval(timer); var isSpeed = 10; timer = setInterval(function () { ...
js运动 摩擦运动
weixin_34019144的博客
03-14 114
<!DOCTYPE HTML> <HTML> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <style> *{ margin...
原生JS实现摩擦运动效果
哈哈哈
02-11 568
【运动】JS中的摩擦运动 原生JS实现各种动画效果。 摩擦运动就是速度越来越慢，最后停止的运动形式。元素有个初始速度，在运动的过程中，速度越来越慢，最后停止。相当于有摩擦力一样，所以被称为摩擦运动。 先要声明一个初始速度，然后通过减法或者乘以小数或者除以一个大于1的数，逐渐让速度降下来。 实现过程： <!DOCTYPE html> <html lang="e...
JS带有惯性的拖拽，摩擦，甩动元素
xyphf的博客
07-06 4244
JS带有惯性的拖拽，摩擦，甩动元素
弹性运动
小漠007的专栏
04-27 759
lang="en">   charset="UTF-8">   type="text/css">   #box{width:100px;height:100px;background:red;position: absolute;left:0;}   span{height:900px;border-left:1px red solid;po
js 移动端 指尖摩擦小游戏源码
Rand Tsui
03-29 1246
指尖摩擦
JavaScript 基础入门11 - 运动框架的封装
05-19 233
目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调，链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 ...
多元素运动框架-链式运动的封装.html
02-21
多元素运动框架-链式运动的封装，详细讲解了运动的原理，及元素运动的方式，如何封装成函数，以及调用方式
JavaScript运动框架 链式运动到完美运动（五）
10-19
本篇文章主要探讨的是JavaScript运动框架中的一个重要概念——链式运动，以及如何将其运用到完美运动中。 链式运动是指在一个动画完成之后无缝衔接另一个动画，形成连续的视觉效果。这种技术常见于网站设计中，例如...
JS多物体 任意值 链式 缓冲运动
01-19
代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv=”content-type” charset=”utf-8″ /> <meta http-equiv=”content-type” content=”text/html” />...
JS实现物体带缓冲的间歇运动效果示例
10-20
在JavaScript中，实现物体带缓冲的间歇运动效果通常涉及到定时器、数学运算以及DOM元素的动态修改。这个示例代码展示了一个简单的物体（这里是一个红色的div元素）如何通过鼠标悬停事件触发一系列平滑的移动和尺寸...
js通过class获取元素的方法
热门推荐
Della_UI的博客
11-20 1万+
function getElementsByClassName(oParent,tagName,className){ var aEls=oParent.getElementsByTagName(tagName); var iLen=aEls.length; var arr=[]; for (var i=0; i<iLen; i++) { var aCl
原生js实现带运动的分页效果
Della_UI的博客
12-08 1976
本例最终效果如下图，当切换页码时，本页码内所有课程将从最后一个课程开始依次运动到底部中间的位置并消失，然后新页码内的课程依次从底部中间的位置运动到原始位置。 首先实现分页效果，然后将运动和分页结合。 分页效果图如下图中的③或④所示： 下面将以 什么情况出现首页-什么情况出现上一页-五个页码不同排布情况-什么情况出现下一页-什么情况出现尾页-总页码提示-点击页码进行切换 的思路实现该分页效果。<
jq中animate其他运动形式的扩展
Della_UI的博客
11-20 1963
jq运动同样是基于tween的。 jq中只有linear和swing两种运动形式，可以通过$.extend(）把tween中的运动扩展到jq中。<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $.extend(jQuery.easing , { easeIn: function(x,t,
getBoundingClientRect()
Della_UI的博客
05-19 1740
1、语法var rect=el.getBoundingClientRect();2、返回值返回一个包含left、top、right、bottom、width、height值的矩形对象。注： width和height：ie9及以上支持width/height属性。 兼容ie6~ie8的width/height的写法：return{ width:rect.right-rect.left,
event事件详解-焦点事件、event对象、键盘事件、右键菜单事件
Della_UI的博客
10-29 1513
1、焦点事件获取焦点事件onfocus \ 失去焦点事件 onblur例子：输入框里的提示文字<body> <input type="text" id="text1" value="请输入内容" /> <script type="text/javascript"> var oText=document.getElementById("text1");
js运动实例-多图片从中心放大缩小
Della_UI的博客
11-10 1339
多图片展开收缩实现的过程分四步：第一步：布局，各个小盒子相对于外面的大盒子定位<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ m
js实现简易模拟滚动条
Della_UI的博客
11-06 1227
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 30px; height: 500px;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值