js控制动画

最新推荐文章于 2024-01-05 13:24:17 发布

北岭有燕

最新推荐文章于 2024-01-05 13:24:17 发布

阅读量722

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/qq_41160739/article/details/117787857

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

效果如下：
在这里插入图片描述

代码如下（可以直接复制在本地观看效果）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style type="text/css">
        .box {
            margin-top: 200px;
            width: 228px;
            height: 156px;
            position: relative;
            background-color: pink;
            animation-name: test, tomove;
            animation-duration: 1s;
            animation-timing-function: linear;
            /* 匀速 */
        }
        
        .con {
            width: 50px;
            height: 156px;
            background-color: black;
            color: white;
            text-align: center;
        }
        
        .first,
        .second,
        .third {
            margin-top: 200px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: red;
            position: absolute;
            transform: translate(-50%, -50%);
        }
        
        .first {
            left: 900px;
            top: 0;
        }
        
        .second {
            left: 600px;
            top: 300px;
        }
        
        .third {
            left: 300px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="con">头部</div>
    </div>
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>

    <script type="text/javascript">
        var newx = 600
        var oldx = 900
        var newy = 300
        var oldy = 0
        var i = 0


        carmove(i)
        setTimeout(
            () => {
                newx = 300
                oldx = 600
                newy = 0
                oldy = 300
                i = i + 2
                $('.box').css({
                    "animation-duration": i + "s", //1s后上个动画执行完毕,让新的动画时间为2-1=1s
                    "animation-fill-mode": "forwards", // "animation-fill-mode": "forwards", 最后一帧结束后停止
                })
                carmove(i)
            },
            1000

        );

        function getTanDeg(y) {
            return Math.atan(y) * 180 / Math.PI
        }

        function carmove(i) {
            var deg = getTanDeg((oldx - newx) / (oldy - newy)) //计算两次坐标偏转的角度，自己可以画图看下
            console.log(deg)
            $(".box").css("transform", "translate(-50%, -50%) rotate(" + deg + "deg)"); //translate(-50%,-50%)让盒子位于自己中心
            var style = document.styleSheets[0] //获取html中第1个样式表中的第一条规则
            console.log(style.cssRules)
            style.insertRule("@keyframes test{from{ left: " + oldx + "px; }to{ left: " + newx + "px;}}", i); //js写入样式
            style.insertRule("@keyframes tomove{from{ top: " + oldy + "px; }to{ top: " + newy + "px;}}", 1 + i);
        }
    </script>
</body>

</html>

北岭有燕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js控制动画

效果如下：代码如下（可以直接复制在本地观看效果）：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
复制链接

扫一扫