聚合物纸波纹以编程方式在给定的 x,y 坐标处触发 downAction答案

【问题标题】：Polymer paper-ripple programatically trigger downAction at given x,y coordinates聚合物纸波纹以编程方式在给定的 x,y 坐标处触发 downAction
【发布时间】：2016-02-11 20:12:51
【问题描述】：

我试图在给定的 x,y 坐标处以编程方式触发波纹动画，但我似乎无法正确处理。

我找到了一些有用的答案，例如：

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

这是我尝试这样做的方法，使用 Jacek 的 sn-p 来回第三个答案：

    <!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});
}

关于在自定义组件之外以编程方式触发涟漪的推荐方法是什么？

【问题讨论】：

标签： javascript polymer polymer-1.0

【解决方案1】：

我不知道推荐的方法，但我有简单的解决方案。我的解决方案不是传递鼠标事件，而是传递带有 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();

【讨论】：

谢谢 (+1)。比我尝试过的要干净得多。快速跟进：您在哪里发现了 detail ？我没有在文档中注意到这一点。
d'oh 时刻 :) 谢谢！
另外，fwiw，upAction 不接受任何参数。