1

是否可以在点击文本后跳转到特定时间并开始播放动画？

<!-- 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>

4

1 回答 1

0

页面重新加载后，您的代码

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

工作正常。否则，我需要添加重启

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

我认为这是一个错误，但至少你有一个解决方法。尝试在整页上运行下面附加的代码。

<!doctype html>

<html ⚡&gt;
<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>

于 2019-01-31T01:34:24.340 回答