Este guia descreve as principais ferramentas e janelas incluídas no Watch Face Studio (WFS).
Figura 1. Tela principal do Watch Face Studio.
Ferramentas
O WFS tem as seguintes ferramentas:
- Add Component: abre uma lista de componentes que você pode adicionar ao mostrador do relógio.
- Forward e Backward: movem um componente selecionado para a frente ou para trás.
- Group e Ungroup: agrupam vários componentes para que eles possam ser controlados como um componente ou desagrupam um grupo de componentes.
- Mask: abrange todas ou parte das outras camadas com base no contorno da forma da camada inferior.
- Build: abre a caixa de diálogo do build.
- Run on Device: abre uma caixa de diálogo para visualizar o mostrador do relógio em um dispositivo.
Componentes
Adicione quantos componentes quiser ao mostrador do relógio. Você também pode usar uma fonte de design personalizada para seus componentes. Por exemplo, mostre a frequência cardíaca ou os dados de contagem de passos com um componente de texto ou adicione uma imagem personalizada para iniciar um app específico.
Tipos de componentes
Os componentes compatíveis são descritos nas seções a seguir.
Tela do mostrador do relógio
Defina uma cor de tela para a camada de baixo do mostrador do relógio:
Texto
Por padrão, os campos de texto são normais. O texto normal é estático e não muda. Na janela de propriedades do campo de texto, é possível mudar o texto normal para texto de dados. O texto de dados muda e é preenchido com base em tags.
Para mais informações, consulte Expressões de tag.
Selecione a opção Apply Curved-Text para criar um texto que se curva para acompanhar o mostrador do relógio:
Determine a curva do texto definindo a largura (W) e a altura (H). Quando você muda W e H, a dimensão do componente de texto é alterada automaticamente. Para determinar a posição do texto, selecione uma das predefinições de intervalo. Outros intervalos podem ser criados especificando Start e Angular distance. Defina a direção do texto em sentido horário (CW, na sigla em inglês) ou anti-horário (CCW, na sigla em inglês).
Forma
Adicione várias formas, incluindo reticências e retângulos.
Imagem
Importe imagens personalizadas.
Animation
Importe sequências de imagens para animação, conforme descrito nas etapas a seguir.
- Crie uma sequência de animação com um programa de design, como o Adobe Flash ou o Adobe Premiere.
- Clique em Add Component > Animation para adicionar arquivos de animação ao mostrador do relógio.
- Selecione uma sequência de imagens no navegador de arquivos e clique em Upload.
- Edite a animação alterando a ordem das imagens, removendo ou adicionando imagens.
Defina o Trigger value para determinar quando a animação será mostrada.
Defina o valor do acionador como WatchFace on para iniciar sua animação assim que o mostrador do relógio for exibido. Outras opções incluem Tap, Every Sec, Every Min e Every Hour. Também é possível atrasar o início usando Delay e inserindo alguns segundos.
Outras opções de animação incluem:
- Auto replay: repete imediatamente a animação após a conclusão até que seja interrompida, como ao desligar a tela.
- Repeat delay: define um atraso entre as iterações da animação repetida.
- Resume Playback: determina se a animação será retomada ou iniciada desde o início quando a reprodução for interrompida, como ao receber uma notificação ou uma chamada telefônica.
- Hide before playing: determina se a animação será ocultada até que a reprodução seja acionada.
- Hide after finished: determina se a animação será ocultada quando a reprodução terminar.
Multimídia
Importe imagens já animadas, como arquivos AGIF, Lottie ou WebP.
Siga estas etapas para adicionar uma imagem multimídia:
- Clique em Add Component > Multimedia.
- Selecione o arquivo no navegador e clique em Upload.
- Defina o Trigger Value com o horário de início da animação.
Lembre-se de que o tamanho, a resolução e o número de frames da imagem multimídia podem afetar o desempenho do dispositivo e o consumo da bateria. As imagens multimídia são carregadas de forma assíncrona durante o funcionamento e a reprodução pode ficar atrasada, dependendo dos recursos do relógio do usuário e de várias características da imagem.
Ponteiros analógicos
Adicione ponteiros de relógio analógico para mostrar horas, minutos e segundos:
Abra o navegador de arquivos e selecione os arquivos de imagem de cada ponteiro.
Ponteiros de relógio analógico têm uma propriedade Rotação. Essa propriedade inclui as seguintes opções:
- Sync with
- Time Zone
- Rotate
- Value
- Movement Effect
A função Sync With tem as seguintes opções:
- Hour in Day
- Minute in Hour
- Second in Minute
- Day of Month
- Month of Year
- Day of Week
- Day of Year
- Moon Phase
A opção Second in Minute só funciona com o efeito de movimento Sweep. Esse efeito é definido automaticamente ao adicionar o componente da segunda mão:
Relógio digital
As opções para o relógio digital incluem Date e Time:
Ao adicionar a Date, adicione um
componente de texto com a tag de data. O padrão para datas é
DAY_WEEK_S MON_S DAY_1_31_Z.
Ao adicionar Time, inclua um componente de texto
com uma tag de relógio digital. O padrão para horas digitais é
HOUR_1_12_Z:MIN_Z:SEC_Z.
Barra de progresso
Adicione uma barra de progresso ao mostrador do relógio para monitorar várias atividades. É possível escolher entre uma barra de progresso linear ou circular. Determine uma posição da barra de progresso selecionando uma das seis predefinições de intervalo. Para criar outros intervalos, especifique Start e Angular distance. Defina a direção da barra de progresso no sentido horário ou anti-horário.
Gerenciamento de componentes
Gerencie seus componentes usando as ferramentas do WFS. Você pode adicionar, agrupar, desagrupar e ordenar componentes no mostrador do relógio, conforme descrito nas seções a seguir.
Adicionar componentes
Adicione um componente usando o botão +:
Quando você adiciona um componente, ele é colocado em uma posição padrão na tela. O componente é selecionado automaticamente para ser modificado com facilidade.
Agrupar ou desagrupar componentes
Um grupo é uma combinação de um ou mais componentes. Todos os componentes podem ser agrupados. Esses grupos podem ser separados.
Mascarar ou desmascarar componentes
Quando você usa um grupo de máscaras, o formato da camada mais inferior determina a área visível dele. As camadas acima aparecem apenas pelo contorno da forma da camada de baixo.
Por exemplo, se você colocar uma imagem de triângulo na camada de baixo e uma imagem e uma animação nas camadas acima dela, a imagem e a animação vão aparecer apenas no contorno do triângulo da camada de baixo.
Para criar um grupo de máscaras, faça o seguinte:
- Selecione as camadas que você quer agrupar.
- Escolha Mask na área da tecla de atalho ou clique com o botão direito do mouse nas camadas e selecione Mask.
Para liberar o grupo de máscaras na janela de camadas, faça o seguinte:
- Selecione o grupo de máscaras.
- Escolha Unmask na área de tecla de atalho ou clique com o botão direito do mouse nas camadas e selecione Unmask.
Janela de visualização
A janela de visualização é a área de trabalho principal ao criar o mostrador do relógio.
Adicione todos os elementos do mostrador do relógio à tela que aparece na janela de visualização. Na tela, redimensione, organize, gire e arraste os elementos na posição desejada.
Janela de camada
A janela de camada apresenta a lista de componentes e grupos mostrados na janela de visualização. Cada componente tem a própria camada por padrão.
Na janela de camada, as seguintes ações estão disponíveis:
- Search: pesquise camadas por nome.
- Show/Hide: mostre ou oculte camadas. As camadas ocultas não são mostradas na janela de visualização.
- Theme color: ative ou desative as cores do tema.
- Rename: mude o nome da camada clicando duas vezes no campo "Name" e inserindo um novo.
Clique com o botão direito do mouse em camadas para abrir as seguintes opções de menu:
- Lock/Unlock: bloqueia a camada para que ela não se mova na tela.
- Group/Ungroup: agrupa vários componentes para que eles possam ser controlados como um componente ou desagrupa um grupo de componentes.
- Mask/Unmask: abrange todas ou parte das outras camadas com base no contorno da forma da camada inferior ou remove a camada de um grupo de máscaras.
- Swap image: move o arquivo de imagem de uma camada para outra. Exibido somente para imagens.
- Layer color: adiciona um marcador de cor para diferenciar as camadas.
Linhas condicionais
Linhas condicionais permitem mostrar e ocultar componentes em um mostrador do relógio e controlar o comportamento deles. Use linhas condicionais para alterar a aparência do mostrador do relógio em resposta a determinadas condições, como tempo, contagem de passos, bateria ou evento.
Quando você adiciona um componente, a condição de tempo é definida por padrão. Para ajustar essas condições, clique no ícone de condição na camada desejada. Para configurar a repetição da condição, clique com o botão direito do mouse na área do frame e selecione Loop.
Lembre-se de que as camadas ocultas não reduzem o desempenho nem afetam a duração da bateria.
Você pode configurar o mostrador do relógio para responder à hora, à contagem de passos, ao status da bateria ou a um evento, conforme descrito nas seções a seguir.
Hora
O mostrador do relógio pode mudar dinamicamente com base em intervalos de tempo. Por exemplo, o mostrador do relógio pode ficar claro durante o dia e escurecer gradualmente após um horário definido. O horário pode ser medido em horas, minutos ou segundos.
Para adicionar uma condição de tempo, siga estas etapas:
- Crie camadas.
- Defina períodos para controlar quando cada camada será exibida. Selecione a barra inicial e depois o período.
- Clique e arraste da barra inicial para a barra final.
- Repita as etapas 2 e 3 para definir períodos para cada uma das camadas.
- Clique em Run para visualizar as alterações.
Para exibir mostradores de relógio diferentes para uma configuração de 12 horas e 24 horas com base na configuração escolhida no smartphone do usuário, faça o seguinte:
- Adicione dois componentes de relógio digital, o primeiro para a versão de 12 horas e o segundo para a versão de 24 horas.
- Coloque-os na mesma posição.
- Adicione condições de 12 horas e 24 horas às linhas condicionais dos componentes.
- Defina períodos para mostrar o primeiro componente de relógio digital da camada de 12 horas nesse formato e a outra camada no formato de 24 horas.
Controle de hora
O controle deslizante de hora permite que você veja o mostrador do relógio em ação. Use essa opção para visualizar como o mostrador do relógio muda ao longo do dia. Arraste o controle deslizante para horários específicos ou confira as animações do mostrador usando os botões de reprodução e de avanço.
Contador de passos
Você pode projetar o mostrador do relógio para que ele mude dinamicamente de acordo com a contagem de passos do usuário. Por exemplo, é possível criar um mostrador do relógio que mude com base na porcentagem da meta de passos diários que foi atingida.
Bateria
Você pode projetar o mostrador do relógio para que ele mude dinamicamente de acordo com o percentual de duração de bateria disponível.
Evento
Você pode projetar o mostrador do relógio para mudar dinamicamente de acordo com o estado do dispositivo, como bateria fraca ou notificações não lidas. Para fazer isso, selecione o evento desejado e a imagem ou animação que você quer mostrar enquanto ele estiver acontecendo.
Janela de propriedades
Cada componente tem uma variedade de propriedades modificáveis. Por exemplo, você pode mudar a cor dos números em um relógio digital ou escolher se os ponteiros do relógio medem horas, minutos ou segundos.
Painel de ações
O painel de ações na janela de propriedades permite interagir com o mostrador do relógio. Por exemplo, você pode permitir que o usuário toque em um componente para mudar imagens, abrir diferentes apps ou medir a frequência cardíaca.
Estilo
Use a guia "Style" para mudar o estilo da camada selecionada. Você pode adicionar estilos para componentes de imagens, imagens multimídia, índices e ponteiros. Você pode adicionar até 30 cores de tema e 10 imagens.
Use o Customization Editor para aplicar estilos personalizados a componentes.
Na caixa de diálogo Customization Editor, você pode personalizar o estilo de cada componente, camada e nome. Nessa caixa de diálogo, também é possível reordenar ou mesclar estilos.
É possível adicionar até 30 cores de tema à guia Style. Cada cor de tema pode ter até três variações de cores.
Defina essas cores na guia Layer ou Properties. Na guia Layer, defina a cor alternando o ícone Apply Theme Color até três vezes:
Na guia Properties, selecione o botão de opção Apply Theme Color para definir a cor:
Cor
Aplique uma cor especificada ao componente ou salve uma cor de tema para o mostrador do relógio. Para complicações, o tema de cores inicial é escala de cinza.
Aparência da imagem
Modifique a aparência de uma imagem usando os seguintes controles:
- Hue: controla o tom da cor.
- Saturate: deixa a cor da imagem mais ou menos vívida.
- Lightness: deixa as cores da imagem mais claras.
Aparência do texto
Use a guia Text appearance para definir o alinhamento do texto e o estilo da fonte. Decore o texto selecionando Add Bitmap Font em Project Settings. Se você quiser usar o tamanho padrão nas fontes de bitmap adicionadas ao projeto, selecione Apply Default Font Size.
Executar
Você pode executar o mostrador do relógio no painel Run do WFS. Você pode ajustar o horário, a data, o nível da bateria do dispositivo, a contagem de passos do usuário, a frequência cardíaca do usuário ou os valores do giroscópio no WFS para testar a aparência do mostrador do relógio em diferentes circunstâncias. Também é possível ajustar outros estilos definidos no Customization Editor, incluindo o número de notificações não lidas, expressões de tag ou linhas condicionais. A prévia de Run pode ser definida como "Active" ou "Always-on". Ao usar a opção "Always-on", o WFS mostra o valor em Current-On Pixel Ratio e o botão Analyze.
Teste o mostrador do relógio em um dispositivo usando a opção Run on device.
Para mais detalhes, consulte Testar o mostrador do relógio.