HANA no Spline: canvas 2D sem código | guia prático
Construindo no web com HANA, o editor de canvas 2D do Spline 3D: protótipos visuais sem tocar código — limites e quando ainda voltar ao hand-code
Resposta direta
Zero código acelera exploração visual; produto logado complexo ainda exige engenharia depois do wow. E então vamos pegar um contêiner de cartas, bem, você pode ver quando você ajusta a altura ou a valorização da verdadeira contêiner de cartas, isso te permite controlar quantas estão aparecendo, então se eu for até o fim, acho que aqui está bom, tem como quatro deles, ok O legal é que você pode.
O que o HANA permite no canvas 2D
E então, está usando o novo editor de canvas 2D do Spline 3D chamado HANA. E isso te permite construir coisas realmente legais como isso sem tocar no código. Então, estamos apenas escapando da superfície aqui, há muito mais a cobrir, o que eu vou fazer com este tool, e talvez integrá-lo em alguns projetos de IA. Certo, então, uma vez que você se conectou ao seu account Spline, vá para criar aqui e escolha HANA 2D Design.
Ok, agora, a forma como isso funciona é que você lida em frames, como em Figma, você tem frames, clique F no seu keyboard ou aqui em cima. E então clique à esquerda e desligue e eu estou meio que olhando para o tamanho aqui quando eu desligo se você quiser que seja, sabe, consistente com um certo aspecto de rastro 1920x1080 dessa forma você pode imaginar o que ele parece no browser então CTRL no mouse do seu mouse, o scroll wheel vai zoomar para dentro e para fora é meio que feio, tipo, janky um pouco eu gostaria que eles fixassem isso para que não seja tão janky rápido quando você zoomar mas não é um grande problema E o que eu quero fazer é pegar o fill e vamos. Então, aquele código de cor acontece a ser RGB 242, 214, 251. E vamos rapidamente colocar uma base de layout juntos.
Você pode usar círculos, clicar em O no seu keyboard para conseguir isso. Talvez você coloque um pouco de status, segure o Shift quando você tirar isso para tornar isso um círculo perfeito. E então, eu vou clicar em T para o tool de tipo. E se você quiser que esteja perfeitamente alinhado ao tamanho, você pode fazer suas ajustes como tal.
Fluxo de construir sem codificar
Vamos tentar uma quantidade de fontes de 300. Então vamos colocar isso talvez como aqui duplique-o controle d e desta vez eu vou tentar como 30 reclamo de um bilhete agora algo simples como isso e vamos dizer que este é nosso aqui vamos apenas mover isso por aqui vamos dizer que este é o nosso cartão muito breve que nós apenas desenhamos ok então agora o que faremos é vamos pegar esta carta e vamos replicar em várias vezes e então, temporariamente, eu vou apenas desligar isso para termos espaço suficiente para ver então CTRL D CTRL D com os dois selecionados e vamos fazer isso mais uma vez CTRL D selecionado sim, em algum lugar ali é bom bem Então, uma vez que você tem todos esses, então o que queremos fazer é. Tool, clique F no seu computador e aqui eu vou tirar uma forma como esta, uma frame. Agora isso automaticamente coloca tudo dentro da própria frame que nós criamos aqui.
Agora podemos chamar esta carta de contêiner e então o que podemos fazer é vir aqui em efeitos e escolher 3D projeção. Agora, se formos para os ajustes 3D, podemos começar a fazer ajustes como, por exemplo, a perspectiva. Agora, você não pode ver isso, é meio difícil de ver agora. E então vamos pegar um contêiner de cartas, bem, você pode ver quando você ajusta a altura ou a valorização da verdadeira contêiner de cartas, isso te permite controlar quantas estão aparecendo, então se eu for até o fim, acho que aqui está bom, tem como quatro deles, ok O legal é que você pode simular rapidamente algumas animações tomando o valor Y e apenas empurrando.
Ok, agora que temos isso, podemos começar a jogar com os outros efeitos um pouco mais. A cor de sombra, vamos mudar essa cor também, exceto para baixo. Nós só queremos ter certeza de que qualquer cor que escolhermos eles fazem sentido e complementam com a cor de fundo. Então, agora que temos isso, eu quero fazer as coisas um pouco maiores.
Leitura útil
Zero código acelera exploração visual; produto logado complexo ainda exige engenharia depois do wow. Use o trecho acima como restrição, não como citação ornamental.
Limites que aparecem rápido
Agora, a altura parece um pouco fechada, então eu vou ajustar a valor de altura para 7. Então agora, para fazer esse animo, o que faremos é clicar em Estatutos. E então para o nosso estado, o segundo estado que foi criado, vamos voltar aqui para os nossos setores, vamos mudar o valor do Y de 0 a 360. Agora, nada vai mudar em frente de nós em termos de aparência, mas esses são dois valores diferentes para aquele valor que nós apenas mudamos para o valor Y.
Agora, podemos apenas escolher mais abaixo de eventos e abaixo de começar, esse é o que queremos, queremos uma transição, clicar em transição, queremos ir do estado base para o estado atual, o que é correto. Vamos mudar a largura para 10 segundos e depois mudar o ease para linear porque isso vai ser um loop infinito, então vamos mudar loop para infinito. Certo, então agora clicamos em jogar e veja o que temos nossa carta de freqüência, isso é tão legal. Então agora com isso em mente, vamos lá e eu vou mostrar para você outra super forma rápida de criar outro efeito realmente legal, então vamos pegar a elipse tool and i'm just going to create um elemento agora quando você apressa coisas vai mover coisas ao redor dentro da actual visão de layout que acontece apenas vá de volta para a visão do frame isso é bom aqui vamos nós temos nossa elipse oh eu não percebi que havia dois deles vamos desligar isso aqui é nossa elipse aqui vou colocar isso no topo e o que faremos é que vou fazer isso branco e então tomar a opacidade abaixo um pouco como bem ali em cima E o que eu quero fazer é mover isso para cima, para que esteja ali, mas não queremos que esteja dentro, então precisamos ajustar isso.
Então agora, sob os ajustes de líquido e gás, podemos realmente aumentar e jogar com alguns desses. Os ajustes distorção este é o principal que realmente vai louco profundidade ok agora vamos mover isso em torno de Olha que legal isso é. Você pode até embedar esse efeito, mas claro que isso continua acontecendo, muito assustador. Ok, agora podemos só segurar esse layer e não vai acontecer mais.
Quando exportar/hand-code
Então agora, e por acaso podemos também ajustar a blurriness, o valor da blur, como se não quiséssemos que fosse muito blurrado. Então agora o que podemos fazer, se nós apenas clicarmos no play, vai ficar lá, não é tão emocionante. Vamos usar o pen tool, clicar em P no seu keyboard. Vou só criar um retângulo rápido ou não um retângulo um triângulo e vamos fazer o olho vamos ver aqui vamos tirar o desenho vamos dar uma cor preta bem, também pegaremos e dê um pouco de uh correntes alinhadas então vou pegar esse maldito e apenas movê-lo direto sobre o topo agora parece que ele está sendo transformado aqui vamos aumentar a quantidade ok então agora com isso selecionado, podemos tirar esses dois elementos e grupos-os agora com o grupo em lugar podemos simplesmente ir em frente a eventos, venha aqui e mude para seguir, então vai seguir o mouse e aumentaremos a drenagem talvez por 9 ou 10 e veja o que acontece agora oh olha isso Muito, muito legal.
Então agora isso se torna tão fácil ou simples como simplesmente, se você está pronto para usar isso no seu site, você clica em Play. Para ter uma cor transparente, assim podemos ter o que querermos no HTML atrás dele, que está superposto no topo ou atrás dele ou embaixo dele, você pode ver isso, mas deixaremos esse show apenas para manter a cor de fundo, contém, cobre, actual, responsivo, responsivo será importante se você está usando suas funções de layout, mas não estamos fazendo isso, acho que vamos mudar para cobrir para isso agora quando clicar em exportar, vai precisar atualizar tudo, então você só tem que copiar o código de embedimento uma vez e depois vamos para o cursor ou qualquer IDE que você use e nós vamos integrar isso, então eu tenho um index.html que está branco aqui em cursor, se você está usando código vs, você pode fazer a mesma coisa, acelera o exclamação, ponto, acelera, nos dá uma base de boilerplate, não vou usar ai para ajudar porque isso é tão simples e então tudo que vamos fazer é vou pastar na área que acabamos de copiar do spline Agora, se eu clicar em Save e clicar em Open with Live Server, veremos o nosso projeto. Um pouco de bordas, que é, por default, por causa do HTML para o elemento do corpo. Então, se quisermos, poderíamos sair aqui com algum estilo de CSS em linha, igual a margem zero, padding zero.
Agora, se quisermos descer, talvez este seja uma seção de heróis, por exemplo. Então, agora, se quisermos a seção de heróis, o que poderíamos fazer é colocar o contêiner e pegar a tag de fechamento, colocar embaixo aqui, salvar, voltar e aqui vamos nós. Então agora é como se você pudesse ter, você poderia até ter uma navegação aqui ou algo. Este é o seu bilhete, por qualquer propósito, talvez um pouco de uma animação de clique, nós não temos instalado isso ou nada, mas aí você vai, eu quero dizer, um tool incrivelmente poderoso que desbloqueia muitas possibilidades, espero que vocês tenham gostado disso, eu vou estar cobrindo isso mais, talvez no contexto de integrar em uma app de AI em breve, e eu vejo vocês todos muito cedo, tchau.
Encaixe em pipeline de produto
Deixe-me mostrar o que vamos construir hoje com algo chamado HANA. Isso aqui funciona no web e eu construí com zero codificação. E então, está usando o novo editor de canvas 2D do Spline 3D chamado HANA. E isso te permite construir coisas realmente legais como isso sem tocar no código.
Então, se há HTML, CSS envolvido, vai funcionar. Então, vai funcionar no seu celular, se é uma aplicação web. Então, estamos apenas escapando da superfície aqui, há muito mais a cobrir, o que eu vou fazer com este tool, e talvez integrá-lo em alguns projetos de IA. Certo, então, uma vez que você se conectou ao seu account Spline, vá para criar aqui e escolha HANA 2D Design.
Ok, agora, a forma como isso funciona é que você lida em frames, como em Figma, você tem frames, clique F no seu keyboard ou aqui em cima. E então clique à esquerda e desligue e eu estou meio que olhando para o tamanho aqui quando eu desligo se você quiser que seja, sabe, consistente com um certo aspecto de rastro 1920x1080 dessa forma você pode imaginar o que ele parece no browser então CTRL no mouse do seu mouse, o scroll wheel vai zoomar para dentro e para fora é meio que feio, tipo, janky um pouco eu gostaria que eles fixassem isso para que não seja tão janky rápido quando você zoomar mas não é um grande problema E o que eu quero fazer é pegar o fill e vamos. Eu vou escolher um cor branco, bem linda. Então, aquele código de cor acontece a ser RGB 242, 214, 251.
Próximo passo
Escolha uma métrica (tempo, retries, conversão ou qualidade aceita) e rode 7 dias antes de escalar o padrão.