问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

NEXT怎么实现类似京东/美团加入购物车动画?

头像头饰
轻口味
    39k579447
    HarmonyOSharmonyos-next
    阅读 717
    avatarAI BotBETA

    要实现类似京东/美团加入购物车动画，你可以使用 CSS 动画和 JavaScript 来实现方形图片收缩为圆形，然后沿抛物线路径飘向指定的购物车位置。以下是一个完整的示例：

    # 示例代码

## HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车动画示例</title>
<link rel="stylesheet" href="styles.css">

    </head>
    <body>

    <div class="container">
    <img id="productImage" src="path/to/your/image.jpg" alt="Product Image" class="square">
    <button id="addToCartButton">加入购物车</button>
    <div id="cartIcon" class="cart-icon"></div>
</div>
<script src="script.js"></script>

    </body>
    </html>

    
## CSS (styles.css)

    body {

    display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;

    }

    .container {

    position: relative;
text-align: center;

    }

    productImage {

    width: 100px;
height: 100px;
transition: all 0.3s ease;
cursor: pointer;

    }

    .square {

    border-radius: 0;

    }

    .circle {

    border-radius: 50%;

    }

    addToCartButton {

    margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;

    }

    .cart-icon {

    position: fixed;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;

    }

    
## JavaScript (script.js)

    document.getElementById('addToCartButton').addEventListener('click', () => {

    const productImage = document.getElementById('productImage');
const cartIcon = document.getElementById('cartIcon');

// 将图片变为圆形
productImage.classList.remove('square');
productImage.classList.add('circle');

// 设置动画结束后的样式
productImage.style.position = 'absolute';
productImage.style.left = `${productImage.offsetLeft}px`;
productImage.style.top = `${productImage.offsetTop}px`;
productImage.style.width = '50px';
productImage.style.height = '50px';

// 计算抛物线路径的起点和终点
const startX = productImage.offsetLeft + productImage.offsetWidth / 2;
const startY = productImage.offsetTop + productImage.offsetHeight / 2;
const endX = cartIcon.offsetLeft + cartIcon.offsetWidth / 2;
const endY = cartIcon.offsetTop - productImage.offsetHeight / 2;

// 抛物线方程的参数
const a = (endY - startY) / Math.pow((endX - startX), 2);
const b = (startY - a * Math.pow(startX, 2)) / (2 * startX);

// 动画函数
const animate = (timestamp) => {
    const timeElapsed = timestamp - startTime;
    const currentX = startX + (endX - startX) * (timeElapsed / duration);
    const currentY = a * Math.pow(currentX, 2) + b * currentX + startY - (a * Math.pow(startX, 2) + b * startX);
    
    productImage.style.left = `${currentX - productImage.offsetWidth / 2}px`;
    productImage.style.top = `${currentY - productImage.offsetHeight / 2}px`;
    
    if (timeElapsed < duration) {
        requestAnimationFrame(animate);
    } else {
        // 动画结束后隐藏图片或进行其他处理
        productImage.style.display = 'none';
    }
};

const duration = 1000; // 动画持续时间（毫秒）
const startTime = performance.now();

requestAnimationFrame(animate);

    });

    1 个回答
    得票最新
    头像
    以梦为马_HOS
      1.2k1117
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题