Transcrições
1. Olá! Introdução aos cursos: Você já quis tornar seus projetos vivos ou talvez tenha ouvido falar de codificação criativa, mas não teve a chance de cavar mais fundo. Oi. Meu nome é Agan. Adoro te mostrar algo muito excitante. Animando SVG com um CSS simples. Mal posso esperar para mostrar a magia que vem da combinação de SVG e CSS. CSS é uma linguagem de codificação. Você pode estilizar sites com ele. Você pode fazer as animações. Enquanto SVG é um formato gráfico vetorial. Se você não tem experiência em codificação não
se preocupe Eu tento explicar tudo passo a passo, que você
possa seguir as aulas.
2. Objetivos dos cursos: O objetivo do curso é mostrar a todos os interessados em codificação de design gráfico que SVG e CSS combinados juntos são ótimas ferramentas para fazer elementos animados divertidos na Web. Você não precisa ser experiente desenvolvedor ou designer para fazer uso dele e tirar a maior vantagem. O resultado final do curso será gráficos animados codificados por você. O código é destinado a pessoas que gostam de codificação, designers que gostariam de animar, fazer projetos vetoriais com o código, todos que gostam de criar coisas no computador e na Web.
3. Ferramentas: Para essas aulas, vamos usar algumas ferramentas. Primeiro, seu navegador favorito e suas ferramentas de desenvolvimento. As ferramentas de desenvolvimento fazem parte de todos os navegadores da Web e ajudam você a depurar seu código. Depois mostro-te quando os encontrares. Segunda ferramenta, é um editor de código. Se você ainda não usou nenhum deles, eu recomendaria Atom ou Sublime Text. Atualmente, eu uso o Atom. É editor gratuito que você pode baixar do atom.io e está disponível para todos os sistemas. A última coisa que precisamos é do arquivo SVG. Você encontrará os arquivos SVG no pacote que estou compartilhando com você.
4. Materiais: Lembre-se de baixar o pacote com todos os materiais como arquivos HTML, as soluções para meus desafios e arquivos SVG. Estamos na seção do seu projeto e à direita você pode ver arquivos anexados. Baixe este pacote. O pacote consiste em várias pastas. Você tem modelo HTML, que é basicamente um modelo HTML simples onde você pode colar o seu código SVG. Você também pode ver arquivos SVG, então diferentes gráficos SVG Eu preparei especialmente para você. Você pode animar algumas coisas lá fora. Temos dinheiro, olho e outras coisas. Você tem também olho-exercício eo exercício que eu estou explicando no vídeo incluindo feliz-face, você tem a solução para o olho-exercício e você pode conferir outras animações SVG divertidas para inspirações.
5. Introdução ao SVG: Antes de começarmos a trabalhar no código, vamos descobrir mais sobre o SVG. SVG significa gráficos vetoriais escaláveis. É um formato de imagem vetorial baseado em XML. Hoje SVG é usado para tudo. De logotipos, ícones, iconográficos a conteúdo animado. SVG pode ser controlado por CSS; o que vamos aproveitar em nossas classes. Como mencionado SVG é gráficos vetoriais. Significa que é nítido e bonito, não importa quais sejam as resoluções. Você pode mudar sua altura e largura, e isso não afetará sua qualidade. Então, resumindo os principais recursos SVG são; SVG é escalável, ele escala para cima e para baixo sem perder qualidade, SVG é gráficos vetoriais, SVG é cristalino, SVG é controlado por CSS, que facilita para nós para se divertir e implementar alguns efeitos simples, mas atraente.
6. Introdução ao CSS (para os não codificadores): Esta lição do curso é focada em pessoas que ainda não tiveram a experiência de codificação em CSS. Se você já estiver familiarizado com o estilo dos elementos no site, você pode pular essa parte das aulas. Então, vamos começar com a pergunta, o que é CSS? CSS é folhas de estilo em cascata. É uma linguagem de folha de estilo usada para estilizar os elementos em seu site, que são colocados graças ao HTML. CSS descreve como os elementos devem ser colocados, como eles devem se parecer, etc. Também podemos animar os elementos, que é o que vamos nos concentrar durante essas aulas. Então, e sobre a sintaxe CSS? No lado direito, você tem o arquivo CSS. Um conjunto de regras CSS consiste em um seletor e um bloco de declaração. O seletor, na verdade seleciona o conteúdo que você deseja estilo, ele pinça para o elemento HTML. Então, neste caso, queremos estilizar P, que significa parágrafos e em nosso HTML, está no lado esquerdo. Você pode ver que nós temos parágrafos. P aqui, e P como um seletor na folha de estilos. O bloco de declaração consiste em uma ou mais declarações, e eles são separados por ponto-e-vírgula. Por favor, lembre-se sobre eles. Cada declaração consiste em propriedade e seu valor. Assim, por exemplo, tamanho da fonte, cor, margin-top e text-align são propriedades, e eles têm seu valor definido. Existem diferentes tipos de seletores. primeiro é o seletor de elemento que seleciona elemento com base no nome do elemento em HTML. É o que eu já mencionava. Aqui temos o seletor de elementos P, e ele seleciona todos os P, todos os parágrafos no documento HTML. Então, no nosso caso, todos os parágrafos terão tamanho de fonte 15 pixels, cor rosa, margem superior 30 por cento, e eles serão alinhados ao center.Você pode ver que os parágrafos são rosa, e alinhados centralizados. Outro seletor é o seletor de classe, que vamos usar com muita frequência em nosso curso. Então, por favor, mantenha-se concentrado. O seletor de classe, dentro daqui, seleciona elementos do atributo de classe específico. Para selecionar elementos com uma classe específica, você tem que escrever um ponto e o nome da classe. No documento HTML você tem que adicionar classe de atributo, e nome, você adicioná-lo para a classe em CSS, para realçá-lo. O parágrafo com o código de classe destacado agora tem um fundo cinza claro. Podemos mudá-lo para cores diferentes. O último setor é o seletor de ID, aqui dentro. O ID de um elemento deve ser exclusivo dentro de uma página. Então, o seletor de ID usado para selecionar um elemento exclusivo em todo o site. Para selecionar um elemento do ID específico, escrevemos um hash
e, em seguida, o nome do ID. Então, aqui se queremos ter o cabeçalho, com um tamanho de fonte maior, podemos adicionar atributos de ID, e o nome deste ID. Então, temos a introdução. Se atualizarmos a página, podemos ver que o cabeçalho tem introdução ID. Graças a isso, nosso texto tem tamanho de fonte 20 pixels. Então, para a revisão rápida, mencionamos três setores diferentes em CSS; seletor de
elementos, seletor de classe e seletor de ID. Neste curso vamos usar seletor de classe com muita frequência. Lembre-se que ponto significa classe e depois ponto precisamos definir o nome da classe no arquivo CSS. Em HTML temos que adicionar ao elemento dado, o atributo de classe e o nome da classe. Claro que podemos adicionar classes a vários elementos.
7. Código SVG: Vamos dar uma olhada no código SVG. Podemos abrir todos os arquivos SVG no editor de código, e podemos ver o que está lá fora. Estou usando o Atom, e como podem ver, temos um código SV. Como mencionado, SVG tem formato gráfico Vectra baseado em XML. É semelhante ao HTML. Se você estiver familiarizado com a sintaxe, você pode ver suas semelhanças. Temos elementos diferentes como círculo e caminho, e eles descrevem nossa forma. Então, vamos abrir o SVG no navegador da web e ver como ele é renderizado. Se abrirmos ferramentas de desenvolvimento, você pode inspecionar todos os elementos do SVG. Por que é tão legal? A maior vantagem disso é que podemos aplicar estilos e mudá-lo, podemos animar alguns elementos ou ocultá-los, nos
dá toneladas de possibilidades especialmente quando
combinamos código SVG com animações CSS simples. Como fazer isso? Vamos conferir a próxima lição.
8. Incorporando SVG em documentos HTML: Na verdade, existem várias maneiras de incorporar SVG ao arquivo HTML. Será zunindo um que nos permite usar animação CSS muito facilmente. Temos índice, e temos emptystyles.css. Para anexar stylesheet ao nosso documento HTML, precisamos adicionar tag link. Como você pode ver, estamos fazendo referência ao diretório onde nossos estilos estão. Nossos estilos estão na pasta CSS. Então, é por isso que temos esse caminho. Claro, temos que salvá-lo. Se atualizarmos a página nada acontece porque o documento HTML está em branco. Vamos copiar todo o conteúdo e colá-lo entre o corpo do texto. Podemos remover as duas primeiras linhas porque não são necessárias. Vamos atualizar a página. Como você pode ver, nosso arquivo SVG está incorporado no documento. Se você quiser alterar o tamanho do mesmo, você pode adicionar a classe, podemos remover ID, e em vez de olhar para a classe, por exemplo, copiar colar. Então, agora, somos capazes de adicionar nova classe à nossa folha de estilo CSS. Lembre-se, como devemos construir esse tipo de seletor. Bem, a aula começa sempre com um ponto e depois com o nome, “Cara Feliz”. Como você pode ver editor codificado que o seu já nos dá algumas dicas sobre o link. Está bem. Então, vamos definir a altura. Por exemplo, queremos tê-lo como 500 pixels. Vamos atualizar a página. Como você pode ver, o tamanho do arquivo SVG foi alterado.
9. Animações CSS: Vamos nos concentrar agora em CSS Animation. Embora seja um tópico bastante complexo, usaremos apenas uma parte dele. Se você quiser saber mais, há toneladas de diferentes classes e cursos. Vou mostrar-lhe as coisas mais úteis em relação às animações CSS. Então, definimos CSS Animação em nosso arquivo styles.css nesta folha de estilo. Então, criamos animação CSS usando palavra-chave que é quadros-chave. Os quadros-chave são seguidos pelo nome simples. Por exemplo, vamos adicionar salto. Cada animação consiste em pontos de interrupção. Significa que definimos o progresso da animação por porcentagens. Nós temos zero, nós temos, por exemplo, a meia animação antiga, e o que está acontecendo lá fora, e o último ponto. Claro, você pode definir números diferentes dependendo do que você deseja alcançar. Porque é animação de salto, gostaríamos que nossa cara feliz estivesse pulando. Saltando está se movendo para cima e para baixo. Então vamos aprender sobre transformar. Transform é uma propriedade CSS, e como você pode ver como Atom está nos dando uma dica, existem diferentes opções que você pode implementar para seus gráficos, como girar, como escala. Você também pode usar traduzir em diferentes eixos. Nós temos X, Y, e Z. Se você gostaria de mover algo para a direita e para a esquerda, vamos usar traduzir X. Se você gostaria de saltar algo para cima e para baixo, nós usaríamos traduzir Y. Digamos que gostaríamos para ter o nosso rosto feliz saltando por 50 pixels. Podemos, por agora, nos livrar de pontos de interrupção vazios. A animação é criada, então vamos dar uma olhada em nosso HTML índice. Nós temos nosso arquivo SVG que está aqui, e nós temos classe cara feliz. Queremos adicionar a esta classe a animação. Então, vamos voltar aos estilos. Então temos nossa animação já criada, mas ainda não foi executada, nada acontece, vamos verificar. A cara feliz, não está se mexendo. Temos que adicionar a animação ao nosso seletor. Então, como mencionado, já temos a classe criada. Lembre-se que a classe começa com um ponto em um arquivo CSS. Aqui temos o nosso nome. Então, como executamos a animação? Temos que adicionar a propriedade CSS que é o nome da animação. Nosso nome de animação é “Bounce”. Mais tarde, temos que definir a duração da animação. Vamos ter um segundo. Claro, você pode criar outros tempos como
cinco e meio segundo como o que seria de 500 milissegundos, mas nossa animação terá uma duração de um segundo. A última coisa importante é a contagem de iteração de animação. Então quantas vezes a animação será repetida. Para nós, gostaríamos de ter infinito. Nosso rosto está pulando, e vamos verificar com ferramentas de desenvolvimento. Então, este é o nosso elemento que tem rosto feliz, e este elemento tem animação para encontrar. Se desmarcá-la, a animação será executada. Isso significa que esta linha de código é comentada. Então, navegador web que irá lê-lo. Claro, podemos criar animações mais complexas. Vamos criar outro ponto de interrupção. Nós também podemos usar transformar, e podemos escalar o elemento. Um representa 100 por cento. Então, o elemento permanece o mesmo. Se quisermos que seja grande em 50 por cento, temos que adicionar 5. Significa 150 por cento. Também podemos girar o elemento em 10 graus. Lembre-se que definimos a rotação por graus. Está bem. Vamos salvar. Lembre-se sobre como salvar, e vamos atualizar nosso índice HTML. Uau! Esta animação é abundante, mas você pode experimentar com ela.
10. Animando partes selecionadas de gráficos SVG: Na lição anterior, estávamos animando todo o elemento SVG. Como você pode ver, a classe é adicionada à tag SVG. Então, toda a cara feliz estava pulando. Que tal animar uma parte em particular? Vamos dar uma olhada. Os resultados finais que gostaríamos de alcançar são as partes do olho em movimento. Como você pode ver, a parte branca é estável, e apenas o centro do olho está se movendo. Então, vamos começar pelo começo. No pacote que estou compartilhando com você, há pasta de exercícios de olho. Você pode soltá-lo no átomo, e ele abrirá. Temos índice e estilos CSS. No índice, como você já vê, há código SVG. Então, o olho deve ser gerado. Vamos abri-lo. O olho está estável, não está se movendo. Então, precisamos adicionar animação CSS nesta folha de estilo. Nossa folha de estilo já tem alguns estilos básicos que adiciona cor rosa em nosso fundo, e definir o tamanho para o olho. Então você pode adicionar seus estilos abaixo da linha 20. Ok. Gostaríamos de ter esta parte em movimento. Então vamos usar inspecionar. Como você pode ver, este g significa grupo. Este é o elemento de grupo. Ele já tem seu ID, mas talvez possamos adicionar classe. Vamos encontrá-lo no HTML. Este é o grupo. Estou comentando : “Esta é a parte que vai ser animada.” Podemos adicionar “Centro”, para adicionar a classe “Centro de olho”, e devemos adicionar esta classe para CSS. Mas o que teria que fazer agora, é diferenciar a animação. Se você se lembra, o olho estava se movendo um pouco para a esquerda, um pouco para a direita, para o fundo, e estava ficando maior. Então, vamos tentar neste tipo de movimento. Vamos criar animação, lembre-se que começa com quadros-chave, MoveEye. Lembre-se que se você gostaria de ter mais de uma palavra, a melhor jogada é usar caixa de camelo. Ok. Então, digamos que 20% gostariam de traduzir, no eixo x para a esquerda, então menos 50 pixels, e em 40% gostariam de descer. Então transforme. Translatey menos 30 pixels. Eu só estou supondo que os números por agora, ele vai verificar em breve. Eu gostaria de dimensioná-lo também, em 20%, digamos. Estamos economizando e revigorando. Como você pode ver, nada está acontecendo. A razão é que, é que devemos executar as animações. Então devemos adicionar isso ao nosso centro de olhos. Nome da animação, MoveEye, animação-duração de um segundo e animação-iteration-count infinito. Salve e atualize a página. Como você pode ver, a animação é muito rápida, e o número de pixels deve ser alterado também. Talvez possamos mudar isso para 20%, e para 10, e mudar a duração da animação para três segundos. Isto está muito melhor agora. Também podemos sintonizar isso um pouco. Então a escala seria de 15%, e a duração será de quatro segundos, eu também mudarei esse ponto de interrupção para 60%. Vamos ver. Estamos chegando mais perto. É bem parecido, certo? Também podemos fazer este círculo desaparecer. Vamos descobrir. Bem, enquanto está se movendo, é muito difícil obtê-lo, então vamos comentar a animação por um segundo. Vamos encontrar, já o temos, quase lá. Então este círculo define este círculo branco no olho, este aqui. Também podemos adicionar o 'Plus outro” chegando ao índice HTML, e adicionar classe. Aqui já está a aula STO. Ou podemos adicionar outro após o espaço. Então, digamos, você pode encontrar uma solução para este desafio no pacote, resultados oculares.
11. Codepen - ferramenta útil: O que eu gostaria de mencionar é a plataforma Codepen. Se você não gosta de trabalhar em arquivos HTML usando o Editor de código, você pode usar o Codepen. É uma plataforma onde as pessoas criam trechos curtos. Só vamos dar uma olhada. Nós clicamos em nova caneta e temos janela HTML, CSS e JS. Então, vamos trabalhar no exemplo. Você pode tomar o arquivo SVG escolhido e abri-lo em átomo. Copiamos todo o código SVG e colamos em HTML. Como você pode ver, o SVG é gerado. Podemos adicionar a classe, tipo de rosto. Você cria uma classe na janela CSS. Como você pode ver, tudo está sendo atualizado. Então, é muito fácil de trabalhar. Claro, podemos criar animação aqui. Definindo o ponto de interrupção, a opacidade mudaria para zero, e é claro que precisamos aplicar a animação, e a animação funciona. Você pode salvar o código clicando em Salvar, e você tem o URL, que você pode compartilhar comigo no projeto da classe. Desejo-lhe o melhor e a manter os dedos cruzados para os seus projectos. Deixe-me saber como é o seu trabalho com animações SVG e CSS. Boa sorte!
12. Projetos do curso: Para o projeto de classe, todos são encorajados a selecionar um gráfico vetorial no formato SVG e criar sua própria animação. Os arquivos SVG estão disponíveis no pacote. Os designers também são bem-vindos para usar suas próprias obras de arte SVG. Faça o download dos arquivos do curso na guia Seu projeto. É colocado do lado direito. Aplique sua própria animação CSS ao arquivo SVG escolhido. Você decide o que será animado. Mostre-nos seu trabalho compartilhando trechos de código, captura ou vídeos, ou você pode enviar um link para a Codepen que você criou. Sinta-se à vontade para fazer qualquer pergunta na seção da comunidade. Boa sorte. Que animações CSS e SVG estejam com você.
