Показать сообщение отдельно
  #1 (permalink)  
Старый 18.03.2017, 14:16
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

Нужна помощь с формулой для анимации
Надо разрезать картинку на NxN ячеек, и у каждой ячейки изменять opacity. Причём чем ближе к нижнему правому углу, тем сильнее изменять. Получается такой эффект, будто картинка сворачивается в угол.

Скрытие работает нормально, а вот с раскрытием какая-то дичь.
Помогите сообразить, какая формула нужна для opacity!

<img height="341" width="512" id="main" src="http://farm9.staticflickr.com/8228/8503485139_0b55e2a857_b.jpg" />

<script type="text/javascript">

(function () {

"use strict";

function dissolve(elem, options) {
	options = options || {};
	options.duration = options.duration || 500;
	options.tiles = options.tiles || 10;

	var pos = elem.getBoundingClientRect();
	var top = pos.top;
	var left = pos.left;
	var tileWidth = Math.round(elem.clientWidth / options.tiles);
	var tileHeight = Math.round(elem.clientHeight / options.tiles);
	var allTiles = [];
	var show = options.action == "show";

	for (var i = j = 0; i < options.tiles; i++) {
		for (var j = 0; j < options.tiles; j++) {
			var tile = document.createElement("DIV");
			document.body.appendChild(tile);
			tile.style.position = "absolute";
			tile.style.overflow = "hidden";
			tile.style.width = tileWidth + "px";
			tile.style.height = tileHeight + "px";
			tile.style.top = (top + i * tileHeight) + "px"; 
			tile.style.left = (left + j * tileWidth) + "px";
			tile.style.opacity = show ? 0 : 1;

			var tileContent = elem.cloneNode(true);
			tileContent.style.position = "static";
			tile.appendChild(tileContent);
			tileContent.style.marginLeft = (-j * tileWidth) + "px";
			tileContent.style.marginTop = (-i * tileHeight) + "px";
			tileContent.style.visibility = "visible";

			j == 0 ? allTiles.push([tile]) : allTiles[i].push(tile);
		}
	}

	var start = +new Date();
	fx();
	function fx() {
		var m = (+new Date() - start) / options.duration;
		if (m > 1) m = 1;
		if (m < 1) setTimeout(fx, 17);
		for (var i = j = 0; i < options.tiles; i++) {
			for (var j = 0; j < options.tiles; j++) {
				var d =  m * options.tiles / Math.min(i + 1, j + 1);
				if (d < 0) d = 0; if (d > 1) d = 1;
				allTiles[i][j].style.opacity = show ? d : 1 - d;
			}
		}
	}

	setTimeout(function () {
		for (var i = j = 0; i < options.tiles; i++) {
			for (var j = 0; j < options.tiles; j++) {
				document.body.removeChild(allTiles[i][j]);
			}
		}
	}, options.duration);

	if (show) {
		setTimeout(function () {
			elem.style.visibility = "visible";
		}, options.duration);
	} else {
		elem.style.visibility = "hidden";
	}
}

window.Dissolve = {
	show : function (elem, tiles, duration) {
		dissolve(elem, {
			duration : duration, tiles : tiles, action : "show"
		});
	},
	hide : function (elem, tiles, duration) {
		dissolve(elem, {
			duration : duration, tiles : tiles, action : "hide"
		});
	}
};

})();

var toggler = true;
document.onclick = function () {
	Dissolve[toggler ? "hide" : "show"]( document.getElementById("main") );
	toggler = !toggler;
};
		</script>


Сама формула в 53 и 55 строчках, проблема именно там.
Ответить с цитированием