javascript动画会飞的叶子

最新推荐文章于 2024-03-09 15:45:20 发布

谷草寒

最新推荐文章于 2024-03-09 15:45:20 发布

阅读量487

点赞数

CC 4.0 BY-SA版权

文章标签： javascript html 动画

本文链接：https://blog.youkuaiyun.com/mrmbob/article/details/52893464

本文介绍如何利用jQuery的transform2d.js插件实现HTML元素（叶子）的旋转动画效果，通过HTML代码和JavaScript代码的配合，使叶子在页面上翩翩起舞。加载并应用插件后，通过animate方法实现transform属性的平滑过渡，达到逼真的动画视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

首先应用了插件jquery-transform2d.js
可以使animate支持transform，让叶子旋转。

html代码：

<html>
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            list-style: none;
            background: transparent;
        }
        #loadingDisplay{
            width: 500px;
            height: 300px;
            margin: 0 auto;

            position: relative;
        }
        #loadingLeaves{
            height: 300px;
            width: 500px;
            position: absolute;
            overflow: hidden;
            left: 50%;
            margin-left: -250px;
            top: -100px;

        }
        #loadingDisplay .center{
            width: 120px;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            top: 210px;
            height: 90px;
            background: url(tkk.png) no-repeat center bottom;
            background-size: contain;
        }
        .dropLeaves span{
            display: block;
            position: absolute;
            width: 31px;
            height: 31px;
            background-repeat: no-repeat;
            background-position: center center;
        }
        .dropLeaves span._1{
            background-image: url(1.png);
        }
        .dropLeaves span._2{
            background-image: url(2.png);
        }
        .dropLeaves span._3{
            background-image: url(3.png);
        }
        .dropLeaves span._4{
            background-image: url(4.png);
        }
        .dropLeaves span._5{
            background-image: url(5.png);
        }
        .dropLeaves span._6{
            background-image: url(6.png);
        }
        .dropLeaves span._7{
            background-image: url(7.png);
        }

    </style>


    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <script type="text/javascript" src="transform2d.js"></script>
    <script type="text/javascript" src="leaves.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // body...
            var leaves = new Leaves($("#loadingLeaves"),3000,4000,800);
            leaves.start();
        });
    </script>
</head>

<body>
    <div id="loadingDisplay">
        <div class="center">
            <p>
                <img src="mA.png" alt="Loading" width="56" height="12">
            </p>

            <div id="loadingLeaves" class="dropLeaves">

            </div>
        </div>
    </div>  
</body>
<html>

js代码：

var Leaves = function(container, maxTempo, minTempo ,dropTempo){
    var leavesCon = container.addClass('dropLeaves');
    var leavesVariation = 7;
    var leafWidth = 31;
    var uniqueID = 0;
    var idPrfx = 'loadingLeaf-';
    var timer;

    this.start = function(){
        dropLeaf();
        timer = setInterval(dropLeaf, dropTempo);
    }

    this.end = function(){
        clearInterval(timer);
    }

    function dropLeaf(){
        var type = Math.floor(Math.random() * leavesVariation) + 1;
        var starY = Math.floor(Math.random() * (leavesCon.outerHeight() - leafWidth)) + 1;
        var endY = Math.floor(Math.random() * (leavesCon.outerHeight() - leafWidth)) + 1;
        var tempo = Math.floor(Math.random() * (minTempo - maxTempo)) + maxTempo;
        var id = idPrfx + uniqueID;
        uniqueID ++;
        leavesCon.append("<span class='_" + type + "' id='" + id + "'>");
        $("#" + id).css({
            top : starY,
            left : leafWidth * -1,
            transform: "rotate(0deg)"
        }).animate({
            top:endY,
            left: leavesCon.outerWidth() + leafWidth * 2,
            transform: "rotate(720deg)"
        },tempo, "linear",function(){
            $(this).remove();
        });
    }
}