Как я могу искать в определенное время и затем запустить анимацию? (Перейти и играть) - PullRequest
Новая
       22

Как я могу искать в определенное время и затем запустить анимацию? (Перейти и играть)

0 голосов
/ 21 января 2019

Можно ли перейти к определенному времени и начать воспроизведение анимации после нажатия на текст? 

<!-- All working as expected -->

<h1 on="tap:anim1.restart;">Restart</h1>
<h1 on="tap:anim1.pause;">Pause</h1>
<h1 on="tap:anim1.start;">Start</h1>
<h1 on="tap:anim1.seekTo(time=3000);">Seek 3s</h1>
  

<!-- NOT working ... -->

<h1 on="tap:anim1.start(time=3000);">Start from xx</h1>
<h1 on="tap:anim1.seekTo(time=3000),anim1.start;">Start from xx</h1>

1 Ответ

0 голосов
/ 31 января 2019

Сразу после перезагрузки страницы ваш код 

on="tap:anim1.seekTo(time=3000),anim1.start;"

отлично работает. В противном случае мне нужно добавить перезагрузку 

on="tap:anim1.restart,anim1.seekTo(time=5000),anim1.start;"

Я думаю, что это ошибка, но, по крайней мере, у вас есть обходной путь. Попробуйте запустить приведенный ниже код на полной странице. 

<!doctype html>

<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Hello World</title>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
    h1 {
        transform-origin: left;
    }
  </style>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
    <amp-animation id="anim1" layout="nodisplay">
    <script type="application/json">
    {
        "duration": "10s",
        "animations": [{
            "selector": "#title", 
            "keyframes": [
                {"transform": "scale(1)", "opacity": 0},
                {"transform": "scale(2)", "opacity": 1}
            ] 
        }]
    }
    </script>
    </amp-animation>

    <h1 style="font-family: courier;" id=title>0123456789ABCDEF</h1>
    <h1 style="font-family: courier">0123456789ABCDEF</h1>

    <!-- All working as expected -->

    <span tabindex=0 role="button" on="tap:anim1.restart;">Restart</span> |
    <span tabindex=0 role="button" on="tap:anim1.pause;">Pause</span> |
    <span tabindex=0 role="button" on="tap:anim1.start;">Start</span> |
    <span tabindex=0 role="button" on="tap:anim1.seekTo(time=3000);">Seek 3s</span> 

    <!-- NOT working ... -->
    <br/><span tabindex=0 role="button" on="tap:anim1.seekTo(time=5000),anim1.start;">Seek=5s, start (works only a fresh page reload)</span> 
    <br/><span tabindex=0 role="button" on="tap:anim1.restart,anim1.seekTo(time=5000),anim1.start;">Restart, seek=5s, start</span> 
</body>
</html>
...