前端开发——Animation动画

最新推荐文章于 2024-06-07 16:01:04 发布

落花新月

最新推荐文章于 2024-06-07 16:01:04 发布

阅读量1.5k

点赞数

分类专栏： Web前端文章标签： animate animation动画贝塞尔曲线匀速圆周运动

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/51078122

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1.Animation动画是不用触发，就可以动起来的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation动画的练习</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background:red;
            border-radius: 50%;
            position: absolute;
            top:200px;
            left: 200px;
            text-align: center;
            line-height: 100px;
            color:white;
            font-size: 24px;
            opacity: 0.8;     /*透明度*/

            /*dong为动画名称，0s为动画起始时间，5表示为运行次数,alternate表示往下以后往上*/
            -webkit-animation: dong 1s ease 0s 5 alternate;     /*调用动画，infinite 表示无限运动*/
        }
        /*定义animation动画*/
        @-webkit-keyframes dong {
            from{
                top:200px;
                left:200px;
            }
            to{
                top:350px;
                left: 350px;
            }
        }
    </style>
</head>
<body>
  <div>点我</div>
</body>
</html>

运行代码查看效果：

小球来回运动5次

2.Animation不能做曲线运动，所以要引入另一个js插件：JQuery.path.js

gitHub下载方式：去 https://github.com/——》输入Jquery.path——》下载——》拷贝gitHub上面的贝塞尔曲线代码——》将animate曲线调用中的内容修改成当前的标签名称

曲线运动

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>曲线运动（引用JQuery.path.js插件）</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            top: 50px;
            left: 100px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.path.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
//            定义了贝塞尔曲线
            var bezier_params = {
                start: {
                    x: 185,
                    y: 185,
                    angle: 10
                },
                end: {
                    x:540,        /*通过修改x、y的值来改变运动的结束点坐标*/
                    y:110,
                    angle: -10,
                    length: 0.25
                }
            };
//           在animate中使用贝塞尔曲线
            $("div").animate({path : new $.path.bezier(bezier_params)});  /*修改为"$("div")*/
        });
    </script>
</head>
<body>
  <div></div>
</body>
</html>

结果：请运行上述代码查看

3.圆周运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆周运动</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            top: 50px;
            left: 100px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.path.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var arc_params = {
                center: [285,185],       /*定义圆心*/
                radius: 100,      /*半径*/
                start: 30,      /*起始角度*/
                end: 200,       /*结束角度*/
                dir: -1     /*-1表示顺时针，1表示逆时针*/
            };

            $("div").animate({path : new $.path.arc(arc_params)},2000);   /*2000ms表示运动的时间*/
        });
    </script>
</head>
<body>
  <div></div>
</body>
</html>

此时上面的代码执行的结果是：只做一次运动。

若要周而复始的运动，则需要：

<script type="text/javascript">
        $(document).ready(function(){
            var arc_params = {
                center: [285,185],       /*定义圆心*/
                radius: 100,      /*半径*/
                start: 30,      /*起始角度*/
                end: 200,       /*结束角度*/
                dir: -1     /*-1表示顺时针，1表示逆时针*/
            };
            run();
            function  run(){
                /*2000ms表示运动的时间*/
                $("div").animate({path : new $.path.arc(arc_params)},2000,function(){
//                    回调函数，动画执行了之后继续调用run()方法
                    run();
                });
            }
        });
    </script>

注意事项：

修改起始点以及结束点，让它做匀速的运动

    <script type="text/javascript">
        $(document).ready(function(){
            var arc_params = {
                center: [285,185],       /*定义圆心*/
                radius: 200,      /*半径*/
                start: 0,      /*起始角度*/
                end: 1,       /*结束角度，结束角度只要比起始角度多1度，就要绕一圈*/
                dir: -1     /*-1表示顺时针，1表示逆时针*/            };            run();            function  run(){                /*2000ms表示运动的时间,linear表示匀速运动*/                $("div").animate({path : new $.path.arc(arc_params)},2000,"linear",function(){//                    回调函数，动画执行了之后继续调用run()方法                    run();                });            }        });    </script>

修改内容高亮显示：

4.绝对定位的盒子是没法通过margin:0 auto来实现居中的，可以通过translateX(-50%) translateY(-50%)这种方式来实现。

落花新月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发——Animation动画

Animation动画是不用触发，就可以动起来的html>lang="en"> charset="UTF-8"> Animation动画的练习 type="text/css"> div{ width: 100px; height: 100px; background:red;
复制链接

扫一扫

专栏目录