O configurador pode ser usado como uma visualização dinâmica do funcionamento do sistema, tal como especificado pelas equipas de design de produto. Torna-se facilmente numa ferramenta útil para vários departamentos, que permite ao utilizador observar o desempenho do ar condicionado em tempo real, a composição dos materiais, bem como ver as dimensões e a interface do utilizador. O configurador de ar condicionado é também uma visualização digital que permite aos consumidores configurar e testar o sistema de refrigeração em tempo real, selecionando detalhes para os requisitos de refrigeração e preferências de eficiência energética.
O objetivo deste configurador de ar condicionado é explicar todas as funcionalidades usando elementos personalizados de Floating UI, interações e animações.
A Floating UI deve:
A animação deve:
O projeto foi modelado do zero no Vectary Studio usando objetos primitivos, modo de edição e modificadores. A parte superior do ar condicionado foi desenhada primeiro em Figma e importada como um ficheiro .svg, onde foi convertida em geometria e usada num boolean para criar o recorte.
Vamos dividir este projeto em algumas categorias, começando pelas animações. Há um total de quatro animações: Start, Stop, Fan e Swing mode. Como os nomes sugerem, cada uma desempenha uma função específica.
Criar várias animações em vez de apenas uma dá-te mais controlo sobre elas. Ao configurar interações, podes criar a sensação de uma animação contínua usando atrasos com durações específicas baseadas na sua duração. Desta forma, uma animação começa quando a anterior termina. Este método proporciona um controlo muito melhor sobre as animações mais tarde, ao combiná-las com elementos de Floating UI e ao configurar interações. Não te esqueças de definir as condições; caso contrário, a ordem pode não funcionar. Por exemplo, o modo Swing ativa a animação Swing, que só pode ser reproduzida quando a animação Start estiver concluída.
Toda a cena está definida para um esquema de cores neutro de cinzento claro/branco. Os aparelhos de ar condicionado de interior costumam misturar-se com a divisão e não atraem muita atenção, razão pela qual escolhemos a cor branca e materiais metálicos. Uma característica de design interessante deste ar condicionado em particular é a tampa frontal que oculta os componentes internos quando o aparelho não está a funcionar. No topo da tampa, existe uma fina peça de geometria com um material de vidro aplicado, dando-lhe profundidade e reflexos agradáveis. A temperatura e os ícones estão colocados por baixo deste painel de vidro. Foi feito o baking de um lightmap nas partes exteriores, enquanto a oclusão de ambiente (AO) foi usada para as partes internas. As texturas de AO são menores em tamanho comparadas com os lightmaps, tornando-as ideais para áreas onde não é necessário um nível de detalhe elevado.
Materiais animados são aplicados a dois planos com modificadores de noise e bend usando ficheiros Lottie no formato .json, ambos definidos como emissivos com alguma opacidade.
Dica: O plano do chão não pode ser rodado. Para teres uma sombra distribuída de forma uniforme na parede atrás do ar condicionado, usa um plano com um mapa de AO com baking.
A Floating UI imita uma versão simplificada de um comando real de ar condicionado. Inclui um botão para ligar/desligar, botões para aumentar/diminuir a temperatura e botões para ligar/desligar o modo Swing e a filtragem de ar. A visibilidade da FUI pode ser alternada ao clicar no ícone do logótipo no canto, garantindo que a FUI não cobre o canvas a toda a hora.
O ícone do purificador de ar ativa a visibilidade de dois estados de ícone: um com uma cor que indica desligado e outro em verde que indica que está ligado. Também ativa a visibilidade de um ícone de folha 3D no próprio ar condicionado.
O modo Swing ativa a animação Swing com a condição de que a animação Start esteja concluída.
O ícone do botão de energia usa um truque com dois ícones que se alternam com interações de ocultar/mostrar (hide/unhide), eliminando a necessidade de definir condições. O botão de energia ativa várias ações, tais como mostrar o fluxo de ar com materiais animados, mostrar o estado do botão de energia como Ligado, reproduzir a animação Start e mostrar a temperatura com texto 3D. O botão de energia desligado ativa depois a animação Stop e oculta os materiais de fluxo de ar animados com setas.
O aspeto mais importante deste projeto é o uso de Eventos, que definem uma determinada lógica com base no comportamento dos elementos. Nesta cena, os eventos controlam as definições de temperatura. Primeiro, precisas de definir o valor do evento on-load. Estamos a usar o tipo de evento Number, onde é criado um novo evento Temp_def com o valor definido para 24. Isto significa que, assim que abrires o projeto, a temperatura predefinida na FUI e no ar condicionado será definida para 24. Podes inserir este Temp_def noutros elementos no Studio, como texto 3D ou o campo de texto da Floating UI.
A seguir, precisas de definir que, ao clicar, o Temp_def irá aumentar uma unidade. A nova interação terá este aspeto:
A interação para diminuir a temperatura é definida para o ícone Down ao clicar, com uma condição para o evento mínimo, tipo number, evento Temp_def e valor maior que 18. A ação é depois definida para event, tipo number, evento Temp_def e valor Temp_def-1.
Esta configuração irá garantir que clicar nos ícones up ou down irá aumentar ou diminuir a temperatura em 1, com um mínimo de 18 e um máximo de 28.
