js图⽚打碎_html5tweenmax.js打碎玻璃图⽚轮播切换特效特效描述：html5 tweenmax.js 打碎玻璃图⽚ 轮播切换特效。html5碎玻璃图⽚切换特效，tweenmax.js实列
代码结构
1. 引⼊CSS
2. 引⼊JS
3. HTML代码
const TWO_PI = Math.PI * 2;
var images = [],
imageIndex = 0;
var image,
imageWidth = 768,
imageHeight = 485;
var vertices = [],
indices = [],
prevfrag = [],
fragments = [];
var margin = 50;
var container = ElementById('container');
var clickPosition = [imageWidth * 0.5, imageHeight * 0.5];
TweenMax.set(container, {perspective:500});
var urls = [
'images/1.jpg',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg'
],
image,
loaded = 0;
// very quick and dirty hack to load and display the first image asap
images[0] = image = new Image();
if (++loaded === 1) {
for (var i = 1; i < 4; i++) {
images[i] = image = new Image();
image.src = urls[i];
}
placeImage();
}
};
image.src = urls[0];
};
function placeImage(transitionIn) {
image = images[imageIndex];
实现特效的代码jsif (++imageIndex === images.length) imageIndex = 0; var num = Math.random();
if(num < .25) {
image.direction = "left";
} else if(num < .5) {
image.direction = "top";
} else if(num < .75) {
image.direction = "bottom";
} else {
image.direction = "right";
}
container.appendChild(image);
image.style.opacity = 0;
if (transitionIn !== false) {
triangulateIn();
}
}
function triangulateIn(event) {
var box = BoundingClientRect(),
top = p,
left = box.left;
if(image.direction == "left") {
clickPosition[0] = 0;
clickPosition[1] = imageHeight / 2;
} else if(image.direction == "top") {
clickPosition[0] = imageWidth / 2;
clickPosition[1] = 0;
} else if(image.direction == "bottom") {
clickPosition[0] = imageWidth / 2;
clickPosition[1] = imageHeight;
} else if(image.direction == "right") {
clickPosition[0] = imageWidth;
clickPosition[1] = imageHeight / 2;
}
triangulate();
build();
}
function triangulate() {
for(var i = 0; i < 40; i++) {
x = -margin + Math.random() * (imageWidth + margin * 2);
y = -margin + Math.random() * (imageHeight + margin * 2); vertices.push([x, y]);
}
vertices.push([0,0]);
vertices.push([imageWidth,0]);
vertices.push([imageWidth, imageHeight]);
vertices.push([0, imageHeight]);
vertices.forEach(function(v) {
v[0] = clamp(v[0], 0, imageWidth);
v[1] = clamp(v[1], 0, imageHeight);
});
indices = iangulate(vertices);
}
function build() {
var p0, p1, p2,
fragment;
var tl0 = new TimelineMax({onComplete:buildCompleteHandler}); for (var i = 0; i < indices.length; i += 3) {
p0 = vertices[indices[i + 0]];
p1 = vertices[indices[i + 1]];
p2 = vertices[indices[i + 2]];
fragment = new Fragment(p0, p1, p2);
var dx = id[0] - clickPosition[0],
dy = id[1] - clickPosition[1],
d = Math.sqrt(dx * dx + dy * dy),
rx = 30 * sign(dy),
ry = 90 * -sign(dx),
delay = d * 0.003 * randomRange(0.9, 1.1);
fragment.canvas.style.zIndex = Math.floor(d).toString(); var tl1 = new TimelineMax();
if(image.direction == "left") {
rx = Math.abs(rx);
ry = 0;
} else if(image.direction == "top") {
rx = 0;
ry = Math.abs(ry);
} else if(image.direction == "bottom") {
rx = 0;
ry = - Math.abs(ry);
} else if(image.direction == "right") {
rx = - Math.abs(rx);
ry = 0;
}
tl1.from(fragment.canvas, 1, {
z:-50,
rotationX:rx,
rotationY:ry,
scaleX:0,
scaleY:0,
ease:Cubic.easeIn
});
tl1.from(fragment.canvas, 0.4,{alpha:0}, 0.6);
tl0.insert(tl1, delay);
fragments.push(fragment);
container.appendChild(fragment.canvas);
}
}
function buildCompleteHandler() {
// add pooling?
image.style.opacity = 1;
image.addEventListener('transitionend', function catchTrans() { fragments.forEach(function(f) {
});
fragments.length = 0;
vertices.length = 0;
indices.length = 0;
placeImage();
}, false);
}
//
// MATH UTILS
//
function randomRange(min, max) {
return min + (max - min) * Math.random();
}
function clamp(x, min, max) {
return x < min ? min : (x > max ? max : x);
}
function sign(x) {
return x < 0 ? -1 : 1;
}
//
// FRAGMENT
//

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。