用js+css3作一个小球投篮的动画（easing）

时间 2019-11-26

标签 js+css3 css 一个小球投篮动画 easing 栏目 JavaScript 繁體版

原文原文链接

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.11.3.min.js"></script>
</head>
<body>
    <style>
        @keyframes mycolor{
            10%{
                background:green;
            }
            20%{
                background:red;
            }
            50%{
                background:blue;
            }
            80%{
                background:yellow;
            }
        }
   #test{
      width:30px;
      height:30px;
     transition:all ease 2s 0.2s;
     background:#0094ff;
   }
   #test:hover{
       width:1000px;
       animation:mycolor 2s;
   }
   #water,#water1{
       position:absolute;
       width:10px;
       height:10px;
       border-radius:5px;
       background:red;
       top:400px;
       left:100px;
       cursor:pointer;
   }
   @keyframes myaction{
       80%{
           top:0px;
           left:30px;
       }
       100%{
           top:10px;
       left:10px;
       }
   }
  
    </style>
    <div id="test">

     </div>
    <div id="water1"></div>
    <div id="water"></div>

    <script>
        var i = 0;
        $("#water").click(function () {
            $(this).css("animation", "myaction 1s");
            setTimeout(function () {
                $("#water").removeAttr("style");
            }, 1000);
        });
    </script>
</body>
</html>

这里测试了 CSS3中的新的特性animation,实现了一个简单的移动动画，能够经过这种方式，作出不一样的效果，这里只是抛砖引玉。css

下面是用JQUERY的esing行为实现的一个，效果更好。html

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="jquery.easing.1.3.js"></script>
</head>
<style>
 #lanzi{
     width:30px;
     height:30px;
     background:blue;
 }
 #qiu{
     width:20px;
     height:20px;
     border-radius:20px;
     position:absolute;
     top:500px;
     left:700px;
     background:red;
 }
</style>
<body>
    <div id="lanzi"></div>
    <div id="qiu"></div>
    <script>
        $(function () {
            $("#qiu").click(function () {
                $("#qiu").animate({
                    top: [0, 'linear'],
                    left: [10, 'easeInExpo']
                }, 1000).animate({
                    top:10,left:10
                },100);
            });
        });
    </script>
</body>
</html>

jQuery默认动画jquery

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果，使用代码以下：app

$(element).slideUp({ 
    duration: 1000,  
    easing: method,  
    complete: callback 
});

参数duration：定义动画运动时间，毫秒，其实就是速度，时间越短，运动速度越快。ide

参数easing：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们 是：
linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，
easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine，
 easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic，
easeOutElastic，easeInOutElastic， easeInBack，easeOutBack，easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce.

easing的下载地点：
http://gsgd.co.uk/sandbox/jquery/easing/

1. linear2. swing3. easeInQuad4. easeOutQuad5. easeInOutQuad6. easeInCubic7. easeOutCubic8. easeInOutCubic9. easeInQuart10. easeOutQuart11. easeInOutQuart12. easeInQuint13. easeOutQuint14. easeInOutQuint15. easeInExpo16. easeOutExpo17. easeInOutExpo18. easeInSine19. easeOutSine20. easeInOutSine21. easeInCirc22. easeOutCirc23. easeInOutCirc24. easeInElastic25. easeOutElastic26. easeInOutElastic27. easeInBack28. easeOutBack29. easeInOutBack30. easeInBounce 31. easeOutBounce32. easeInOutBounce 测试

<!DOCTYPE html>
<html>
<head>

</head>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<style>
    #lanzi{
        background:blue;
        width:30px;
        height:30px;
    }
    #qiu{
        background:red;
        width:20px;
        height:20px;
        border-radius:10px;
        position:absolute;
        top:400px;
        left:500px;
    }
</style>
<body>
 <div id="lanzi"></div>
    <div id="qiu"></div>
    <script>
        $("#qiu").click(function () {
            $(this).clone().appendTo('body').animate({
                top: [10, "easeOutCirc"],
                left: [10, "linear"]
            }, 1000, function () { $(this).fadeOut(5000) })
        })
    </script>
</body>
</html>