tweenMax实体抛物线

最新推荐文章于 2025-06-24 17:36:02 发布

weixin_30547797

最新推荐文章于 2025-06-24 17:36:02 发布

阅读量297

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangzhicheng/p/7492531.html

本文介绍了一种使用TweenMax库结合HTML和JavaScript来创建动态网页元素的方法。通过Bezier曲线实现平滑过渡效果，使页面上的元素能够从当前位置移动到指定的目标位置，并在过程中呈现出流畅的动画效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>  
    <script src="TweenMax.min.js"></script>  
    <style>
    .div{position: absolute;width: 200px;height: 200px;top: 0;left: 0;}  
    .div2{width: 40px;height: 30px;background-color:pink;border-radius: 50%;} 
    </style>
</head>
<body>
     
</body>
</html>

<script>
//目标位置
var tx=500,ty=50;

function move(obj,x,y){
    var t = new TimelineMax();
// tweenmax-bezier曲线     staggerTo可以元素一起运动
    t.staggerTo(obj,1,{  
    // bezier函数返回数组   只有 staggerTo 才可以使用 cycle
    cycle : {  
        bezier : function(){  
            var max=Math.max(tx,x);
            var min=Math.min(tx,x);
            var val=(max-min)*0.5+min;
            return [  
                {top:y,left:x},  
                {top:Math.min(y,ty)*0.5,left:val},  
                {top:ty,left:tx},  
            ]  
        }  
        },
        onComplete:function(){
        $(obj).fadeOut(function(){
            $(this).remove();
        });
        }  
    }
);
}

var i=0;
$(document).on("click",function(e){
    var x=e.pageX,
        y=e.pageY;
        console.log(x,y);
        $('<div class="div div2 div2'+i+'"></div>').appendTo("body").css({top:y,left:x});
        move(".div2"+i,x,y);
        i++;
});
</script>