JavaScript（九），缓冲动画

于 2022-09-19 21:56:25 发布
阅读量218 收藏 1
点赞数
文章标签： javascript 动画 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68531139/article/details/126942953
版权

缓冲动画

1.缓冲动画

1.平滑运动

  • 需求：点击起飞 盒子开始移动 移动到1000px 盒子停止
<body>
    <button>起飞</button>
    <div></div>
    <script>
        /* 
            需求：点击起飞按钮  红色盒子开始移动  移动到1000px的位置开始停止
        */
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0]
        //添加点击事件
        btn.onclick = function () {
   
           var timer =  setInterval(function () {
   
                //在当前left值的基础上+10
                var current = parseInt(getStyle(oDiv, "left")) + 10;
                if(current==1000){
   
                    // 清除定时器
                    clearInterval(timer)
                }
                oDiv.style.left = current + "px";
            }, 50)

        }
    </script>

2.缓冲动画基础功能

  • 需求：目标值是500和目标值是1000 所花费的时间是一样的
<body>
    <button>起飞</button>
    <div></div>
    <script>
        /* 
            需求：目标值是500和目标值是1000 所花费的时间是一样的
            速速 = 路程 / 时间
        */
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0]
        //添加点击事件
        btn.onclick = function () {
   
            var timer = setInterval(function () {
   
                //在当前left值的基础上+10
                var current = parseInt(getStyle(oDiv, "left"));
                var speed = (500 - current) / 10;// speed  速度/步长
                console.log(current);//永远达不到目标值
                if (current == 500) {
   
                    // 清除定时器
                    clearInterval(timer)
                }
                oDiv.style.left = current + speed + "px";
            }, 50)

        }
    </script>
  • 问题1:永远到不了目标值
    • 原因：当current是491的时候 speed=0.9 left值=parseInt(491.9px) =491 所以current的值始终在491
    • 解决方法：让speed向上取整 Math.ceil
<body>
    <button>起飞</button>
    <div></div>
    <p></p>
    <script>
        /* 
             问题1：永远达不到目标值
             原因：当current是491的时候 speed=0.9 left值=parseInt(491.9px) =491 所以current的值始终在491
             解决方法：让speed向上取整  Math.ceil
        */
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0]
        //添加点击事件
        btn.onclick = function () {
   
            var timer = setInterval(function () {
   
                //在当前left值的基础上+10
                var current = parseInt(getStyle(oDiv, "left"));
                var speed = (500 - current) / 10; // speed  速度/步长
                speed = Math.ceil(speed);
                console.log(speed);
                if (current == 500) {
   
                    // 清除定时器
                    clearInterval(timer)
                }
                oDiv.style.left = current + speed + "px";
            }, 50)

        }
    </script>
</body>

3缓冲动画来回运动

  • 需求：从left值是1000的位置 缓冲到500的位置
  • 问题2：往回运动的时候 永远无法达到目标值
    • 分析：current是509的时候 speed的值是-0.9 Math.ceil之后就成了-0 speed的值最终是0 left值还是509 导致目标值永远都是509
    • 解决：让speed向下取整 Math.floor
<body>
    <button>起飞</button>
    <div></div>
    <p></p>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0]
        /* 
            问题2：往回运动的时候  永远无法达到目标值
            分析：current是509的时候  speed的值是-0.9 Math.ceil之后就成了-0 speed的值最终是0   left值还是509 导致目标值永远都是509
            解决：让speed向下取整  Math.floor
        */
        //添加点击事件
        btn.onclick = function () {
   
            var timer = setInterval(function () {
   
                //在当前left值的基础上+10
                var current = parseInt(getStyle(oDiv, "left"));
                var speed = (500 - current) / 10; // speed  速度/步长
                speed = Math.floor(speed);
                console.log(current);
                if (current == 500) {
   
                    // 清除定时器
                    clearInterval(timer)
                }
                oDiv.style.left = current + speed + "px";
            }, 50)

        }
    </script>
</body>
  • 来回运动speed值的问题
    • 0-500 speed的值正数 Math.ceil
    • 1000-500 speed的值是负数 Math.floor
<body>
    <button>起飞</button>
    <div></div>
    <p></p>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0]
        /* 
           speed值的问题
             0-500  speed的值正数   Math.ceil
             1000-500 speed的值是负数  Math.floor
        */
        //添加点击事件
        btn.onclick = function () {
   
            var timer = setInterval(function () {
   
                //在当前left值的基础上+10
                var current
最低0.47元/天 解锁文章
‬‬‫‍‍‭‪‏‏‪2‌6——‫‏‬‏
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript匀速动画和缓冲动画详解
10-21
主要为大家详细介绍了javascript匀速动画和缓冲动画,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
web js笔记
lkhyyds的博客
09-15 158
学习笔记
10个常用的JS工具库，80%的项目都在用！
热门推荐
前端开发博客
04-07 1万+
大家好，我是漫步，今天来分享10个比较常用的JS工具库，有用记得收藏关注我。关注公众号前端开发博客，回复“加群”加入我们一起学习，天天进步高手区别于普通人的重要一点是，他们善于利用工具，把更多的时间留给了规划和思考。写代码也是同样的道理，工具用好了，你就有更多的时间来规划架构和攻克难点。今天就给大家分享一下当前最流行的 js 工具库，如果觉得有用，就把大拇指点亮一下吧！...
js的缓冲动画
weixin_64037609的博客
09-18 270
js缓冲动画
js之pc端网页特效缓冲动画（2）
m0_61547956的博客
05-07 524
目录 一、缓冲动画原理 二、缓冲动画多个目标值之间移动 三、缓冲动画添加回调函数 四、动画函数的使用之问题反馈案例 五、案例之品优购轮播图 六、节流阀以及逻辑中断应用 七、筋斗云案例 一、缓冲动画原理 让元素的速度有所变化，最常见的是让速度慢慢停下。 原理：让盒子每次移动的距离越来越小，速度就会慢慢停下来，核心算法：（目标位置-当前位置）/10，作为每次移动的步长，比如目标位置是100，当前位置0，所以步长就会10...9、8、7...0，停止的条件，让当前盒子距离等于目标位置就停止..
JavaScript--缓冲动画
look857857的博客
04-07 238
JavaScript--缓冲动画 效果 代码
Javascript动画效果（1）
11-23
在这篇博文中我们只介绍简单的匀速运动、简单的缓冲运动和简单的多物体运动后面我们还会介绍任意值变化的运动、链式运动、同时运动，同时我们还会简单的封装一个运动插件并且还会将Javascript方法和jquery方法进行...
webpjs:JavaScript Webp解码器
05-16
JavaScript Webp解码器 在Chrome，Firefox和WebView中解码“ webp”图像。 Emscripten将创建一个全局模块对象，或者在提供时使用您的全局对象。 我们想知道什么时候已加载完所有内容，因此我们需要提供自己的内容。...
HTML5+JavaScript 动画基础 2013年出版423页
01-22
《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分，分别介绍了动画的基本概念、动画的JavaScript基础、动画中的三角学、渲染技术、速度向量和加速度、边界与摩擦力、用户...
《js动画效果》之缓冲动画
mmrsdym的专栏
10-11 832
学习资源来自慕课网《js》
Js弹性缓冲反弹动画演示示例.rar
07-10
Js弹性缓冲运动动画演示示例，反弹动画网页例子，实现了固定范围反弹 、范围渐变反弹、自定范围反弹，可指定范围内反弹运动，可演示延迟、加速、减慢等动画速度。
js 缓冲动画
黄大仙
08-10 169
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: absolute; left: 0; width: 100px; hei..
JavaScript-缓冲动画小案例
OuYyds的博客
04-07 193
有四个红色div，当鼠标移入时，让红色的div以缓冲速度变宽，鼠标移开时，让红色div以缓冲速度回到原来的宽度，且移入时位置发生变化，移出又回到原来的位置。 <style> div{ width: 100px; height: 100px; background-color: red; margin-top: 5px; posit...
JS缓动动画原理教学（超细节）
周百万的博客
07-02 424
JavaScript缓动动画原理教学（超细节）
按钮交互loading ---- 转圈圈 加载
weixin_30653023的博客
12-04 3944
按钮loading状态自定义选项（功能）： 可以在元素上添加data-am-loading来设置选项： spinner加载动画图标，适用于支持 CSS3 动画、非input元素，写图标名称即可； loadingText加载时显示的文字， 默认为loading； resetText重置以后的显示的文字，默认为原来的内容 <button type="b...
SwiftUI 高级动画Button按钮之点击后变化载入loading显示等待（教程含源码）
iCloudEnd的博客
04-05 915
实战需求 SwiftUI 高级动画Button按钮之点击后变化载入loading显示等待 本文价值与收获 看完本文后，您将能够作出下面的界面 基础知识 Button 在触发时执行操作的控件。 struct Button<Label> where Label : View 总览 您可以通过提供操作和标签来创建按钮。操作是方法或闭包属性，当用户单击或点击按钮时，该操作会执行某些操作。标签是描述按钮操作的视图，例如，通过显示诸如“取消”之类的文本或诸如“后退箭头”之类的图标来描述。 Butt
js缓冲运动
u013400314的博客
07-12 216
缓冲运动现象：逐渐变慢，最后停止原理：距离越远，速度越大速度的计算方式：1，速度由距离决定2，速度＝（目标值-当前值）/缩放系数说明：速度为正负数时，也决定了物体移动的方向示例：div缓冲运动Bug: 1,div向右运动时，无法到达指定位置 解决：速度向上取整,Math.ceil()2,div向左运动时，无法到达指定位置 解决：速度向下取整，Math.floor()原因：速度为小数时，造成的总结：但凡做缓冲运动时，速度一定要取整 速度为正，向上取整 速度为负，向下取整 多物体运动注意事项： 1、多个物体同时
回弹效果
chubian7153的博客
03-14 237
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...
HTML+CSS+JS实现缓冲动画
最有趣的编程
11-04 1913
1.box.html代码： 广告 2.box.css代码： body { padding: 0px; margin: 0px; } #box { height: 200px; width: 200px; background-color: rebeccapurple; -
jQuery 过度动画
最新发布
12-28
jQuery提供了丰富的过渡动画效果，可以通过使用官方提供的动画方法或者引入jquery.easing.js插件来实现更多样化的过渡效果。 以下是两种实现过渡动画的方法： 1. 使用官方提供的动画方法 ```javascript // 使用show方法实现元素的淡入效果 $("#element").show("slow"); // 使用hide方法实现元素的淡出效果 $("#element").hide("fast"); // 使用slideUp方法实现元素的向上滑动效果 $("#element").slideUp(); // 使用fadeIn方法实现元素的渐显效果 $("#element").fadeIn(); // 使用animate方法实现自定义动画效果 $("#element").animate({ opacity: 0.5, left: "+=50", height: "toggle" }, 1000); ``` 2. 引入jquery.easing.js插件 首先，需要在HTML文件中引入jquery.easing.js插件： ```html <script src="jquery.easing.js"></script> ``` 然后，可以使用插件提供的过渡效果来实现更多样化的动画效果： ```javascript // 使用easeOutBounce效果实现元素的弹跳效果 $("#element").animate({ top: "200px" }, 1000, "easeOutBounce"); // 使用easeInOutBack效果实现元素的缓冲效果 $("#element").animate({ left: "200px" }, 1000, "easeInOutBack"); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值