javascript - polymer 纸波纹在给定的x，y坐标下以编程方式触发向下 Action

我试图以给定的x，y坐标以编程方式触发涟漪动画，但似乎无法正确执行。

我发现了一些有用的答案，例如：

paper-ripple mouseDown event handler downAction Override
Polymer paper ripple
How to trigger Polymer paper ripple animation by API code?

我没有找到应用前两个方法的方法，因为在此阶段，我只是使用纸纹元素而不创建自定义元素。第一个答案有些帮助，但我想控制波纹的x，y坐标。

这是我尝试使用第3个答案的Jacek代码段进行操作的方法：

    <!DOCTYPE html>
    <html>
    <head>
      <base href="https://polygit.org">
      <script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel="import" href="/components/polymer/polymer.html">
      <link rel="import" href="/components/paper-ripple/paper-ripple.html">
      <style>
        .card {
          position: relative;
          display: inline-block;
          width: 300px;
          height: 240px;
          vertical-align: top;
          background-color: #fff;
          box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
        }
      </style>
    </head>
    <body>
      <template id="demo" is="dom-bind">
        <div class="card">
          <paper-ripple recenters></paper-ripple>
        </div>
      </template>
    </body>


    <script>
      var demo = document.querySelector('#demo');

      var mouseDown = new MouseEvent("mouseDown",{"clientX":30,"clientY":30,"screenX":30,"screenY":30});
      var mouseUp = new MouseEvent("mouseUp",{"clientX":30,"clientY":30,"screenX":30,"screenY":30});

      demo.addEventListener('dom-change', function() {
        setInterval(triggerRippleDown, 1000);
        setInterval(triggerRippleUp, 1200);
      });

      var triggerRippleDown = function() {
        var paperRipple = document.querySelector('paper-ripple');
        paperRipple.downAction(mouseDown);
      }
      var triggerRippleUp = function() {
        var paperRipple = document.querySelector('paper-ripple');
        paperRipple.upAction(mouseUp);
      }
    </script>
    </html>

通过鼠标事件传递x，y属性似乎不起作用，尽管文档的这一部分建议这样做：

downAction: function(e) {
  this.$.ripple.downAction({x: e.x, y: e.y});
}

关于在自定义组件之外以编程方式触发纹波的推荐方法有何暗示？

最佳答案

我不知道推荐的方法，但是我有简单的解决方案。
我的解决方案不是传递鼠标事件，而是传递带有x，y的对象。看这个例子：

   <!DOCTYPE html>
    <html>
    <head>
      <base href="https://polygit.org">
      <script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel="import" href="/components/polymer/polymer.html">
      <link rel="import" href="/components/paper-ripple/paper-ripple.html">
      <style>
        .card {
          position: relative;
          display: inline-block;
          width: 300px;
          height: 240px;
          vertical-align: top;
          background-color: #fff;
          box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
        }
      </style>
    </head>
    <body>
      <template id="demo" is="dom-bind">
        <div class="card">
          <paper-ripple recenters></paper-ripple>
        </div>
      </template>
    </body>


    <script>
      var demo = document.querySelector('#demo');



      demo.addEventListener('dom-change', function() {
        setInterval(triggerRippleDown, 1000);
        setInterval(triggerRippleUp, 1200);
      });

      var triggerRippleDown = function() {

        var paperRipple = document.querySelector('paper-ripple');


        paperRipple.downAction({detail:{x:30,y:120}});
        console.log(paperRipple.xStart);
      }


      var triggerRippleUp = function() {
        var paperRipple = document.querySelector('paper-ripple');
       paperRipple.upAction();
      }
    </script>
    </html>

我用这个，不要mouseEvent

  paperRipple.downAction({detail:{x:30,y:120}});

  paperRipple.upAction();