Organização de código no Framer

Bons métodos de organização melhoram muito a habilidade de prototipação, emancipando as cópias rudimentares à uma completa liberdade autoral.

Este artigo presume o conhecimento de fundamentos do código. Introduz funções e tópicos de legibilidade, animações, eventos e estados:

Funções

A função é uma peça de código reutilizável, escrita com ->.

-> nick: "Lú", age: 20

É reutilizável porque a instrução não é executada imediatamente, mas só armazenada para uso posterior.

Usando funções

Funções podem ser guardadas na memória bem como as variáveis:

createUser = -> profile = nick: "Lú", age: 20

No exemplo acima, a variável profile não será criada até que a função createUser seja executada com ():

createUser()

Enviando parâmetros

É possível enviar parâmetros ao executar uma função. É o que acontece, por exemplo, na função print do Framer.

print(profile)

Logando parâmetros

A função print mostra valores na janela de Preview do Framer. O valor profile foi enviado no exemplo acima.

Nomeando parâmetros

A função que que recebe parâmetros precisa declarar nomes internos para eles entre (), antes da ->:

sum = (x, y) -> x + y

A função acima recebe dois números, soma e retorna o valor final. Ao executar sum(20,30), obtém-se 50.

Legibilidade em funções

Funções são muitas vezes escritas com recuos. Neste caso, elas sempre retornam o valor de sua última linha.

average = (x, y) ->
    sum = x + y
    sum / 2

Executar average(20,30) retornará o valor 25.

Ao executar, pode-se trocar () por um espaço simples:

average 20,30

Quando parâmetros são objetos, () podem dar espaço à recuos:

layer.animate
    x: 100
    width: 100

Mas () continuam obrigatórios quando executando funções sem parâmetros. Exemplos: layer.copy() our layer.destroy().

Animações

Toda camada tem uma função animate. Ela requer um objeto com as propriedades finais, nomes e valores:

layer.animate
    x: 100
    width: 100

Detalhes da animação podem ser enviados na propriedade options, como um sub-objeto:

layer.animate
    x: 100
    width: 100
    options:
        delay: 1.5
        time: 0.5

Estados

Toda camada carrega um sub-objeto states. Serve como um atalho para animações recorrentes.

layer.states.hover =
    width: 250
    backgroundColor: '#38AFFB'
    options:
        time: 0.5

O código acima não animará, somente armazenará a animação. Executá-la, depois, torna-se muito mais simples:

layer.animate "hover"

Para conveniência, o estado inicial das camadas são armazenados no sub-objeto default.

Eventos

As camadas emitem eventos quando as interações acontecem. E o Framer tem eventos para todo tipo de interação:

• Tap, Swipe, Pinch, Click, Drag
• Mouse over, Mouse out, … e outros

Use a função on da camada para mudar o protótipo quando algum evento acontecer:

layer.on "mouseover", -> layer.animate "hover"
layer.on "mouseout", -> layer.animate "default"

A função on recebe dois parâmetros: nome do evento e uma função para ser executada quando o evento acontecer.

Conselhos finais

Você aprendeu tudo para finalmente conseguir ler código! Escrever código será uma questão de paciência e prática.

Código é um tema de aprendizado contínuo. Mas agora você consegue pesquisar, ler a sintaxe, e aprender quando tiver dúvida :)

Dedique tempo e se desafie. Quando você se perder, tome a dúvida como ponto de pesquisa. Encontre a resposta, faça funcionar, e se perca de novo.

Material complementar

Alguns recursos provavelmente ajudarão no caminho deste aprendizado:

• Framer Programming Guide, sobretudo condicional, loop, classe e escopo
• Documentação do Coffeescript, sobretudo o menu ‘Try Coffeescript’
• E o Coffeescript Cookbook… se você decidir avançar ainda mais.