jQuery抛物线运动实现方法(附完整demo源码下载)

以下是详细讲解“jQuery抛物线运动实现方法(附完整demo源码下载)”的完整攻略。

标题

介绍

本文将介绍如何使用jQuery实现抛物线运动效果，抛物线运动效果在页面中应用广泛，比如购物车飞入效果、搜索框提示效果等等。

实现方法

第一步：引入jQuery和Bezier插件

我们需要引入jQuery和Bezier插件，Beizer插件用于实现曲线运动效果，可以在GitHub中下载。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./jquery.bezier.js"></script>

第二步：定义起点和终点

我们需要定义起点和终点的坐标，以及上抛的高度和拋物线的曲率。

var start = {
    x: $('#start').offset().left + $('#start').outerWidth() / 2 - 20,
    y: $('#start').offset().top + $('#start').outerHeight() / 2 - 20
};

var end = {
    x: $('#end').offset().left + $('#end').outerWidth() / 2 - 20,
    y: $('#end').offset().top + $('#end').outerHeight() / 2 - 20
};

var h = 100 // 上抛的高度
var curve = $.bezier(start, {x: start.x, y: end.y + h}, end); // 计算拋物线路径

第三步：实现拋物线运动效果

我们使用定时器不断更新小球的位置，根据当前时间和曲线的计算公式计算小球的位置，并使用CSS设置小球的位置。

var ball = $('<div>').addClass('ball');
$('body').append(ball);

var start_time = null;
var duration = 1000; // 动画持续时间

requestAnimationFrame(function step(timestamp) {
    if (!start_time) start_time = timestamp;
    var progress = timestamp - start_time;
    if (progress > duration) progress = duration;
    var x = curve(progress / duration).x;
    var y = curve(progress / duration).y;

    // 小球运动的位置
    ball.css({
        left: x + 'px',
        top: y + 'px'
    });

    if (progress < duration) {
        requestAnimationFrame(step);
    }
});

第四步：定义CSS

最后，我们需要定义CSS样式，给小球添加样式。

.ball {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
}

示例说明

示例1：购物车飞入效果

在购物车页面中，当用户添加到购物车时，可以实现购物车飞入的效果。我们可以使用上述方法实现。

var start = {
    x: $('.add-to-cart').offset().left + $('.add-to-cart').outerWidth() / 2 - 20,
    y: $('.add-to-cart').offset().top + $('.add-to-cart').outerHeight() / 2 - 20
};

var end = {
    x: $('.cart-icon').offset().left + $('.cart-icon').outerWidth() / 2 - 20,
    y: $('.cart-icon').offset().top + $('.cart-icon').outerHeight() / 2 - 20
};

var h = 100 // 上抛的高度
var curve = $.bezier(start, {x: start.x, y: end.y + h}, end); // 计算拋物线路径

var ball = $('<div>').addClass('ball');
$('body').append(ball);

var start_time = null;
var duration = 1000; // 动画持续时间

requestAnimationFrame(function step(timestamp) {
    if (!start_time) start_time = timestamp;
    var progress = timestamp - start_time;
    if (progress > duration) progress = duration;
    var x = curve(progress / duration).x;
    var y = curve(progress / duration).y;

    // 小球运动的位置
    ball.css({
        left: x + 'px',
        top: y + 'px'
    });

    if (progress < duration) {
        requestAnimationFrame(step);
    }
});

setTimeout(function(){
    ball.remove();
}, duration);

示例2：搜索框提示效果

在搜索框中，当用户输入关键字时，可以显示提示内容，并且提示内容飞入的效果。我们也可以使用上述方法实现。

var start = {
    x: $('.search-box').offset().left + $('.search-box').outerWidth() / 2 - 20,
    y: $('.search-box').offset().top + $('.search-box').outerHeight() / 2 - 20
};

var end = {
    x: $('.search-result').offset().left + $('.search-result').outerWidth() / 2 - 20,
    y: $('.search-result').offset().top + $('.search-result').outerHeight() / 2 - 20
};

var h = 100 // 上抛的高度
var curve = $.bezier(start, {x: start.x, y: end.y + h}, end); // 计算拋物线路径

var ball = $('<div>').addClass('ball');
$('body').append(ball);

var start_time = null;
var duration = 1000; // 动画持续时间

requestAnimationFrame(function step(timestamp) {
    if (!start_time) start_time = timestamp;
    var progress = timestamp - start_time;
    if (progress > duration) progress = duration;
    var x = curve(progress / duration).x;
    var y = curve(progress / duration).y;

    // 小球运动的位置
    ball.css({
        left: x + 'px',
        top: y + 'px'
    });

    if (progress < duration) {
        requestAnimationFrame(step);
    }
});

setTimeout(function(){
    ball.remove();
}, duration);

以上就是实现“jQuery抛物线运动实现方法”的完整攻略，其中包含了两个示例说明。