4 способа реализовать анимацию руководства для начинающих

внешний интерфейс контейнер опрос Canvas

предисловие

Некоторое время назад я был занят поиском работы и на собеседовании наткнулся на интересный вопрос.Перечислите как можно больше способов реализовать анимацию руководства для новичков., я вчера немного подытожил, и понял 4 вида.Исходник в конце, если хотите сразу увидеть результат, то можете дотянуть до конца.

Здесь предполагается, что все всплывающие слои основаны на исходных элементах страницы.

достичь целевого содержания копирования

Конкретные шаги:

  1. использоватьgetBoundingClientRectПолучить позицию отображения целевого контента
  2. Скопируйте целевой контент и установите относительное позиционирование, данные позиционирования были получены на предыдущем шаге, а z-индекс должен быть установлен немного выше.
  3. Под скопированным содержимым добавьте полупрозрачный слой-маску.

Основной код:

let target = document.querySelector('.mid-center')
let pos = target.getBoundingClientRect()

let clone = target.cloneNode(true)

clone.style.position = 'fixed'
clone.style.left = pos.left
clone.style.top = pos.top
clone.style.width = pos.width
clone.style.height = pos.height
clone.style.zIndex = 100

document.body.appendChild(clone)

Преимущества и недостаткиБолее приземленная реализация, обычная, ничего особенного.

Реализация 2 Использование box-shadow

Конкретные шаги:

  1. Установите box-shadow целевого объекта на большее, полупрозрачное значение
  2. Установите положение целевого объекта относительно

Основной код:

let target = document.querySelector('.mid-center')
target.style.boxShadow = '0 0 0 4000px rgba(0, 0, 0, 0.85)'
target.style.position = 'relative'

Здесь устанавливается position:relative, чтобы тень box-shadow не блокировалась родительским контейнером, если не задана, box-shadow не будет отображаться полностью

Преимущества и недостатки

Достоинства: Реализация проста и понятна.

Недостатки: box-shadow — это свойство, требующее относительно высокой производительности, и, полагаясь на position:relative, я не знаю, будут ли проблемы, которые нельзя покрыть.

Реализация 3 Используйте html2canvas для рисования целевого контента на полупрозрачном холсте с фоновым цветом.

Конкретные шаги:

  1. использоватьgetBoundingClientRectПолучить позицию отображения целевого контента
  2. использоватьhtml2canvasНарисуйте целевой контент в указанную позицию и размер, полученный на предыдущем шаге.

Основной код:

let target = document.querySelector('.mid-center')
let pos = target.getBoundingClientRect()
let w = ~~pos.width
let h = ~~pos.height

let canvas = document.querySelector('#canvas')
canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight
let ctx = canvas.getContext("2d");
canvas.style.display = 'block'

html2canvas(target, {
    width: w,
    height: h,
}).then( (cvs) => {
    ctx.drawImage(cvs, pos.left, pos.top)
})

Стоит отметить, что canvas.width и canvas.height нужно задавать вручную, иначе по умолчанию стоит 300*150, поэтому если в стиле задать ширину и высоту, то холст будет растянут.

Преимущества и недостатки

Преимущества: производительность должна быть относительно лучше (если производительность html2canvas слишком низкая), и менее вероятно возникновение различных уровней окклюзии или неполного отображения при реализации с помощью холста.

Недостатки: метод реализации относительно громоздкий и требует внешних инструментов.

Реализация 4. Сделайте все остальные элементы полупрозрачными, затем добавьте черный фон к телу.

Конкретные шаги:

  1. Установите черный фон для самого внешнего элемента всего документа
  2. Пройдитесь по всему документу, установите прозрачность нецелевого содержимого и родительский контейнер нецелевого содержимого.

Основной код:

function showGuidance() {
    let main = document.querySelector('.main')
    main.className += ' darkBackGround'
    setOpticity(main)
}

function setOpticity (element) {
    let doms = Array.from(element.children) || []
    let hasMatched = false
    for (let el of doms) {
        if (!el.className.match(/mid-center/i) && el.children.length) {
            hasMatched = setOpticity(el)
        if (!hasMatched) el.className += ' halfTransparent'
        } else if(el.className.match(/mid-center/i)) {
            hasMatched = true
        } else {
            el.className += ' halfTransparent'
        }
    }
return hasMatched
}

Если вы случайно установите полупрозрачным родительский элемент целевого элемента, то даже если целевой элемент не установлен полупрозрачным, он станет прозрачным, потому что все содержимое в родительском элементе будет прозрачным.

Преимущества и недостатки

Достоинства: Не думаю, что есть какие-то преимущества

Недостатки: пакетная обработка dom, когда элементов dom много, производительность крайне низкая

наконец

Все вышеперечисленные способы реализации основаны на простейшем способе реализации, без учета некоторых частных случаев (таких как: ресайз, анимация и т.д.) прикреплятьисходный код

Категории