Contente
- Importar do Sketch
- Crie camadas de máscara e avatar
- Definir estados
- Animar entre estados
- Experimente em um dispositivo móvel real
O raciocínio por trás da prototipagem de design não é novo - é o mesmo que todo o burburinho sobre design no navegador. Quando você vê um design em seu contexto real, é totalmente diferente. Você toma decisões melhores quando não precisa fazer suposições sobre como uma interface funcionará e se sentirá. Isso pode soar como um trabalho extra, mas os insights que você pode obter ao ver seu projeto funcionando são inestimáveis.
Framer é uma nova ferramenta de prototipagem baseada em código. Você pode criar maquetes no Sketch (ou Photoshop) como faria normalmente e importá-los para o Framer. Então, escreva um pouco de CoffeeScript e você poderá realizar muito.
Vou te ensinar o básico da prototipagem no Framer, usando o exemplo de um protótipo de aplicativo iOS com duas visualizações: uma visualização de perfil e uma visualização ampliada da imagem do avatar do usuário. Faremos um protótipo de como a visualização expandida da foto será aberta e fechada e também a animaremos. Veja a demonstração online aqui (para ver o código-fonte, basta clicar no ícone no canto superior esquerdo). Você também precisará da avaliação gratuita do Framer, que pode ser obtida em framerjs.com.
Importar do Sketch
A primeira etapa é importar camadas do Sketch para o Framer. Basta clicar no botão Importar no Framer enquanto o desenho está aberto no Sketch e escolher o arquivo correto na caixa de diálogo a seguir. O Framer importará automaticamente as imagens de cada camada e as tornará acessíveis por meio de um código como este:
sketch = Framer.Importer.load "importado / perfil"
Use essa variável para acessar as camadas importadas. Por exemplo, para fazer referência à camada chamada 'conteúdo' no arquivo Sketch, você digitaria sketch.content no Framer.
Crie camadas de máscara e avatar
A principal função deste protótipo é expandir a imagem do avatar quando ela for tocada e, em seguida, fechá-la quando for tocada novamente. Primeiro, vamos criar duas camadas de máscara - uma máscara aninhada ou uma máscara dentro de outra máscara. Vamos animar as duas máscaras ao mesmo tempo para criar um efeito de abertura e fechamento agradável e sutil. A camada headerMask cortará a foto do avatar em um retângulo quando ela for expandida, e a camada de máscara irá cortá-la em um pequeno círculo na visualização do perfil.
Crie a camada headerMask assim:
headerMask = nova largura da camada: Screen.width, height: 800 backgroundColor: "transparente"
A primeira linha de código cria e nomeia a nova camada. Então, usando a sintaxe de indentação do CoffeeScript, definimos as propriedades de largura, altura e fundo. Usaremos um fundo transparente para que as camadas abaixo mostrem quando a foto do avatar for expandida.
Em seguida, crie a camada de máscara:
mask = new Layer width: 1000, height: 1000 backgroundColor: "transparent", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask escala: 0.2, originY: 0
Criamos uma nova camada e definimos propriedades da mesma maneira. O grande borderRadius transforma essa camada em um círculo. Posicionamos a camada de máscara de forma que ela se sobreponha à camada de cabeçalho, que foi importada do Sketch. Também reduziremos para 20 por cento, ou 0,2. Um originY de zero define o ponto de ancoragem ou registro da imagem para a borda superior.
A propriedade restante, superLayer, define a camada headerMask que criamos como pai dessa nova camada. É assim que o mascaramento funciona no Framer. Basta definir a propriedade superLayer e a camada pai irá mascarar o filho.
Em seguida, precisamos criar o gráfico do avatar e colocá-lo dentro dessas novas máscaras. Para aplicar zoom e animar os limites de corte, criaremos manualmente a camada de avatar. Copie uma foto para a subpasta 'imagens' da pasta do projeto. Em seguida, crie uma camada usando essa imagem:
avatar = nova imagem da camada: "images / avatar.png" largura: mask.width, height: mask.height superLayer: mask, force2d: true
Observe que definimos a supercamada do avatar como a camada de máscara. Ambos agora estão aninhados em headerMask. Também definimos a largura e a altura para que a imagem preencha completamente a área mascarada.
Por último, criaremos uma variável para armazenar a posição Y da máscara que usaremos para a animação. Vamos centralizá-lo horizontalmente, pois é maior do que a tela.
maskY = mask.y mask.centerX ()
Definir estados
A primeira etapa na criação de uma animação é definir os estados inicial e final. No Framer, os estados são como quadros-chave escritos em código. Um estado é apenas uma coleção de propriedades. Cada camada tem um estado padrão. Para este protótipo, esse padrão servirá como ponto de início para a animação, portanto, só precisamos definir um segundo estado para cada camada.
A sintaxe para estados é muito simples. Faça referência à camada, use o método layer.states.add () e, a seguir, liste as propriedades a serem incluídas.
sketch.content.states.add (ocultar: {opacity: 0}) headerMask.states.add (mover: {y: 120}) mask.states.add (crescer: {scale: 1.1, y: maskY - 420})
O segundo estado da camada de conteúdo, que foi importado do Sketch e contém todos os outros elementos da tela do perfil, deve ser completamente transparente. Dessa forma, quando o avatar for expandido, teremos um fundo preto e os ícones e elementos importados restantes serão exibidos.
A segunda linha de código cria um estado para headerMask, que simplesmente o moverá para a posição Y de 120. Isso permitirá que o título e o botão Fechar sejam exibidos na parte superior da tela quando a foto do avatar for ampliada. Ele também animará os limites de corte da foto do avatar.
Por último, um novo estado para a camada de máscara irá aumentá-la e movê-la para cima, usando a variável maskY que criamos anteriormente. Como o originY (ou ponto de ancoragem) da camada de máscara é sua borda superior, precisamos movê-la 420 pixels para cima para que o centro da imagem fique visível.
Animar entre estados
Para animar entre os estados padrão e os novos que acabamos de criar, precisamos apenas de mais quatro linhas de código. Vamos definir um manipulador de cliques na camada de avatar. Quando um usuário toca na tela do perfil, fazemos a transição para a visualização expandida por estados de ciclo. Quando for tocado novamente, voltaremos aos estados padrão para que ele retorne a um pequeno círculo. As mesmas linhas de código tratam de ambas as interações:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
A primeira linha deste bloco configura o manipulador de cliques na camada de avatar. Sempre que for tocado, não importa como seja cortado ou de seu tamanho, as instruções a seguir serão executadas.
Em seguida, simplesmente referenciamos cada camada e usamos o método layer.states.next () para alternar os estados. Quando você usa layer.states.next (), o Framer usará suas configurações de animação padrão internas. Isso é extremamente conveniente, mas você pode criar animações ainda melhores ajustando as curvas de animação.
Ao usar estados como os que estamos aqui, você pode facilmente alterar cada curva de animação separadamente usando a propriedade layer.states.animationOptions. Com apenas três pequenos ajustes, a animação parece completamente diferente:
sketch.content.states.animationOptions = curve: "facilidade", tempo: 0.3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Para a camada de conteúdo que está desaparecendo e desaparecendo, vamos escolher uma predefinição de curva simples, facilitar e definir a duração da animação para 0,3 para que seja muito rápido.
Para as camadas headerMask e mask, use uma curva de mola. Para nossos propósitos, você só precisa saber que os valores da curva da mola alteram a velocidade e o salto da animação. Os valores para a camada de máscara tornarão sua animação muito mais rápida do que headerMask e conteúdo. Para obter mais detalhes sobre as configurações da curva de mola, consulte a documentação do Framer em framerjs.com/docs.
Experimente em um dispositivo móvel real
Ver o design em um dispositivo real é muito mais eficaz do que usar emuladores, e você verá os benefícios em seu trabalho. O Framer inclui um recurso de espelho, que é um servidor embutido que oferece uma URL para o seu protótipo em sua rede local. Basta visitar o URL usando seu dispositivo.
Você aprendeu tudo o que precisa saber para criar um protótipo de seus próprios projetos no Framer. O que você está esperando?
Palavras: Jarrod Drysdale
Jarrod Drysdale é autor, consultor de design e fabricante de produtos digitais. Este artigo foi publicado originalmente na edição 270 da revista net.
Gostou disso? Leia isso!
- Crie protótipos clicáveis e dinâmicos no Sketch
- Como começar um blog
- Os melhores editores de fotos
