O componente Galeria com transição

Esse componente não é compatível com anúncios HTML para AMP, anúncios em vídeo nem com anúncios gráficos.

O componente Galeria com transição permite exibir imagens em sequência, usando uma animação para fazer a alternância entre elas.

Como escolher a galeria certa

O Google Web Designer tem três componentes de galeria diferentes:

• A Galeria 360º mostra imagens de todos os lados de um objeto, permitindo que você deslize-o para frente e para trás. A Galeria 360° não exibe grupos nem elementos de navegação.
• A Galeria deslizante tem uma aparência simples e plana e permite que você movimente imagens ou grupos no sentido vertical ou horizontal.
• A Galeria carrossel é semelhante à Galeria deslizante, mas ainda oferece tridimensionalidade às imagens vizinhas, como se elas estivessem em uma tela giratória.
• A Galeria com transição oferece uma variedade de efeitos de animação quando você alterna de uma imagem para outra.

Para usar a Galeria com transição, faça o seguinte:

1. Abra o painel Componentes e a pasta Galerias.

2. Clique duas vezes no componente Galeria com transição ou arraste-o para o cenário.

3. Clique duas vezes no componente ou clique no botão Configurações... no painel Propriedades. A caixa de diálogo "Galeria com transição" será aberta.

4. O painel Biblioteca à esquerda exibirá imagens que poderão ser incluídas na galeria. Para adicionar imagens diferentes, clique em Importar recursos na parte inferior do painel ou arraste-as de uma janela para outra.

5. Arraste as imagens que você quer usar na galeria para o painel Frames na parte inferior da caixa de diálogo ou leve-as para o cenário. Para incluir várias imagens da "Biblioteca", selecione todas elas, clique com o botão direito do mouse na seleção e escolha Adicionar.

6. Selecione o tipo de transição no painel Transição.

7. Personalize a duração da transição, o easing e outras propriedades descritas abaixo.

Para reorganizar as imagens da galeria, faça o seguinte:

1. Para abrir a caixa de diálogo "Galeria com transição", clique duas vezes no componente no cenário ou clique em Configurações... no painel Propriedades.
2. No painel Frames, na parte inferior da tela, arraste uma imagem para a nova posição.

Para remover uma imagem da galeria, faça o seguinte:

1. Para abrir a caixa de diálogo "Galeria com transição", clique duas vezes no componente no cenário ou clique em Configurações... no painel Propriedades.
2. Selecione as imagens que você quer remover no painel Frames na parte inferior da tela.
3. Pressione a tecla Delete ou clique com o botão direito do mouse na seleção e escolha Excluir no menu pop-up.

Para trocar uma imagem da galeria, faça o seguinte:

1. Para abrir a caixa de diálogo "Galeria com transição", clique duas vezes no componente no cenário ou clique em Configurações... no painel Propriedades.
2. Clique com o botão direito do mouse na imagem no painel Frames e selecione Trocar imagem no menu pop-up.

Propriedades

Você pode acessar as propriedades desse componente na caixa de diálogo "Galeria com transição". Para abrir a caixa de diálogo, clique duas vezes na opção "Galeria com transição" no cenário ou clique em Configurações... no painel "Propriedades".

Tipos de transição

Um conjunto diferente de propriedades estará disponível, dependendo do tipo de transição.

Nenhum

Indica que não há efeito de transição visual entre os frames.

Esmaecer

A imagem original desaparece da visualização para revelar uma nova.

Propriedade	Descrição
Duração	É a duração da animação de um frame para outro, em segundos. O padrão é 1.
Easing	É o easing da animação de transição. Linear (padrão) Ease-in Ease-out Ease-in-out

Empurrar

A nova imagem desliza para a área de visualização enquanto a imagem antiga é empurrada para fora.

Propriedade	Descrição
Estilo	Normal	Dividir
Duração	É a duração da animação de um frame para outro, em segundos. O padrão é 1.
Easing	É o easing da animação de transição. Linear (padrão) Ease-in Ease-out Ease-in-out
Direção (disponível se o Estilo for definido como Normal)	Indica a direção do efeito. Da esquerda para a direita (padrão) Da direita para a esquerda De cima para baixo De baixo para cima
Orientação (disponível se o Estilo for definido como Dividir)	Indica a orientação da animação. Horizontal Vertical (padrão)

 

Wipe

A nova imagem substitui gradualmente a antiga com um efeito de linhas em movimento.

Propriedade	Descrição
Estilo	Normal	Porta	Íris
	Radial	Listras
Duração	É a duração da animação de um frame para outro, em segundos. O padrão é 1.
Easing	É o easing da animação de transição. Linear (padrão) Ease-in Ease-out Ease-in-out
Direção (disponível se o Estilo for definido como Normal, Listras, Porta ou Radial)	Indica a direção do efeito. As opções disponíveis dependerão do estilo: Normal ou Listras: Da esquerda para a direita (padrão) Da direita para a esquerda De cima para baixo De baixo para cima Porta: Abertura (padrão) Fechamento Radial: Sentido horário (padrão) Sentido anti-horário
Ângulo (disponível se o Estilo for definido como Normal)	Indica o ângulo da linha de wipe em graus, de -89 a 89.
Orientação (disponível se o Estilo for definido como Porta)	Indica a orientação da animação. Horizontal Vertical (padrão)
Origem (disponível se o Estilo for definido como Íris ou Radial)	Indica a origem X e Y da íris ou o raio de movimento, como uma porcentagem do frame da galeria.
Listras (disponível se o Estilo for definido como Listras)	É o número de listras de cada cor, de 1 a 10. O padrão é 2.
Cor (disponível se o Estilo for definido como Listras)	É a cor de cada listra.

 

Fatia

A nova imagem é revelada em fatias ou barras que são exibidas uma após a outra.

Propriedade	Descrição
Duração	É a duração da animação de um frame para outro, em segundos. O padrão é 1.
Easing	É o easing da animação de transição. Linear (padrão) Ease-in Ease-out Ease-in-out
Direção	Indica a direção do efeito. Da esquerda para a direita (padrão) Da direita para a esquerda De cima para baixo De baixo para cima
Fatias	Indica o número de fatias, de 1 a 20. O padrão é 5.
Revelar plano de fundo transparente	Marque esta caixa para mostrar um plano de fundo transparente antes de fazer a transição para a nova imagem, em vez de sobrepor a imagem antiga.

Persiana

A nova imagem é revelada como se estivesse atrás de persianas.

Propriedade	Descrição
Estilo	Normal	Persiana
Duração	É a duração da animação de um frame para outro, em segundos. O padrão é 1.
Easing	É o easing da animação de transição. Linear (padrão) Ease-in Ease-out Ease-in-out
Direção (disponível se o Estilo for definido como Normal)	Indica a direção do efeito. Da esquerda para a direita (padrão) Da direita para a esquerda De cima para baixo De baixo para cima
Orientação (disponível se o Estilo for definido como Persiana)	Indica a orientação da animação. Horizontal Vertical (padrão)
Persiana	É o número de persianas, de 1 a 20. O padrão é 5.
Revelar plano de fundo transparente (disponível se o Estilo for definido como Normal)	Marque esta caixa para mostrar um plano de fundo transparente antes de fazer a transição para a nova imagem, em vez de sobrepor a imagem antiga.
Gradual (disponível se o Estilo for definido como Persiana)	Marque esta caixa se as persianas precisarem fazer a transição em sequência, em vez de ao mesmo tempo.

Girar

A imagem antiga começa a girar e aumentar o zoom. Depois o zoom é reduzido na nova imagem até completar a rotação.

Propriedade	Descrição
Duração	É a duração da animação de um frame para outro, em segundos. O padrão é 1.
Easing	É o easing da animação de transição. Linear (padrão) Ease-in Ease-out Ease-in-out
Direção	Indica a direção do efeito. Sentido horário (padrão) Sentido anti-horário

Zigue-zague

A nova imagem é gradualmente revelada em um padrão de movimento de serpente.

Propriedade	Descrição
Duração	É a duração da animação de um frame para outro, em segundos. O padrão é 1.
Easing	É o easing da animação de transição. Linear (padrão) Ease-in Ease-out Ease-in-out
Orientação	Indica a orientação da animação. Horizontal (padrão) Vertical
Linhas	Indica o número de linhas, de 1 a 20. O padrão é 5.
Colunas	Indica o número de colunas, de 1 a 20. O padrão é 5.

Propriedades da Galeria com transição

Propriedade	Descrição
Nome	É o nome do componente Galeria com transição.
Imagens	São as imagens exibidas na galeria. Faça mudanças no painel Frames da caixa de diálogo "Galeria com transição". Pode ser vinculado a dados dinâmicos.
Dimensionamento	Determina como as imagens de tamanhos diferentes são exibidas em um frame de tamanho fixo: Saiba mais. Redimensionar imagem para caber Cortar imagem para preencher Nenhum Esticar imagem para preencher
Frame inicial	Indica o frame que você quer exibir inicialmente (sendo 1 o primeiro frame).
Reprodução automática
Reprodução automática	Se esta opção for marcada, os frames na galeria serão reproduzidos automaticamente. O tempo total para reprodução em toda a galeria será exibido no painel Frames quando essa opção estiver ativada.
Intervalo	Indica por quanto tempo cada frame ficará visível, em segundos. Esse recurso só será ativado se a opção Reprodução automática estiver marcada.
Repetir	Mostra o número de vezes que os frames serão reproduzidos na galeria, com 0 indicando looping infinito. Esse recurso só será ativado se a opção Reprodução automática estiver marcada.
Interação
Unir	Quando marcada, essa opção permite a navegação do último frame até o primeiro.
Gesto	Indica o gesto do usuário que altera o frame atual na galeria. Nenhum Clicar (padrão) Deslizar (disponível somente para alguns tipos de transição*) Além do gesto selecionado, os usuários poderão usar os marcadores de navegação que estiverem ativados ou qualquer controle de navegação personalizado configurados por você usando eventos.
Ignorar deslizamento na direção inversa	Se essa opção estiver marcada, o componente não responderá a gestos de deslizar na direção oposta do efeito de animação, e o usuário não poderá navegar para o frame anterior. Esse recurso só será ativado se a propriedade Gesto for definida como Deslizar e a opção Ativar transição interativa não estiver marcada.
Ativar transição interativa	Quando marcada, a animação de transição seguirá o movimento do mouse do usuário. Esse recurso só será ativado se a propriedade Gesto puder ser definida como Deslizar*.
Navegação
Incluir	Se essa opção estiver selecionada, a galeria exibirá os marcadores de navegação.
Miniaturas	Se essa opção estiver selecionada, a galeria exibirá uma miniatura de cada frame para navegação.
Destaque	Define a cor de destaque do frame exibido no momento.
Avançado
URLs de saída	É uma lista de URLs de saída, um para cada frame, separados por vírgula. Pode ser vinculado a dados dinâmicos.

 

* Compatibilidade com o recurso Deslizar

Os seguintes estilos e tipos de transição são compatíveis com o recurso de deslizar:

• Empurrar - Normal
• Fatia
• Wipe - Normal
• Wipe - Listras
• Persiana - Normal

Eventos e ações

Eventos enviados pelo componente Galeria com transição

É possível acionar outras ações com base nos seguintes eventos do componente Galeria com transição:

Evento	Descrição
Reprodução automática finalizada	Enviado quando a reprodução automática é encerrada por algum motivo. Se ela terminar naturalmente ao atingir a contagem de loop pretendida, event.detail.completed será verdadeiro. Caso contrário, será falso.
Frame ativado	É enviado quando um novo frame começou a ser ativado, mesmo que ainda não seja visível.
Frame exibido	É enviado quando um novo frame é exibido.
Toque do frame	É enviado quando o usuário toca em um frame.
Girar ao terminar	É enviado quando a rotação é encerrada por algum motivo. Se ela terminar naturalmente, event.detail.completed será verdadeiro. Caso contrário, será falso.
Extremidade esquerda	É enviado quando a galeria chega ao final esquerdo dela.
Extremidade direita	É enviado quando a galeria chega ao final direito dela.

Para selecionar um desses itens na caixa de diálogo "Evento", defina o componente Galeria com transição como o destino.

Ações realizadas pelo componente Galeria com transição

As seguintes ações do componente Galeria com transição podem ser acionadas em resposta a outros eventos:

Ação	Opções de configuração
Ir para o frame	Número do frame Animar
Alternar uma vez	Iniciar a partir do frame atual
Iniciar exibição automática	Iniciar a partir do frame atual
Parar	nenhum
Ir adiante	none ("nenhum")
Voltar	nenhum

Quando você selecionar uma dessas ações na caixa de diálogo Evento, defina o componente Galeria com transição como o destinatário.

Saiba como configurar eventos.

Visualizar

Se você estiver no modo Design da caixa de diálogo "Galeria com transição", clique no botão Reproduzir no painel Frames para ver a aparência da transição básica, iniciando no frame atual selecionado. Você pode modificar as propriedades enquanto a visualização é exibida para que as mudanças entrem em vigor imediatamente.

Alterne para a guia Visualização para ver como a Galeria com transição funciona com as propriedades definidas por você, incluindo as opções de reprodução automática e interação.

Também é possível visualizar o documento no navegador da sua preferência. Para isso, clique em Salvar na caixa de diálogo e, em seguida, no botão Visualizar.