Compreender as transições e as animações no Svelte
Quando bem feita, a animação pode melhorar a experiência do utilizador e pode ser uma excelente forma de enviar feedback ao utilizador. O Svelte facilita a incorporação de animações e transições na sua aplicação com muito pouca necessidade de bibliotecas JavaScript de terceiros.
Configurando um projeto Svelte
Para começar a utilizar o Svelte, é essencial garantir que tanto o ambiente de tempo de execução do Node.js quanto o Node Package Manager (NPM), que facilita a instalação de pacotes para aplicativos JavaScript, estejam adequadamente instalados no seu dispositivo de computação. Para iniciar o processo de configuração, abra uma janela de terminal e execute o seguinte comando:
npm create vite
Em primeiro lugar, dê um nome ao seu projeto e, em seguida, escolha Svelte como a estrutura preferida. Em seguida, configure-o para usar JavaScript, selecionando a opção apropriada no processo de instalação. Depois disso, navegue até a pasta raiz do projeto e execute os comandos de instalação de dependência necessários no terminal ou no prompt de comando.
npm install
A tarefa requer a eliminação de código redundante do projeto, erradicando os directórios “assets” e “lib”, eliminando o conteúdo dos ficheiros “App.svelte” e “App.css”.
Como usar o Tweening no Svelte
O Tweening refere-se a um método usado em animação e computação gráfica, que envolve a geração de quadros intermediários entre dois quadros-chave para produzir movimentos ou transformações perfeitos e de aparência natural. A estrutura Svelte fornece um meio eficiente de utilizar essa técnica, empregando valores numéricos para elementos animados, facilitando assim a criação de transições suaves e responsivas em aplicativos da Web.
O utilitário Tweened pertence ao módulo Svelte/Motion e pode ser integrado em componentes por meio de uma instrução de importação que segue a sintaxe especificada.
import { tweened } from 'svelte/motion'
O utilitário tweened no Svelte funciona como um armazenamento gravável personalizável, que permite aos utilizadores gerir eficazmente o estado da sua aplicação. Este utilitário consiste em dois métodos principais, nomeadamente “set” e “update”, que permitem aos programadores manipular dados de forma eficiente. Essencialmente, um tweened store assume a forma de um objeto JavaScript, fornecendo um meio acessível para supervisionar e controlar a evolução do conteúdo dinâmico de uma aplicação.
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
o valor inicial do elemento ligado representado pelo primeiro parâmetro, que serve de predefinição para a ligação y ; e um objeto que inclui duas propriedades, nomeadamente duration e easing .O primeiro especifica o intervalo de tempo em milissegundos que a interpolação persistirá, enquanto o último designa a função de facilitação a ser aplicada durante o processo de animação.
As funções de facilitação no domínio do Svelte estabelecem a conduta para uma transição e são englobadas pelo módulo svelte/easing. Por conseguinte, é necessário importar uma determinada função deste domínio para a incorporar no repositório de interpolação. A estrutura do Svelte apresenta um visualizador de transições, que permite aos utilizadores investigar os padrões de comportamento exibidos por várias funções de transições.
Para demonstrar eficazmente as capacidades do utilitário tween num ambiente Svelte, considere o seguinte exemplo em que utilizamos o repositório tween para ampliar incrementalmente as dimensões de um componente no ecrã.
<script>
import { tweened } from "svelte/motion";
import { bounceOut } from "svelte/easing";
const size = tweened(0, {
easing:bounceOut
})
</script>
<div class="container">
<div style={`height: ${$size * 30}px;`}>
</div>
</div>
<button on:click={()=>(size.update(()=>$size\\+3))}>Increase size</button>
<style>
.container{
display: flex;
align-items: flex-end;
margin-top: 400px;
}
div{
height:0;
width:100px;
background-color: red;
}
</style>
O código importa duas funções, tweened e bounceOut , que estão localizadas nos respectivos módulos Svelte svelte/motion e svelte/easing . Subsequentemente, é definida uma variável constante e ligada à loja tweened , cujo valor predefinido é representado por this.$options.animate=true; . Este valor por defeito pode ser acedido utilizando o símbolo $ . Por fim, a função tweened aceita um argumento adicional, um objeto que contém uma propriedade easing que faz referência à função bounceOut easing fornecida pelo módulo svelte/easing .
O segmento de marcação contém um elemento de botão com um atributo onclick que invoca o método de atualização da ligação de tamanho. Ao clicar no botão, o método de atualização aumenta a variável de armazenamento do tamanho do cifrão em três. Além disso, o elemento div possui um estilo em linha regido pelo valor de armazenamento do tamanho do cifrão. Quando executado num browser da Web, o utilizador observará a seguinte apresentação visual:
Transições em Svelte
Para facilitar o processo de incorporação e remoção de elementos dentro do Modelo de Objeto de Documento (DOM) em Svelte, ele emprega uma diretiva conhecida como diretiva “transition” junto com um módulo dedicado chamado “svelte/transition”. Este módulo oferece uma gama de funções práticas que podem ser utilizadas juntamente com a diretiva “transition” para vários fins. A título de exemplo, pode utilizar-se a função “blur” importada do módulo “svelte/transition” para criar um efeito de fade-in ou fade-out num elemento à medida que este entra ou sai do DOM.
<script>
import { blur } from 'svelte/transition';
</script>
Para implementar a capacidade de montar e desmontar elementos do Modelo de Objeto de Documento (DOM), comece por introduzir um sinalizador booleano como uma propriedade de script que é inicialmente definida como false . Isso servirá como um indicador de visibilidade para o elemento na página. Ao utilizar esta funcionalidade, os programadores podem gerir eficazmente a interação do seu código com o DOM, alternando a visibilidade de elementos específicos em tempo de execução.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Certamente, aqui está um exemplo de como conseguir isso em Vue.js usando a diretiva v-if:html export default {data() {return {isBlur: false // define o valor inicial apenas para fins de demonstração};},computed: {/** define classes CSS personalizadas com base na prop isBlur */get blurClass() {return isBlur ? ‘blur’ : ‘’;}}};
{#if visible}
<div>Here I am...</div>
{/if}
Incorpore o trecho de código fornecido em um arquivo HTML e inclua-o como parte do conteúdo da sua página da Web. O código apresentará um parágrafo com um botão que alterna a visibilidade de um elemento div que contém informações adicionais sobre o produto.
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Após a execução do código num ambiente de browser da Web, espera-se que seja observada a seguinte apresentação visual:
fade, blur, fly, slide, scale, draw e crossfade. Estas transições são altamente personalizáveis e podem ser configuradas com vários parâmetros, como atraso, duração, suavização, opacidade e quantidade, cada um servindo para melhorar ou modificar os seus efeitos em conformidade.
Claro! Que tal isto? Para além de controlar as transições com base em propriedades como enter ou exit , o Svelte fornece uma abordagem mais granular através de transições in e out . Por exemplo, considere o nosso exemplo anterior em que pretendemos que o elemento tenha um efeito de desfocagem ao entrar e um efeito de deslizamento ao sair. Podemos conseguir isto utilizando as transições adequadas da seguinte forma:
<script>
import { blur, slide } from 'svelte/transition';
let visible = false;
</script>
{#if visible}
<div in:blur out:slide>Here I am...</div>
{/if}
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
No trecho de código mencionado acima, vale a pena observar que a diretiva de transição está ausente do elemento div. Em vez disso, foram especificadas duas transições utilizando a técnica de keyframes, nomeadamente “blur” e “slide”, que são apontadas pelas propriedades “from” e “to” das respectivas regras @keyframe.
Animar elementos esbeltos
Primeiro, Último, Inverter, Reproduzir.Ele engloba três argumentos cruciais - atraso, duração e atenuação - que são fundamentais para criar efeitos visuais cativantes durante os processos de animação. Para ilustrar a sua funcionalidade, vamos examinar o seguinte código de exemplo.
<script>
import { flip } from "svelte/animate";
let originalList = ["Tomatoes", "Bread", "Fish", "Milk", "Cat food"];
let shoppingList = [...originalList];
</script>
<div class="container">
{#each shoppingList as item (item)}
{@const number = shoppingList.indexOf(item)}
<div animate:flip>
{number \\+ 1}. {item}
</div>
{/each}
</div>
<button on:click={() => shoppingList = shoppingList.sort()}>Arrange</button>
<button on:click={() => shoppingList = [...originalList]}>Reset</button>
O snippet fornecido demonstra a implementação da diretiva animate em um aplicativo Svelte. Dentro da tag