Làm thế nào người ta có thể tạo hiệu ứng "mảnh vụn bay" với jQuery?

Question

Tôi đang làm việc trên một số hoạt ảnh và đang sử dụng thư viện jQuery.

Một trong các phương pháp của tài sản là fly(), có nghĩa là để bay ra khỏi phần tử gốc có cha mẹ chỉ phát nổ. Nó sẽ trông giống như các mảnh vụn bay, tức là nó bay lên và đi và sau đó không chịu được lực hấp dẫn và rơi. Example.

Đây là phương pháp của tôi cho đến nay ...

var parent = this.element.parent(), 
    direction = this.element.position().left < parent.width()/2 ? '-' : '+'; 

this.element.animate({ 
    left: direction + '=300', 
    top: '-=200' 
}, duration); 

Điều này rõ ràng không nhìn vào tất cả như mảnh vụn bay, vì nó chỉ di chuyển lên và đi. Biến số direction xác định cách thức mà phần tử sẽ bay. Bởi vì mỗi phần tử được định vị tương đối với bố mẹ của nó, các phần tử ở phía bên tay trái di chuyển sang trái và ngược lại.

Tôi không muốn triển khai một công cụ vật lý chính thức như Box2D.

Tôi biết những gì mã của tôi về cơ bản nên làm, mà tôi tin là ...

1. Bay elment lên (âm top) và theo hướng thiết lập (tiêu cực hay tích cực left), với một số mục nát giá trị để mô phỏng mất chuyển động ngang do kháng gió vv và mất chuyển động thẳng đứng do trọng lực.
2. Lực hấp dẫn sẽ phát triển mạnh hơn ở một giai đoạn nào đó so với lực lên của nguyên tố từ vụ nổ, trong trường hợp đó phần tử sẽ cần rơi.

Tôi thực sự không biết cách tiếp cận vấn đề này. Tôi đã hy vọng tôi có thể tận dụng jQuery của animate(), nhưng tôi không biết để kết hợp một giá trị phân rã.

Cách tốt nhất để tạo hiệu ứng này là gì?

Answer 1

(Tôi sẽ đăng bài này như một câu trả lời vì đó ’ những gì nó thực sự là.)

Bạn chỉ cần một hình ảnh động các mảnh vỡ cho kẹo mắt, hoặc dùng nó phải được tính toán một cách chính xác? Tôi thấy rằng việc sử dụng các giá trị ngẫu nhiên thực sự có thể làm cho nó thực tế. Xem http://jsfiddle.net/minitech/fSaGk

Answer 2

Bạn đang có lẽ sẽ cần phải sử dụng easing tài sản của animate() cuộc gọi, và tận dụng jQuery Easing Plugin để có được một hiệu ứng phần nào tinh tế hơn so với tiêu chuẩn linear nới lỏng định được cung cấp bởi mặc định trong jQuery.

Bí quyết khác là để chuỗi gọi đến animate() để nhận được hiệu ứng nhiều giai đoạn mà bạn đang theo dõi.

Dưới đây là một thực sự (và tôi có nghĩa thực sự) nhanh chóng mockup rằng kinda- sorta cung cấp cho bạn một ý tưởng.

Các ruột của nó:

debris.animate({ 
    left: direction + '=150', 
    easing: 'linear', 
}, { 
    queue: false, 
    duration: duration 
}) 
.animate({ 
    top: '-=100', 
    easing: 'easeOutQuint', 
}, { 
    queue: true, 
    duration: vduration 
}) 
.animate({ 
    top: '+=100', 
    easing: 'easeInQuint', 
}, { 
    queue: true, 
    duration: vduration 
}); 

Các yếu tố chính là:

• Hình ảnh động trái-phải là linear - đây không phải là sự phân rã bạn đang tìm kiếm nhưng nó đủ cho điều này mockup
• Hoạt ảnh bên trái phải rõ ràng không xếp hàng, vì vậy, animate() tiếp theo trong chuỗi bắt đầu ngay lập tức
• Các hình ảnh động lên xuống bao gồm hai xếp hàng đợi (đó là mặc định nhưng tôi đã chỉ định nó anyway cho rõ ràng) hình ảnh động, mỗi timed tại một nửa trong số các hình ảnh động trái-phải
• Tôi đã sử dụng chức năng giảm bớt easeOutQuint từ Plugin giản hóa để làm hiệu ứng hấp dẫn - đó là nơi nào gần hoàn hảo nhưng bạn sẽ có được ý tưởng

với đủ xếp hàng và chaining của animate() cuộc gọi như thế này bạn sẽ có thể để có được một mục nát khá đẹp x cùng với một cảm hứng hấp dẫn hấp dẫn y ...

Answer 3

tôi đã kết thúc điều chỉnh minitech của mã rộng rãi ...

var element = $('div'), 
    parent = element.parent(), 
    position = element.position(), 
    offset = element.offset(), 
    directionOver180 = false, 
    flyAnimation; 

$('body').css('overflow', 'hidden'); 

var angle = (Math.random() * 180) + (directionOver180 ? 180 : 0), 
    angleCalc = angle * Math.PI/180, 
    velocityX = Math.cos(angleCalc), 
    velocityY = Math.sin(angleCalc), 
    currentX = offset.left, 
    currentY = offset.top, 
    gravity = -20; 

flyAnimation = setInterval(function() { 

    currentX += velocityX * 5 * (directionOver180 ? -1 : 1); 
    currentY += velocityY * 3 + ++gravity; 

    velocityX += 0.02; 
    velocityY += 0.1 * Math.random(); 

    element.css({ 
     left: currentX, 
     top: currentY 
    }); 

    if (currentY + element.height() > $(window).height()) { 
     $('body').css('overflow', 'visible'); 
     clearInterval(flyAnimation); 
     element.remove(); 
    } 

}, 20); 

jsFiddle.