用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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。