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

Question

我正在尝试以编程方式在给定的 x,y 坐标处触发涟漪动画，但我似乎无法做到正确。

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

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

以下是我尝试执行此操作的方法，使用 Jacek 的第 3 个答案片段：

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

关于在自定义组件之外以编程方式触发涟漪的推荐方法的任何提示？

Answer 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();

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

Polymer paper-ripple programatically trigger downAction at given x,y coordinates

javascript

polymer

polymer-1.0