Как создать анимацию для слоев, созданных в цикле for

Рассмотрим два фрагмента для Collection Grid и Layer with Click Animation. Следующее добавит прослушиватель анимации только к последнему элементу сетки (слою в позиции 3:3):

rows = 3
cols = 3

gutter = 16
width  = 96
height = 96

for rowIndex in [0..rows-1]
    for colIndex in [0..cols-1]

        cellLayer = new Layer
            width:  width
            height: height
            x: colIndex * (width + gutter)
            y: rowIndex * (height + gutter)

        Utils.labelLayer cellLayer, "#{rowIndex}:#{colIndex}"

        cellLayer.on Events.Click, ->
            cellLayer.animate
                properties:
                    scale: 1.4
                curve: "spring"

Как я могу индивидуально назвать слои в цикле for для применения анимации?

Что-то вроде cellLayer[rowIndex][colIndex] = new Layer было бы идеально, но не работает.


framerjs
person nipponese    schedule 28.08.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

tl;dr

Это можно решить, просто используя ключевое слово do следующим образом:

do (cellLayer) -> 
  cellLayer.on Events.Click, ->
    cellLayer.animate
      properties: scale: 1.4
      curve: "spring"

При использовании цикла JavaScript для генерации функций обычно вставляется закрывающая оболочка, чтобы гарантировать, что переменные цикла закрыты, и все сгенерированные функции не просто используют общие окончательные значения. CoffeeScript предоставляет ключевое слово «do», которое немедленно вызывает переданную функцию, пересылая любые аргументы.

технически вы должны сделать каждую область cellLayer, потому что cellLayer ограничена в цикле. В CoffeeScript синтаксический сахар предоставляется ключевым словом do. Просто введите do в код, а затем автоматически создайте области видимости с помощью IIFE. Если вы что-то знаете о JavaScript, транспилированный код может вам помочь.

person seoh    schedule 29.08.2014

arrow_upward
1
arrow_downward

Также обратите внимание, что я добавляю выбранный слой в качестве второго аргумента в ваш обработчик:

 cellLayer.on Events.Click, (event, clickedLayer) ->
        clickedLayer.animate
            properties:
                scale: 1.4
            curve: "spring"
person Koen Bok    schedule 29.08.2014