Hoạt ảnh theo tỷ lệ rung động

Question

Tôi đang làm ít tranh mosaic (nếu tôi có thể gọi nó là như thế). Tôi đang thay đổi tỷ lệ và độ mờ dựa trên vị trí chuột và trung tâm của hình ảnh/div.

Tôi đang tính toán khoảng cách qua vektors với

function calculateDistance(elem, mouseX, mouseY) { 
     return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft + (elem.offsetWidth/2)), 2) + Math.pow(mouseY - (elem.offsetTop + (elem.offsetHeight/2)), 2))); 
    } 

và im looping nghĩ các divs/hình ảnh và nếu khoảng cách nhỏ hơn 100, nó sẽ tính toán mức Opacity của nó/quy mô.

Nhưng tôi đã gặp phải một vấn đề, nơi hoạt ảnh thay đổi độ mờ/quy mô hơi bị lung lay. Nó có vẻ như do dự nếu nó nên làm điều gì đó.

Demo = http://jsfiddle.net/Trolstover/x9fpv8pb/5/

Có cách nào hoặc phím tắt làm thế nào để khắc phục điều đó như tôi gọi nó là shakking hay do dự?

Answer 1

Vấn đề lớn nhất bạn có là quy tắc -webkit-transition trong CSS của mình. Nếu bạn cố chuyển đổi các phần tử của mình bằng CSS và thay đổi giá trị 60 lần một giây bằng JS, nó sẽ nhấp nháy.

Ngoài ra, có thể bạn không nên thêm trình xử lý sự kiện vào mọi phần tử đơn lẻ. Điều này sẽ gây ra các hoạt động không cần thiết. Thay vào đó, bạn có thể thêm một trên cha mẹ của họ (tôi đã thêm nó vào nav).

Có một số phòng để tối ưu hóa cũng giúp làm mịn hơn quá trình chuyển đổi. Đây là kết quả:

http://jsfiddle.net/ilpo/x9fpv8pb/16/