O SVG tem uma boa interatividade do usuário, como:
1. O SVG pode responder à maioria dos eventos DOM2.
2. O SVG pode capturar bem o movimento do mouse do usuário através do cursor.
3. Os usuários podem obter facilmente a escala e outros efeitos, definindo o valor da propriedade ZoomandPan do elemento SVG.
4. Os usuários podem combinar facilmente animações e eventos para concluir alguns efeitos complexos.
Ao anexar eventos aos elementos SVG, podemos concluir facilmente algumas tarefas interativas usando a linguagem de script. O SVG suporta a maioria dos eventos DOM2, como Onfocusin, Onfocusou, OnClick, Onmousedown, OnMouseUp, OnMouseMove, OnMouseOut, Onload, OnResize, OnScroll e outros eventos. Além disso, o SVG também fornece eventos exclusivos relacionados à animação, como: Onroom, Onbegin, Onend, OnRepeat, etc.
Todo mundo está familiarizado com o incidente, então não vou falar sobre isso.
Como fazer animaçãoO SVG usa o texto para definir gráficos, e essa estrutura de documentos é muito adequada para criar animações. Para alterar a posição, tamanho e cor da figura, você só precisa ajustar as propriedades correspondentes. De fato, a SVG possui propriedades especialmente projetadas para vários eventos de processamento de eventos, e muitos deles são feitos sob medida para animações. No SVG, existem várias maneiras de implementar a animação:
1. Use os elementos de animação do SVG. Isso será destacado abaixo.
2. Use o script. O uso de operações DOM para iniciar e controlar as animações já é uma tecnologia madura, e há um pequeno exemplo abaixo.
3. Smil (linguagem de integração multimídia sincronizada). Se você estiver interessado, consulte: http://www.w3.org/tr/2008/rec-smil3-20081201/.
Os exemplos a seguir incluem várias das animações mais básicas do SVG :<svgviewbox = "0 0 800 300"
xmlns = "http://www.w3.org/2000/svg" versão "1.1">
<cred> Elementos básicos de animação </cc>
<ret X = "1" y = "1"
preench = "nenhum" stroke = "azul" stroke-width = "2" />
<!-Animação da posição e tamanho do retângulo->
<Rect id = "RectElement" x = "300" y = "100"
FILL = "RGB (255,255,0)">
<Animate attributename = "x" atributeType = "xml"
Begin = "0s" dur = "9s" preench = "congelamento" de = "300" para = "0" />
<Animate attributename = "y" atributeType = "xml"
Begin = "0s" dur = "9s" preench = "congelamento" de = "100" a = "0" />
<Animate attributeName = "width" atributeType = "xml"
BEGIN = "0S" dur = "9s" preench = "congelamento" de = "300" para = "800" />
<Animate Attributename = "Height" atributeType = "XML"
Begin = "0s" dur = "9s" preench = "congelamento" de = "100" a = "300" />
</ct>
<!-Crie um novo espaço de coordenada do usuário, então o texto começa com um novo (0,0), e as transformações subsequentes são para o novo sistema de coordenadas->
<g transform = "tradução (100.100)">
<!- os seguintes usos definidos para animar a visibilidade e depois usa animatemotion,
Animate e AnimateTransform executam outros tipos de animações ->
<text id = "textElement" x = "0" y = "0"
font-family = "verdana" font-size = "35.27" visibilidade = "Hidden">
Está vivo!
<set attributename = "visibilidade" atributeType = "css" para = "visível"
Begin = "3s" dur = "6s" preench = "congelamento" />
<Animatemotion Path = "M 0 0 L 100 100"
Begin = "3s" dur = "6s" preench = "congelamento" />
<Animate attributename = "preench" atributeType = "css"
de = "rgb (0,0,255)" para = "rgb (128,0,0)"
Begin = "3s" dur = "6s" preench = "congelamento" />
<animateTransform atributeName = "Transform" attributeType = "xml"
type = "girate" de = "-30" para = "0"
Begin = "3s" dur = "6s" preench = "congelamento" />
<animateTransform atributeName = "Transform" attributeType = "xml"
type = "escala" de = "1" a = "3" adicional = "soma"
Begin = "3s" dur = "6s" preench = "congelamento" />
</sext>
</g>
</svg>
Coloque esse código no corpo do documento HTML e execute -o para saber o efeito da animação.
Propriedades públicas dos elementos de animação Categoria 1: Especifique elementos e atributos de destinoXlink: Href
Isso deve ser muito familiar, apontando para os elementos que executam a animação. Esse elemento deve ser definido no fragmento atual do documento SVG. Se esse atributo não for especificado, a animação será aplicada ao seu elemento pai.
AttributeName = <TributeName>
Esta propriedade especifica as propriedades para aplicar a animação. Se essa propriedade tiver um espaço para nome (não se esqueça, o SVG é essencialmente um documento XML), esse espaço para nome também deve ser adicionado. Por exemplo, no exemplo a seguir, o XLink recebe um alias diferentes. Aqui, quando Animate especifica o atributo, o namespace está incluído:
<svg versão = "1.1" xmlns = "http://www.w3.org/2000/svg"
xmlns: xlink = "http://www.w3.org/1999/xlink">
<title> Demonstração da resolução de espaços de nome para animação </ititle>
<g xmlns: a = "http://www.w3.org/1999/xlink">
<Animate attributeName = "A: href" xlink: href = "#foo" dur = "2s" para = "dois.png" preench = "congelamento"/>
</g>
<g xmlns: b = "http://www.w3.org/1999/xlink" xmlns: xlink = "http://example.net/bar">
<imagem xml: id = "foo" b: href = "one.png" x = "35" y = "50"/>
</g>
</svg>
atributeType = css | Xml | Auto (valor padrão)
Esta propriedade especifica o espaço de nome onde os valores da propriedade são adotados. Os significados desses valores são os seguintes:
CSS: O atributo especificado em nome do atribuições é o atributo CSS.
XML: o atributo especificado pelo atribuiName é o atributo no espaço nomes padrão do XML (observe que o documento SVG é essencialmente um documento XML).
AUTO: Significa primeiro procurar o atributo especificado pelo atributoName no atributo CSS. Se não for encontrado, procurará o atributo no espaço de nome XML padrão.
Categoria 2: Controle os atributos do tempo de animaçãoAs propriedades a seguir são atributos do tempo de animação; Eles controlam a linha do tempo da execução da animação, incluindo como iniciar e terminar a animação, se a animação é executada repetidamente, seja a animação, etc.
BEGIN = BEGN-VALUE-LIST
Esta propriedade define o tempo de início da animação. Pode ser uma série de valores de tempo separados por semicolons. Também pode ser algum outro valor que desencadeia o início da animação. Por exemplo, eventos, teclas de atalho, etc.
dur = relógio-valor | mídia | indeterminado
Define a duração da animação. Pode ser definido como um valor exibido no formato do relógio. Também pode ser definido como os dois valores a seguir:
Mídia: especifica que o tempo da animação é a duração do elemento multimídia interno.
indefinido: especifique o tempo de animação para ser infinito.
O formato do relógio refere -se aos seguintes formatos de valor legal:
: 30: 03 = 2 horas, 30 minutos e 3 segundos
: 00: 10,25 = 50 horas, 10 segundos e 250 milhões de segundos
: 33 = 2 minutos e 33 segundos
: 10,5 = 10,5 segundos = 10 segundos e 500 milhões de segundos
.2h = 3,2 horas = 3 horas e 12 minutos
min = 45 minutos
s = 30 segundos
ms = 5 milhões de segundos
.467 = 12 segundos e 467 milhões
.5s = 500 milhões de segundos
: 00.005 = 5 milhões de segundos
END = Lista de valor final
Define o tempo final da animação. Pode ser uma série de valores separados por semicolons.
min = valor do relógio | mídia
max = valor do relógio | mídia
Define o valor máximo e mínimo da duração da animação.
reiniciar = sempre | Quando não nunca
Configure a animação para começar a qualquer momento. Sempre significa que a animação pode começar a qualquer momento. Quando Notactive significa que você só pode começar de novo quando não há reprodução, como a reprodução anterior termina. nunca significa que a animação não pode ser iniciada novamente.
Repépito = Valor numérico | indeterminado
Defina o número de vezes que a animação é repetida. Indefinido significa Repetição Infinita.
repetição = valor do relógio | indeterminado
Define o tempo total de animação de repetido. Indefinido significa Repetição Infinita.
preenchimento = congelamento | Remover (padrão)
Define o estado do elemento após o término da animação. Freeze significa que o elemento permanece no último estado da animação após o término da animação. Remover significa que o elemento retorna ao estado antes da animação após o final da animação, que é o valor padrão.
Categoria 3: Defina os atributos dos valores de animação
Essas propriedades definem o valor das propriedades que são executadas. De fato, alguns algoritmos que definem quadros -chave e interpolação.
calcmode = discreto | Linear (padrão) | ritd | spline
Defina o método de interpolação de animação: discreto: discreto, sem interpolação; Linear: interpolação linear; Pacado: interpolação do tamanho da etapa; Spline: interpolação de spline. O padrão é linear (interpolação linear), mas se o atributo não suportar interpolação linear, será usada a interpolação discreta.
valores = <lista>
Define uma lista de valores para os quadros -chave de animação separados por semicolons. Valor do vetor de suporte.
KeyTimes = <List>
Define uma lista de horários dos quadros -chave de animação separados por semicolons. Isso corresponde aos valores um por um. Este valor é afetado pelo algoritmo de interpolação. Se for linear e a interpolação de spline, o primeiro valor das vezes deve ser 0 e o último valor deve ser 1. Para não interpolação discreta, o primeiro valor das vezes deve ser 0. Para interpolação do tamanho da etapa, é óbvio que as vezes não são necessárias. E se a duração da animação estiver definida como indefinida, as vezes serão ignoradas.
Keysplines = <List>
Essa propriedade define o ponto de controle quando a interpolação do spline (interpolação de Betzel) e obviamente só funciona se o modo de interpolação for selecionado como spline. Os valores nesta lista variam de 0 a 1.
de = <Value>
para = <Value>
por = <Value>
Define os valores de início, final e etapa do atributo de animação. Nota aqui: se os valores já tiverem formulado os valores relevantes, qualquer um de/para/por valor será ignorado.
Categoria 4: Controlando se a animação é um atributo incrementalÀs vezes, é muito útil definir o valor relevante em vez do valor absoluto, mas o valor incremental, o uso da propriedade aditiva pode atingir essa meta.
aditivo = substituir (valor padrão) | soma
Essa propriedade controla se a animação é incremental. A soma significa que a animação terá um valor de atributo relacionado maior ou outras animações de baixa prioridade. Substitua é o valor padrão, indicando que a animação substituirá o valor do atributo relevante ou outras animações de baixa prioridade. Veja um pequeno exemplo:
<Rect ...>
<Animate Attributename = "Width" de = "0px" para = "10px" dur = "10s"
aditivo = "soma"/>
</ct>
Este exemplo demonstra o efeito de animação de incrementar a largura do retângulo.
Às vezes, também é muito útil se os resultados repetidos da animação forem sobrepostos e o uso da propriedade Accumulate pode atingir esse objetivo.
acumulado = nenhum (padrão) | soma
Essa propriedade controla se o efeito da animação é cumulativo. Nenhum é o valor padrão, indicando que as animações duplicadas não se acumulam. A soma significa que os efeitos repetidos de animação são acumulados. Para uma animação única, esta propriedade não tem significado. Veja um pequeno exemplo:
<Rect ...>
<Animate Attributename = "Width" de = "0px" para = "10px" dur = "10s"
adicional = "soma" acumulação = "soma" repentCount = "5"/>
</ct>
Este exemplo demonstra que o comprimento do retângulo aumenta em cada iteração.
Resumo dos elementos de animaçãoO SVG fornece os seguintes elementos de animação:
1. Elemento AnimadoEste é o elemento de animação mais básico, que pode fornecer diretamente os valores de diferentes pontos de tempo para atributos relacionados.
2. Definir elementoEsta é a abreviação do elemento animado e suporta todos os tipos de atributos, especialmente quando atributos animados (como visibilidade). O elemento definido é não incremental e os atributos relevantes são inválidos. O tipo de valor final de animação especificado deve estar em conformidade com o tipo de valor do atributo.
3. Elemento AnimatemotionElementos de animação Lu Jin. A maioria das propriedades desse elemento é a mesma que acima, com apenas as seguintes diferenças ligeiramente diferentes:
calcmode = discreto | Linear | ritd | spline
O valor padrão dessa propriedade é diferente e o valor padrão nesse elemento é ritmo.
Path = <Path-Data>
O caminho do elemento de animação que se move é o mesmo que o formato do valor do atributo D do elemento do caminho.
Teclados = <Lista de Númbulos>
O valor dessa propriedade é uma série de valores de ponto flutuante fornecidos pelos semicolons, e o intervalo de valor de cada valor é 0 ~ 1. Esses valores representam a distância na qual o ponto de tempo correspondente é movido especificado pelo atributo KeyTimes. A distância específica aqui é determinada pelo próprio navegador.
girar = <número> | Auto | reverso automático
Esta propriedade especifica o ângulo no qual o elemento gira quando se move. O valor padrão é 0, o número representa o ângulo de rotação e o automóvel representa o corpo animal girando na direção da força rodoviária. Auto-reversa indica a direção em que a direção é oposta à direção do movimento.
Além disso, os valores do elemento animatemotion de, por, para, valores são compostos de pares de coordenadas; O valor x e o valor Y são separados por vírgulas ou espaços, e cada par de coordenadas é separado por um ponto de vírgula, como de = 33, 15, o que significa que a coordenada do ponto de partida X é 33 e a coordenada y é 15.
Existem duas maneiras de especificar um caminho de movimento: um é atribuir diretamente um valor ao atributo de caminho, e o outro é especificar um caminho para usar o elemento MPath como um elemento filho do animatemoTionde. Se você usar os dois métodos, o elemento MPath tem uma alta prioridade. Ambos os métodos têm maior prioridade que os valores, de, por, para.
Veja um pequeno exemplo:
<? xml versão = "1.0" Standalone = "Não"?>
<! Doctype svg public "-// w3c // dtd svg 1.1 // pt"
"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">
<svgviewbox = "0 0 500 300"
xmlns = "http://www.w3.org/2000/svg" versão "1.1"
xmlns: xlink = "http://www.w3.org/1999/xlink">
<ret X = "1" y = "1"
preench = "nenhum" stroke = "azul" stroke-width = "2" />
<caminho id = "path1" d = "m100,250 c 100,50 400,50 400.250"
FILL = "NENHUM" ASSTONHO = "AZUL" Width = "7.06"/>
<círculo cx = "100" cy = "250" r = "17,64" preench = "azul"/>
<círculo cx = "250" cy = "100" r = "17,64" preench = "azul"/>
<círculo cx = "400" cy = "250" r = "17,64" preench = "azul"/>
<caminho d = "m-25, -12,5 l25, -12,5 l 0, -87,5 z"
FILL = "AMELO" ASSUSTO = "RED" Width = "7.06">
)
<mpath xlink: href = "#path1"/>
</animatemotion>
</path>
</svg>
4. Elemento AnimateColorElementos de animação coloridos. Este é um elemento desatualizado, e basicamente todas as funções podem ser substituídas por Animate, portanto, não o use.
5. Elemento AnimateTransformTransforme elementos de animação. Dê uma olhada em algumas propriedades especiais:
tipo = tradução | escala | girar | skewx | Skewy
Esta propriedade especifica o tipo de transformação e a tradução é o valor padrão.
Os valores de, por e correspondem aos parâmetros da transformação, que é consistente com a transformação mencionada acima. Os valores são um conjunto de valores separados por semicolon.
Elementos e propriedades que suportam efeitos de animação
Basicamente, todos os elementos gráficos (Path, Rect, Ellipse, Text, Image ...) e elementos de contêiner (SVG, G, Defs, Use, Switch, Clippath, Mask ...) suportam animação. Basicamente, a maioria das propriedades suporta efeitos de animação. Para instruções detalhadas, consulte a documentação oficial.
Implementar animação usando DOMA animação SVG também pode ser concluída usando scripts. O conteúdo detalhado do DOM será introduzido posteriormente. Aqui está um breve exemplo:
<? xml versão = "1.0" Standalone = "Não"?>
<! Doctype svg public "-// w3c // dtd svg 1.1 // pt"
"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">
<SVG ViewBox = "0 0 400 200"
xmlns = "http://www.w3.org/2000/svg"
onLload = "startanimation (EVT)" versão = "1.1">
<script type = "Application/Ecmascript"> <! [CDATA [
var timeValue = 0;
var timer_increment = 50;
var max_time = 5000;
var text_element;
função startanimation (EVT) {
text_element = evt.target.ownerdocument.getElementById ("textElement");
ShowandGrowElement ();
}
Função ShowandGrowElement () {
timeValue = timeValue + timer_increntry;
if (timevalue> max_time)
retornar;
// escala a sequência de texto gradualmente até que seja 20 vezes maior
ScaleFactor = (TimeValue * 20.) / max_time;
text_element.setAttribute ("Transform", "Scale (" + ScaleFactor + ")");
// Torne a corda mais opaca
opacityFactor = timeValue/max_time;
text_element.setAttribute ("opacidade", opacityFactor);
// Ligue para o ShowandGrowElement novamente <Timer_increment> Milhões de segundos posteriormente.
Settimeout ("ShowandGrowElement ()", Timer_increment)
}
window.showandgrowElement = ShowandGrowElement
]]> </script>
<ret X = "1" y = "1"
FILL = "NENHUM" ASSTONHO = "AZUL" Width = "2"/>
<g transform = "tradutor (50.150)" preench = "vermelho" font-size = "7">>
<text id = "textElement"> svg </sext>
</g>
</svg>
Referência prática:Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Centro de Desenvolvimento: https://developer.mozilla.org/en/svg
Referência popular: http://www.chinasvg.com/
Documento oficial: http://www.w3.org/tr/svg11/
Tecnologia de animação SVG: http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx