Старые правила, сначала примените исходный код. Область изображения может быть нажата, и анимация начнется с позиции клика.
Первоначально я сделал этот эффект три года назад, но это было сделано с бесчисленными мегами Div. Недавно я хочу изучить великого Бога с чистым CSS, чтобы выучить эффект CSS.
Подготовка1. Прежде всего, приготовьте несколько изображений того же размера. CSS). Чтобы облегчить использование, добавьте эти изображения в скрытый элемент в HTML для последующего использования.
<div class = 'hide'> <img class = 'img' src = './images/a.jpg'/> <img class = 'img' src = './images/b.jpg'/> <img class = 'img' src = './images/c.jpg'/> <img class = 'img' src = './images/d.jpg'/> <img class = 'img' src = './ ./ Images/e.jpg '/> </div>
.hide {display: none;}2. Вставьте холст холста в HTML, и он определяется размером, но необходимо обеспечить, чтобы он соответствовал ширине и высоте ресурсов изображения. Размер холста в этом примере составляет 800 * 450.
<canvas id = width mycanvas = 800 высота = 450> Ваш браузер не поддерживает Canvas </canvas>
3. Базовый код заключается в следующем, сначала получите объект контекста холста;
var ctx = document.queryselector ('#mycanvas'). гладить (); выполнитьЯ считаю, что многие люди могут быстро понять его.
Затем, прежде чем объяснить исходный код, давайте рассмотрим использование функции DrawImage на холсте. Поскольку нам нужно использовать 9 параметров этой функции, существует много параметров, и мы должны помнить о значении и эталонном объекте этих параметров.
Context.Drawimage (IMG, SX, SY, Swidtht, Sheute, X, Y, ширина, высота, высота);
· IMG: изображение, холст или видео, которое указывает
· SX: x координатное положение резки резки
· SY: координатное положение y резки резки
· Свидт: ширина изображения изображения вырезания
· Шейт: высота изображения была вырезана
· X: поместите положение координат x изображения на холсте.
Y: Поместите координатную позицию изображения на холсте.
· Ширина: ширина изображения, которое вы хотите использовать
· Высота: высота изображения, которое вы хотите использовать
Я считаю, что даже если приведенные выше параметры перечислены, при разработке все равно легко остаться в обморок. Вот советы для всех: в дополнение к первому параметру IMG есть 8 параметров, из которых ссылка по размеру первых 4 параметров является исходной картой, то есть 1920 * 1080;
Помните эту формулу, ее нелегко в обморок, когда она актуальна.
РазделятьРазделение состоит в том, чтобы установить размер блока в холсте. Полем Количество конвенций не обязательно является максимальным количеством или минимумом деления, поскольку чрезмерный эффект не ослепитель, а небольшая производительность будет под давлением.
Принимая размер 800 * 450 в этом примере, я выбираю 25 * 25 в качестве размера блока здесь, то есть весь холст состоит из 32 * 18 в общей сложности 576 ячеек. После деления сетки нам необходимо рассчитать какой -то базовый запасной параметр.
Var imgw = 1920, // изображения исходной ширины/высота IMGH = 1080; I i i i i i i i i i i i i i i i i i i i i i i i i = conh /dh, // единица /номер столбца j = conw /dw; = imgh /i;
Первые три набора параметров устанавливаются нами ранее行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度. Если это будет изменено, это будет вынуждено позже. Последний набор DW/DH - это размер ячейки, который увеличивает и преобразуется в исходное изображение, которое используется для более поздних картин.
В порядке, мы сначала нарисуем ячейку в верхнем левом углу. Потому что его原图裁切位置и画布摆放位置(0, 0), самым простым.
Ctx.drawimage (img, 0, 0, dh, dh, 0, 0, dh);
Успешный. Так как же написать вторую строку сейчас, как написать изображение в третьем столбце?
var i = 2, j = 3;
Здесь легко запутаться, так это то, что裁剪或摆放的横坐标为单元格宽度* 列号，纵坐标为单元格高度* 行号.
Для удобства инкапсулируется чистая функция, ответственная за рендеринг.
Функция обработка RadledRaw (img, i, j) {ctx.drawimage (img, dw*j, dh*i, dh, dw*j, dh*i, dh);}После того, как метод рендеринга инкапсулируется, вся картина отображается через двойные циклы рядов и столбцов.
ctx.beginpath (); ();
Идеально ~. На самом деле, основная часть этого шага завершена. Потому что в это время эта картина уже объединяется с сотнями ячеек, и каждый может дать ей эффект анимации с воображением Тяньки.
Прежде чем поделиться вашим алгоритмом анимации, позвольте мне показать вам, в чем неправильное написание ~
Это немного круто ~
Алгоритм анимацииДавайте поделимся моим алгоритмом анимации. Как достигается эффект в демонстрации?
Поскольку каждая ячейка имеет ранжированное число (i, j) на сетке холста. Я надеюсь, что после координаты (i, j) мы сможем получить все очки вокруг координат из -за дальнего. Конкретная картина ниже, слишком ленив, чтобы сделать картину ~
Например, координаты (3, 3)
Есть 4 точки с расстоянием 1 (2, 3), (3, 4), (4, 3), (3, 2) в общей сложности;
Есть точки с расстоянием 2 (1, 3), (2, 4), (3, 5), (4, 4), (5, 3), (4, 2), (3, 1), (2), (2) 2) всего 8;
..........
Также легко найти алгоритм этой серии точек, потому что行号差值的绝对值+ 列号差值的绝对值= 距离, конкретное:
Функция Countround (i, j, dst) {var resarr = []; ); ;}}} Return resarr;}Эта функция используется, чтобы дать заданную координату и расстояние (DST) и найти все точки на расстоянии вокруг координат, чтобы вернуться в форме массива. Однако приведенный выше алгоритм имеет меньшие граничные ограничения, следующим образом:
Countround (i, j, dst) {var resarr = []; ; n <= (j+dst); = (i i -1) && n <= (j -1))) {resar.push ({x: m, y: n});}}} return resarr;}Таким образом, у нас есть чистая функция, которая вычисляет все точки на окружающем фиксированном расстоянии, а затем начинает завершать анимацию.
Сначала напишите функцию очистки для очистки содержания ячейки.
Handleclear (i, j) {ctx.clearrect (dw*j, dh*i, dw, dh);}Другой - следующая картина, и, наконец, вытягивает новое изображение на внешнем слое через SetInterval, чтобы завершить фрагментированный эффект градиента.
Var dst = 0, vivdalbj = setInterval (function () {var resarr = countround (i, j, dst); resar.foreach (it, index) {handleclear (item.x, item. Y); handledraw (другой элемент. x, item.y);});Когда длина массива, возвращаемой графством, составляет 0, то есть все точки в точке координат находятся за пределами границы, а цикл таймера останавливается. На этом этапе был введен весь базовый код.
В настоящее время любые координаты на данном холсте могут распространять фрагментированный эффект переключения изображения с этой точки до окружающей среды.
При автоматическом вращении запустите анимацию из предустановленных 8 баллов (четыре угла и среднюю точку четырех сторон).
var randompoint = [{x: 0, y: 0}, {x: i -1, y: 0}, {x: 0, y: j -1}, {x: i -1, y: j -1 }, {x: 0, y: math.ceil (j / 2)}, {x: i -1, y: math.ceil (j / 2)}, {x: math.ceil (i / 2), y: 0}, {x: math.ceil (i / 2), y: j -1}]При щелчке щелчки рассчитываются, запуская анимацию с точки.
Функция handleclick (e) {var offsetx = e.offsetx, Officey = e.offsety, j = math.floor (offsetx / dw), i = math.floor (offsety / dh), // с i, j, начало начала начать.В настоящее время этот эффект является только демонстрационным этапом.
Выше всего содержимое этой статьи.