js 小球缓动动画

于 2021-10-15 17:03:48 发布
阅读量606 收藏 1
点赞数
分类专栏： JavaScript 文章标签： 动画 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42374676/article/details/120786742
版权

参考:https://www.jianshu.com/p/003415b07a1a


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        /**
 * 创建抛物线小球
 * @param ballEl 小球对象
 * @param startLoc 起始位置 相对于整个页面来说的
 * @param endLoc 终点位置 相对于整个页面来说
 * @return ball, ballWrapper, ballStyle, ballWrapperStyle
 */
        const createBall = ({ ballCss, startLoc, id }) => {
            // 创建小球样式
            let ballStyle = document.createElement('style');
            let ballWrapperStyle = document.createElement('style');
            ballCss = `
            #cbBallStyle_${id} {
                ${ballCss}
                position: absolute;
                top: 0;
                left: 0;
            }`;
            {
                ballWrapperStyle.type = 'text/css';
                const ballWrapperCss = `
                #cbBallWrapperStyle_${id} {
                    position: fixed;
                    top: ${startLoc[1]}px;
                    left: ${startLoc[0]}px;
                    z-index: 9999;
                }`;
                ballWrapperStyle.innerHTML = ballWrapperCss;
                // 将style样式存放到head标签
                document.getElementsByTagName('head')[0].appendChild(ballWrapperStyle);

                ballStyle.type = 'text/css';
                ballStyle.innerHTML = ballCss;
                // 将style样式存放到head标签
                document.getElementsByTagName('head')[0].appendChild(ballStyle);
            }

            let ballWrapper = document.createElement('div');
            ballWrapper.setAttribute('id', 'cbBallWrapperStyle_' + id);
            document.body.appendChild(ballWrapper);

            let ball = document.createElement('div');
            ball.setAttribute('id', 'cbBallStyle_' + id);
            ballWrapper.appendChild(ball);
            return { ball, ballWrapper, ballStyle, ballWrapperStyle }
        };

        /**
         * 清除小球和style
         * @param ball
         * @param ballWrapper
         * @param ballStyle
         * @param ballWrapperStyle
         */
        const clearBall = ({ ballWrapper, ballStyle, ballWrapperStyle }) => {
            ballWrapper.parentNode.removeChild(ballWrapper);
            ballStyle.parentNode.removeChild(ballStyle);
            ballWrapperStyle.parentNode.removeChild(ballWrapperStyle);
        };

        const createKeyFrames = ({ ball, ballWrapper, startLoc, endLoc, duration, id }) => {
            let x1 = startLoc[0];
            let y1 = startLoc[1];
            let x2 = endLoc[0];
            let y2 = endLoc[1];
            let keyFramesCss = '';
            let cubicBezier = '';
            // 向上抛
            if (y2 !== y1) {
                keyFramesCss = `
            @keyframes hor-animation_${id} {
                0% {
                    left: 0px;
                }
                100% {
                    left: ${x2 - x1}px;
                }
            }
            @keyframes ver-animation_${id} {
                0% {
                    top: ${y1}px;
                }
                100% {
                    top: ${y2}px;
                }
            }`;
                if (y2 < y1) {
                    cubicBezier = 'cubic-bezier(.13,.6,.41,.8)';
                } else {
                    cubicBezier = 'cubic-bezier(.72,.1,.92,.43)';
                }
            } else if (y2 === y1) {
                keyFramesCss = `
            @keyframes hor-animation_${id} {
                0% {
                    left: 0px;
                }
                100% {
                    left: ${x2 - x1}px;
                }
            }
            @keyframes ver-animation_${id} {
                0% {
                    top: ${y1}px;
                }
                45% {
                    top: ${y1 - 50}px;
                }
                55% {
                    top: ${y1 - 50}px;
                }
                100% {
                    top: ${y2}px;
                }
            }`;
                cubicBezier = 'cubic-bezier(.49,.48,.49,.48)';
            }

            let keyFramesStyle = document.createElement('style');
            keyFramesStyle.type = 'text/css';
            keyFramesStyle.innerHTML = keyFramesCss;
            document.getElementsByTagName('head')[0].appendChild(keyFramesStyle);
            ballWrapper.setAttribute('style', `
    animation: ver-animation_${id} ${duration}s infinite;
    animation-timing-function: ${cubicBezier};`);
            ball.setAttribute('style',
                `animation: hor-animation_${id} ${duration}s linear infinite;`);
        };
        /**
         * 抛物线小球运动函数
         * @param ballEl 小球对象
         * @param startLoc 起始位置 相对于整个页面来说的
         * @param endLoc 终点位置 相对于整个页面来说
         * @param duration 运行时间
         */
        const parabolaBall = ({ ballCss, startLoc, endLoc, duration }) => {
            if (!duration) duration = 0.5;
            if (!ballCss) ballCss = `width: 20px;
                          height: 20px;
                          border-radius: 50%;
                          background-color: #00aa00;`;
            let id = parseInt(Math.random() * 10000) + new Date().getTime();
            // 创建小球
            const { ball, ballWrapper, ballStyle, ballWrapperStyle } = createBall({ ballCss, startLoc, id });
            createKeyFrames({ ball, ballWrapper, startLoc, endLoc, duration, id });


            setTimeout(() => {
                clearBall({ ballWrapper, ballStyle, ballWrapperStyle });
            }, duration * 1000)
        };

        // export default parabolaBall;

    </script>
    <script>
        console.log(parabolaBall, '===parabolaBall')

        parabolaBall({ startLoc: [0, 0], endLoc: [100, 100], duration: 1 })
    </script>
</body>

</html>
web修理工
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用JS实现缓动的小球的效果。
m0_53911328的博客
04-27 1723
缓动的小球 缓动的实现原理：通过定时器连续的修改当前DOM元素的某个样式值，达到一个动态的特效。 缓动动画公式： 计算每次缓动的步长 step = ( target - leader ) / 10 计算下次的起始点 leader = leader + step target 表示目标点。 leader 表示起始点。 step 表示从起始点到目标点每次缓动的步长。而缓动特效在实现时，随着距离 target 越来越近，s.
原生JS实现缓动的小球案例
LY_code的博客
04-17 4107
缓动的小球：就是当鼠标移动到小球内，小球随着鼠标的移动，小球跟着移动，而且小球会有很多，跟随者第一个小球接着运动。要实现这样的效果也就是要有以下的操作：1.小球的缓存移动其实就是有很多小球（div）,他们每个小球的出发点和目的点都是一样的，只是控制间隔时间再运动。2.再用for循环分别获取到每个小球，使每次读取到的i（数组下标）和间隔的一个关系：50*i.要移动div形成美丽的变化，其实每个div...
缓动的小球
qq_45683093的博客
10-11 973
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>缓动的小球</title> <style> #box{position:absolute;width:120px;height:120px;line-height:120px;tex...
js前端画布实现动画小球自由落体
05-05
本示例中，我们探讨的主题是“js前端画布实现动画小球自由落体”，这涉及到JavaScript基础、HTML5 Canvas API以及基本的物理学概念。 首先，我们需要一个HTML文件作为容器来展示我们的动画。在这个例子中，`动画....
原生js小球碰撞动画代码
09-13
总的来说，"原生js小球碰撞动画代码"是一个综合性的项目，涵盖了JavaScript编程基础、DOM操作、CSS样式控制以及基本的物理知识。通过这个项目，开发者不仅可以提升JavaScript的实战能力，还能深入理解网页动态效果的...
css3动画 小球滚动 js控制动画暂停
11-21
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。 CSS3 @keyframes 规则 要创建 CSS3 动画，你需要了解 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内...
小球的随机运动
10-23
至于标签中的"js动"，指的是JavaScript驱动的动画，也就是通过JavaScript控制每一帧的变化，实现动态效果。"Html5 Canvas"、"setInterval"和"小球"则明确了这个项目的主要技术点和实现方式。 总结，"小球的随机运动...
小球运动_动画
06-20
用户可以通过点击、滚动或其他交互方式与这些小球动画进行互动。 制作这样的动画效果，开发者可能会利用编程语言AS3（ActionScript 3）来编写脚本，控制小球的行为，比如碰撞检测、物理模拟（重力、速度等）以及...
JS 简单的缓动效果
03-31
NULL 博文链接：https://ch-kexin.iteye.com/blog/1387462
flash小球缓动的实例以及源代码
04-22
这是一个小球缓动的flash，当鼠标点击画面是，一个小球会跑到鼠标点击的位置，当然是有运动效果的哦！
javascript动画之圆形运动,环绕鼠标运动作小球
10-29
javascript动画之圆形运动,环绕鼠标运动作小球(兼容ie,ff,chrome,……)
缓动的小球 - 事件
cchhpp2的博客
09-02 505
缓动的小球-事件 上代码 <!DOCTYPE html> <html lang="en"> <head> <title>缓动的小球</title> <style> *{margin: 0; padding: 0;} #box{ width: 500px; height:100px; /* border-radius添加圆角边框, 是设置四个border-*-radius属性的简写 */
【JavaScript】动态的小球
bangtuo9862的博客
04-22 244
参考： 1、CSS 对比 JavaScript 动画 2、CSS制作水平垂直居中对齐_水平居中, 垂直居中 教程_w3cplus：https://www.w3cplus.com/css/vertically-center-content-with-css 3、box-shadow：http://www.w3school.com.cn/cssref/pr_box-shadow.asp...
js 简单的小球动画移动
新入菜鸟
01-25 3583
创建一个简单的代码 首先在body里创建一个球；设置它的css样式： 然后用js编写代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;小球动画移动&lt;/title&gt; &lt;style type
jquery小球上下跳动动画
最新发布
03-15
jQuery是一个流行的JavaScript库，它简化了JavaScript编程，并提供了许多方便的功能和特效。要实现小球上下跳动的动画效果，可以使用jQuery的动画函数来实现。 首先，你需要在HTML文件中引入jQuery库。可以通过以下方式引入： ```html <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> ``` 然后，在JavaScript代码中，你可以使用`animate()`函数来创建动画效果。下面是一个示例代码，实现了小球上下跳动的动画效果： ```javascript $(document).ready(function() { // 获取小球元素 var ball = $("#ball"); // 定义动画函数 function animateBall() { // 小球向上移动 ball.animate({ top: "-=100px" }, 500, function() { // 小球向下移动 ball.animate({ top: "+=100px" }, 500, function() { // 递归调用动画函数，实现循环效果 animateBall(); }); }); } // 调用动画函数开始动画 animateBall(); }); ``` 在上面的代码中，我们首先获取了小球元素（假设其id为"ball"），然后定义了一个名为`animateBall()`的动画函数。该函数使用`animate()`函数来实现小球的上下移动效果。在每次移动完成后，通过回调函数再次调用`animateBall()`函数，从而实现循环效果。 请注意，上述代码只是一个简单的示例，你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值