Quando criamos textos simples no After Effects, o ponto pivô (anchor point) costuma ser posicionado no canto inferior esquerdo. Por outro lado, ao criar uma caixa de texto, o ponto pivô é inicialmente centralizado na caixa. No entanto, ao realizar edições no conteúdo, ele permanece fixo como se estivesse definido de forma estática em relação à caixa.
Existe um truque muito útil para garantir que o ponto âncora (anchor point) se ajuste dinamicamente, reposicionando-se sempre no centro, independentemente das alterações feitas no texto. Para isso, podemos utilizar a seguinte expressão aplicada ao ponto âncora:
var {top, left, width, height} = sourceRectAtTime();
var posX = left + width/2;
var posY = top + height/2;
[posX, posY]Vamos analisar essa expressão passo a passo para você dominar o controle do anchor point da sua camada.
Explicação detalhada:
1
var {top, left, width, height} = sourceRectAtTime();Essa linha de código em JavaScript usa uma técnica chamada desestruturação de objetos para extrair informações de um objeto de forma mais concisa. O que acontece aqui basicamente é, em vez de acessar cada propriedade do objeto incividualmente (por exemplo sourceRectAtTime().height, sourceRectAtTime().width, etc.) essa linha “desempacota” o objeto e atribui cada pripriedade deiretamente a uma variável com o mesmo nome. Para saber mais, visite a documentação oficial do javascript.
1.1: sourceRectAtTime(): Essa função, no After Effects, retorna um objeto. Esse objeto contém informações sobre as dimensões e a posição de uma camada em um determinado momento. As informações são: top, left, width e height, que representam, respectivamente, o topo, a esquerda, a largura e a altura da camada.
1.2: var {top, left, width, height} = ...: Aqui entra a desestruturação. Em vez de acessar cada propriedade do objeto individualmente (como sourceRectAtTime().top, sourceRectAtTime().left, etc.), essa linha “desempacota” o objeto e atribui cada propriedade diretamente a uma variável com o mesmo nome.
Resumindo, essa linha usa desestruturação para obter as propriedades top, left, width e height do objeto retornado por sourceRectAtTime(). Essas propriedades representam as dimensões e a posição da camada no tempo especificado.
2
var posX = left + width/2;- Calcula a posição horizontal (X) do centro da camada.
lefté a posição da borda esquerda da camada.width/2é a metade da largura da camada.- Somando
leftcomwidth/2, encontramos o ponto central no eixo horizontal.
3
var posY = top + height/2;- Calcula a posição vertical (Y) do centro da camada.
topé a posição da borda superior da camada.height/2é a metade da altura da camada.- Somando
topcomheight/2, encontramos o ponto central no eixo vertical.
4
[posX, posY]- Essa linha retorna um array com as coordenadas
posXeposY, que representam o centro da camada. - Ao aplicar essa expressão no
anchor point, você instrui o After Effects a posicionar o ponto de ancoragem exatamente no centro da camada.
Espero que este conteúdo de ajude. Inscreva-se em nosso canal do Youtube para mais conteúdos como esse.
Até a próxima!
