js-运动总结(常见运动效果)

最新推荐文章于 2020-12-15 19:31:50 发布
最新推荐文章于 2020-12-15 19:31:50 发布
阅读量284 收藏 1
点赞数
分类专栏： JavaScript学习笔记 文章标签： js常见运动总结 多物体多链式运动框架 简单弹性导航栏 简单伸缩栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43127921/article/details/101947478
版权
  1. 匀速运动
  2. 加速运动
  3. 缓冲运动
  4. 碰撞运动
  5. 重力运动
  6. 多物体多值多链式运动框架
1. 匀速运动

速度isSpeed是个定值

function startmov(obj) {
            clearInterval(timer);
            var isSpeed = 10;
            timer = setInterval(function () {
                obj.style.left = obj.offsetLeft + isSpeed + 'px';
            },30);
        }
2. 变速运动

核心就是isSpeed每次执行发生改变

// 变速运动
        function starSpeedChangeMove(obj,target) {
            clearInterval(timer);
            var isSpeed;
            timer = setInterval(function () {
                isSpeed = (target - obj.offsetLeft) / 15;
                isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);
                obj.style.left = obj.offsetLeft + isSpeed + 'px';
            },30);
        }
应用(伸缩栏)
<!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>
    .wrapper{
        position : absolute;
        top: 200px;
        left: -400px;
        width: 400px;
        height: 100px;
        background: yellowgreen;
    }
    .demo{
        position: absolute;
        top: 0;
        left: 400px;
        width: 40px;
        height: 100px;
        background: yellow;
    }
    </style>
</head>
<body>
    
    <div class="wrapper">
        <div class="demo">

        </div>
    </div>

    <script>

        var oDivDemo = document.getElementsByClassName('wrapper')[0];
        var timer = null;
        oDivDemo.onmouseenter = function () {
            starSpeedChangeMove(this,0);
        }
        oDivDemo.onmouseleave = function () {
            
            starSpeedChangeMove(this,-400);
        }
        
        function starSpeedChangeMove(obj,target) {
            clearInterval(timer);
            var isSpeed;
            timer = setInterval(function () {
                isSpeed = (target - obj.offsetLeft) / 15;
                isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);
                obj.style.left = obj.offsetLeft + isSpeed + 'px';
            },30);
        }
    </script>
</body>
</html>
3. 缓冲运动

顾名思义，所谓缓冲，就是说速度不同；在一定条件下，距离越大，速度越大；距离越小，速度也就越小。
也就是跟变速运动差不多代码

4.碰撞运动（弹性运动）

在发生碰撞的时候,我们把对应的x,y方向的速度乘以"摩擦系数"

// 弹性运动
        function starMove (obj, target) {
            clearInterval(obj.timer);
            var isSpeed = 20;
            var a, u = 0.8;  // u表示摩擦系数
            obj.timer = setInterval(function (){
                a = (target - obj.offsetLeft) / 15;
                isSpeed = isSpeed + a;
                isSpeed = isSpeed * 0.9;
                if(Math.abs(isSpeed) < 1 && Math.abs(target - obj.offsetLeft) < 1){
                    clearInterval(obj.timer);
                }else{
                    obj.style.left = obj.offsetLeft + isSpeed + 'px'; 
                }
                
                
            },30);
        }
应用(弹性导航栏)
<!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>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        ul{
            position: relative;
            width: 600px;
            height: 80px;
            /* border: 1px solid #000; */
            margin : 100px auto 0;
        }
        ul li.nav{
            width: 148px;
            height: 78px;
            border: 1px solid #000;
            color : #000;
            text-align: center;
            line-height: 78px;
            float: left;
        }
        ul li.bg{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 150px;
            height: 80px;
            background: rgb(214, 49, 49);
            z-index: -1;
        }
    </style>
</head>
<body>
    
    
    <ul>
        <li class="nav">ES6</li>
        <li class="nav">Webpack</li>
        <li class="nav">Vue</li>
        <li class="nav">Node</li>
        <li class="bg"></li>
    </ul>
    
    <script>
        
        var oLi = document.getElementsByTagName('li');
        var oBg = document.getElementsByClassName('bg')[0];
        var oLiArr = Array.prototype.slice.call(oLi, 0);
        oLiArr.forEach(function (ele, index){
            ele.onmouseenter = function (){
                starMove(oBg,this.offsetLeft);
            }
        });
        
        function starMove (obj, target) {
            clearInterval(obj.timer);
            var isSpeed = 20;
            var a, u = 0.8;  // u表示摩擦系数
            obj.timer = setInterval(function (){
                a = (target - obj.offsetLeft) / 15;
                isSpeed = isSpeed + a;
                isSpeed = isSpeed * 0.9;
                if(Math.abs(isSpeed) < 1 && Math.abs(target - obj.offsetLeft) < 1){
                    clearInterval(obj.timer);
                }else{
                    obj.style.left = obj.offsetLeft + isSpeed + 'px'; 
                }
                
                
            },30);
        }
    </script>
</body>
</html>
5. 重力运动
// targetSpeedX,targetSpeedY 表示的是x,y速度矢量值
        function starMove (obj,targetSpeedX,targetSpeedY){
            clearInterval(obj.timer);
            var iSpeedX,
                iSpeedY,
                g = 10,     // 重力加速度
                u = 0.8;   // 碰撞时速度损失
            iSpeedX = (typeof targetSpeedX == 'undefined' ? 6 : targetSpeedX),
            iSpeedY = (typeof targetSpeedY == 'undefined' ? 8 : targetSpeedY);
            console.log(iSpeedY,iSpeedX);
            obj.timer = setInterval(function (){
                iSpeedY += g;
                var newLeft = obj.offsetLeft + iSpeedX,
                    newTop = obj.offsetTop + iSpeedY;
                // 边界处理
                if(newTop >= document.documentElement.clientHeight - obj.offsetHeight){
                    iSpeedY *= -1;
                    iSpeedY *= u;
                    iSpeedX *= u;
                    newTop = document.documentElement.clientHeight - obj.offsetHeight;

                }
                if(newTop <= 0){
                    iSpeedY *= -1;
                    iSpeedY *= u;
                    iSpeedX *= u;
                    newTop = 0;
                }
                if(newLeft >= document.documentElement.clientWidth - obj.offsetWidth){
                    iSpeedX *= -1;
                    iSpeedX *= u;
                    newLeft = document.documentElement.clientWidth - obj.offsetWidth;
                }
                if(newLeft <= 0){
                    iSpeedX *= -1;
                    iSpeedX *= u;
                    newLeft = 0; 
                }
                // 判断结束条件
                if(Math.abs(document.documentElement.clientHeight-obj.offsetHeight-newTop) < 1 && Math.abs(iSpeedY) < 1){
                    clearInterval(obj.timer); 
                }else{
                    obj.style.left = newLeft + 'px';
                    obj.style.top = newTop + 'px';
                }
            },30);
        }
应用(拖拽抛出效果)
<!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>
        body{
            overflow: hidden;
        }
        .demo{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #000;
        }
    </style>
</head>
<body>
    
    <div class="demo"></div>
    <script>
        var oDiv = document.getElementsByClassName('demo')[0];

        // oDiv.onclick = function (){
        //     starMove(this,1,1); 
        // }
        var lastX = oDiv.offsetLeft,
            lastY = oDiv.offsetTop;
        oDiv.onmousedown = function (e) {
            var event = e || window.event;
            var disX = event.clientX - this.offsetLeft,
                disY = event.clientY - this.offsetTop,
                that = this;
            var iSpeedX = 0,
                iSpeedY = 0;
            document.onmousemove = function (e) {

                var newLeft = e.clientX - disX,
                    newTop = e.clientY - disY;
                    iSpeedX = newLeft - lastX,
                    iSpeedY = newTop - lastY,
                    lastX = newLeft,
                    lastY = newTop;
                that.style.left = newLeft + 'px';
                that.style.top = newTop + 'px';
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    //iSpeedX,iSpeedY 相当于是速度的方向差值  正负表示方向
                    starMove(that,iSpeedX,iSpeedY);
                }
            }
        }

        // 模拟重力场   
        // targetSpeedX,targetSpeedY 表示的是x,y速度矢量值
        function starMove (obj,targetSpeedX,targetSpeedY){
            clearInterval(obj.timer);
            var iSpeedX,
                iSpeedY,
                g = 10,     // 重力加速度
                u = 0.8;   // 碰撞时速度损失
            iSpeedX = (typeof targetSpeedX == 'undefined' ? 6 : targetSpeedX),
            iSpeedY = (typeof targetSpeedY == 'undefined' ? 8 : targetSpeedY);
            console.log(iSpeedY,iSpeedX);
            obj.timer = setInterval(function (){
                iSpeedY += g;
                var newLeft = obj.offsetLeft + iSpeedX,
                    newTop = obj.offsetTop + iSpeedY;
                // 边界处理
                if(newTop >= document.documentElement.clientHeight - obj.offsetHeight){
                    iSpeedY *= -1;
                    iSpeedY *= u;
                    iSpeedX *= u;
                    newTop = document.documentElement.clientHeight - obj.offsetHeight;

                }
                if(newTop <= 0){
                    iSpeedY *= -1;
                    iSpeedY *= u;
                    iSpeedX *= u;
                    newTop = 0;
                }
                if(newLeft >= document.documentElement.clientWidth - obj.offsetWidth){
                    iSpeedX *= -1;
                    iSpeedX *= u;
                    newLeft = document.documentElement.clientWidth - obj.offsetWidth;
                }
                if(newLeft <= 0){
                    iSpeedX *= -1;
                    iSpeedX *= u;
                    newLeft = 0; 
                }
                // 判断结束条件
                if(Math.abs(document.documentElement.clientHeight-obj.offsetHeight-newTop) < 1 && Math.abs(iSpeedY) < 1){
                    clearInterval(obj.timer); 
                }else{
                    obj.style.left = newLeft + 'px';
                    obj.style.top = newTop + 'px';
                }
            },30);
        }
    
    </script>
</body>
</html>
6. 多物体多值多链式运动框架

多物体运动：
让每一个运动的物体拥有自己的定时器 定时器独立
把定时器作为对象的属性 让定时器独立

链式运动
上一个动作结束 进入到下一个动作
解决 ： 在运动函数上加一个参数，参数代表回调函数

参数说明:obj 对应元素,
json 对象， 属性是改变的样式,比如 width height opacity
callback 回调函数 可以进行多个动作发生
小技巧: opacity 改变的时候,可以把isSpeed扩大100倍,最后在缩小100倍

function startMove(obj, json, callback){
            clearInterval(obj.timer);
            obj.timer = setInterval(function (){
                var oBstop = true,
                    isSpeed,
                    iCur;
                for(var attr in json){
                    if(attr == 'opacity'){
                        iCur = parseFloat(getStyle(obj,attr)) * 100;
                    }else{
                        iCur = parseInt(getStyle(obj,attr));
                    }
                    isSpeed = (json[attr] - iCur) / 7;
                    isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);
                    if(attr == 'opacity'){
                        obj.style.opacity = (isSpeed + iCur) / 100;
                    }else{
                        obj.style[attr] = (isSpeed + iCur) + 'px';
                    }
                    if(json[attr] != iCur){
                        oBstop = false;
                    }
                }
                if(oBstop){
                    clearInterval(obj.timer);
                    typeof callback == 'function' ? callback() : "";
                }
            },30);
        }
demo（具体用法）
<!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 : red;
            opacity: 1;
            border : 1px solid #000;
            margin: 100px;
        }
        .top {
            top : 100px;
        }
        .buttom {
            bottom : 100px;
        }
    </style>
</head>
<body>
    
    <div class="top">1</div>
    <div class="buttom">2</div>
    <script>
        

        var oDiv = document.getElementsByTagName('div');
        var timer = null;
        var targetObj = {
            width : 400,
            height : 400,
            opacity : 20,
            left : 200,
            top : 200
        }
        oDiv[0].onclick = function (){
            startMove(this,targetObj,function (){
                console.log('this == ', this);
                startMove(oDiv[1],targetObj);
            });
            console.log(222);
        }
        // 多物体多链式运动框架
        
        function getStyle (obj, attr) {
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return window.getComputedStyle(obj,false)[attr];
            }
        }
        function startMove(obj, json, callback){
            clearInterval(obj.timer);
            obj.timer = setInterval(function (){
                var oBstop = true,
                    isSpeed,
                    iCur;
                for(var attr in json){
                    if(attr == 'opacity'){
                        iCur = parseFloat(getStyle(obj,attr)) * 100;
                    }else{
                        iCur = parseInt(getStyle(obj,attr));
                    }
                    isSpeed = (json[attr] - iCur) / 7;
                    isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);
                    if(attr == 'opacity'){
                        obj.style.opacity = (isSpeed + iCur) / 100;
                    }else{
                        obj.style[attr] = (isSpeed + iCur) + 'px';
                    }
                    if(json[attr] != iCur){
                        oBstop = false;
                    }
                }
                if(oBstop){
                    clearInterval(obj.timer);
                    typeof callback == 'function' ? callback() : "";
                }
            },30);
        }
    </script>
</body>
</html>
DayDay_Lee
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
汽车车速表效果特效代码
03-20
汽车车速表效果是一款简单的图形化的汽车车速表效果,类似我们常见的汽车、摩托车的仪表盘一样，效果逼真，可以通过脚本自行设定当前速度，指针会根据速度进行旋转。
javaScript之JS运动
qq_41972088的博客
12-15 261
1. 匀速运动 原理：从头到尾一直保持一个速度，即每次运动相同的距离，也称为平滑运动。 分析：①实现匀速运动效果，我们先设置元素样式，然后通过 document.getElementById(id)获取到对应的id节点元素。 ②关闭上一次定时器 ③定义speed速度（可以随意定义运动的速度值） ④设置运动和停止分开 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
js的弹性运动
weixin_30410119的博客
08-17 87
弹性： 　　速度+=（目标点-当前值）/系数；//系数大概可以选择6，7，8 　　速度*=摩擦系数；//系数可以选择0.7，0.75，0.8 缓冲： 　　速度=（目标点-当前值）/系数； 　　速度取整； 转载于:https://www.cnblogs.com/yuxingyoucan/p/5781834.html...
js实现运动效果
domino~~的博客
08-19 697
js实现运动效果 在很多页面或者是app上我们都能看到物体运动这个效果，现在随着css3的出现在其动画效果与过渡效果中都可以去实现。但是在一些时候用自己封装的运动效果在性能上可能更加的好。那么接下来就用js来实现一个物体匀速运动，加速运...
前端js 常用积累
NBBLOGS的博客
11-15 417
1.返回顶部    $(function(){         $('.top').hide();         $(window).scroll(function() {                     if($(window).scrollTop() >= 100){                 $('.top').fadeIn(300);              
让div运动起来 js实现缓动效果
10-19
本文主要探讨的是如何使用JavaScript来实现div元素的缓动效果，即平滑、流畅的动画效果。缓动效果常常用于网页上的滚动、过渡、淡入淡出等交互操作，使得用户界面更加生动且易于接受。 首先，我们看到一个名为`...
js实现同一页面多个运动效果的方法
10-24
在JavaScript编程中，实现同一页面上的多个运动效果是一项常见的需求，尤其在动态网页设计中。本文将详细解析如何使用JavaScript来实现这一功能，主要通过一个具体的实例来展示其工作原理和关键技巧。 首先，实现...
JS多物体实现缓冲运动效果示例
11-26
- JavaScript运动效果与技巧汇总：这可能涵盖各种动画效果的实现，如淡入淡出、滑动、旋转等。 - JavaScript切换特效与技巧总结：这可能讨论如何实现元素的切换展示，如轮播图、选项卡等。 - JavaScript查找算法技巧...
JS实现运动缓冲效果的封装函数示例
11-28
在JavaScript编程中，运动效果是常见的一种动态交互方式，它能增强用户界面的生动性和吸引力。本文将深入探讨如何通过封装函数实现一个具有缓冲效果的运动功能，这可以帮助开发者更高效地管理和重用代码。 首先，...
js实现页面各种运动效果总结
ZHANGJIN9546的博客
06-21 477
匀速运动： 解决速度问题 : 速度在函数体内部完成 var speed = target-obj.offsetLeft > 0 ? 正值 ： 负值 缓冲运动： 解决速度问题 让运动的物体达到目标值 var speed = (target - obj.offsetLeft)/10; //速度随着时间变化而变化 speed = speed > 0 ? Math.ceil( sp...
多种常见的js效果
04-06
多种常见的js效果 手风琴什么的 我不是做美工的 但是多少用到点！需要可以下载！
常用的js效果
08-23
省市区三级联动，模拟select下拉列表，随机生成字母数字验证码，快速排序实现，H5拖放API，自定义滚动条样式
js常用特效
09-06
js常用的一些特效，适合初学者以及有需要的朋友们。可以快速实现一些小功能。
一个很炫的JS效果，动态的图标。
05-10
一个很炫的JS效果，立体图标。如果能把这个放到桌面上，貌似是个很酷的选择。下来看看吧。
介绍JavaScript中Math.abs()方法的使用
10-24
主要介绍了介绍JavaScript中Math.abs()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
js运动特效
renfeideboke的博客
12-15 139
一、平滑运动（匀速运动） 指每次运动相同的距离（步长）。 二、减速运动(缓冲运动) 指远快近慢，然后慢慢停止在目标点， 公式：步长=（目标值-当前值）/缩放比例 实例： <div id="box"> </div> <script> var o = document.getElementById('box'); //(目标的左边距-（物体的左边距+物体宽度）)/缩放比例 o.onclick = function (
js 缓冲运动效果
cyh
06-04 1015
缓冲需要用到数值取整，向上取整:Math.ceil()  向下取整Math.floor() 移动的速度慢慢减慢的效果，移动速度=(终点位置 - 当前位置) / 一个数 无标题文档 #div{ width:150px; height:150px; background:#0C6; position:absolute; left:0; top:50px; } #div2{
JavaScript的运动——弹性运动原理及案例
桃花扇的博客
02-28 547
弹性运动在生活中类似考虑阻力的单摆运动，即在指定位置的左右摇摆最后停在指定位置，代码如下 html代码 <div></div> <span></span> css代码 div { width: 100px; height: 100px; background-color: steelblue; positi...
JavaScript从基础到高级应用：运动基础教程
在JavaScript中，运动通常指的是元素在页面上的位置变化或者其他视觉效果，如透明度调整。以一个div元素为例，要让它动起来，关键在于两步： 1. 给div添加绝对定位（`position:absolute`）并设置初始位置，如`left`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值