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.