1

Bom dia, eu gostava de obter ajuda numa situação que me deparei hoje.

Eu tenho uma animação em .svg que queria fazer algo que não estou a conseguir arranjar forma de concretizar.

Tenho vários elementos e todos eles estão feitos como polygons, têm também CSS e duração.

Agora o que eu queria era que quando a página é aberta ou é refrescada as animações estivessem sempre a correr um horário interno ou mesmo um horário real. Não tenho muitos conhecimentos de .svgs nem de php sei que nem devia usar este tipo, mas tem de ser svg porque é para um software específico e sei também que em php é possível "ler/mostar" horas.

Agora a questão é como consigo juntar os dois e dizer que por exemplo: Das ás 2h começa a animação do avião que vai andar da esquerda para a direita e vai ter duração de 60 minutos, e se eu fechar a página ou refrescar a animação em vez de iniciar de novo ou retomar, continuar a animação (esquerda e direita).

(Deixo um pequeno exemplo do código abaixo)

    <head>
        <meta charset="utf-8">
        <title>Fundo TIGER</title>
        <link rel="stylesheet" type="text/css" href="animate.css">
        <!--- FONT AWESOME --->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    </head>
    <body style="margin:0px;">
        
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="900px" height="250px">
<!------------------------------FUNDO-------------------------------->
    <g id="ventana">
        <rect x="0" y="0" fill="#3498db" width="1920" height="1080">

        </rect>

    </g>
<g id="avion" fill-opacity="0">
        <path fill="#2c3e50" d="M490,187h10l5.1,5c0,0,31.1,0,40.9,0s10.2,8,0,8s-45,0-45,0L490,187z">
            <animate attributeName="fill-opacity" attributeType="CSS" from="0" to="1" begin="5s" dur="1s" fill="freeze"/>
            <animateTransform attributeName="transform" attributeType="XML" type="translate" from="1" to="500" begin="5s" dur="35s"/>
            <animate attributeName="fill-opacity" attributeType="CSS" from="1" to="0" begin="15s" dur="1s" fill="freeze"/>
        </path>
        <polygon fill="#2c3e50"points="507.4,187 517.1,199.9 507.3,207 515,207 529.3,198.1 514.8,187">
            <animate attributeName="fill-opacity" attributeType="CSS" from="0" to="1" begin="5s" dur="1s" fill="freeze"/>
            <animateTransform attributeName="transform" attributeType="XML" type="translate" from="1" to="500" begin="5s" dur="35s"/>
            <animate attributeName="fill-opacity" attributeType="CSS" from="1" to="0" begin="15s" dur="1s" fill="freeze"/>
        </polygon>

    </g>

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .