聚合物纸波纹在给定的x，y坐标下以编程方式触发向下动作

Question

I am trying to trigger a ripple animation programatically at a given x,y coordinate, but I can't seem to get it right. 我试图以给定的x，y坐标以编程方式触发涟漪动画，但似乎无法正确执行。

I have found a few helpful answers like these: 我发现了一些有用的答案，例如：

I didn't find a way to apply the first two since at this stage I'm simply using a paper-ripple element without creating a custom element. 我没有找到应用前两个方法的方法，因为在此阶段，我只是使用纸纹元素而不创建自定义元素。 The first answer is somewhat helpful, but I'd like to control the x,y coordinates of the ripple. 第一个答案有些帮助，但我想控制波纹的x，y坐标。

Here's how I tried to do this, using Jacek's snippet fro the 3rd answer: 这是我尝试使用第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>

This passing x,y properties via mouse event doesn't seem to work, although this part of the documentation suggests so: 通过鼠标事件传递x，y属性似乎不起作用，尽管文档的这一部分建议这样做：

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

Any hints on what's the recommended way to trigger a ripple programatically outside of a custom component ? 关于在自定义组件之外以编程方式触发纹波的推荐方法有何暗示？

Answer 1

I dont know the recommended way but I have simple solution. 我不知道推荐的方法，但是我有简单的解决方案。 My solution is not to pass mouse event but object with x,y. 我的解决方案不是传递鼠标事件，而是传递带有x，y的对象。 look in this example: 看这个例子：

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

I use this and dont mouseEvent 我用这个，不要mouseEvent

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

  paperRipple.upAction();

聚合物纸波纹在给定的x，y坐标下以编程方式触发向下动作

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-02-12 02:09:18

聚合物纸波纹在给定的x，y坐标下以编程方式触发向下动作

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-02-12 02:09:18

解决方案1
1 已采纳 2016-02-12 02:09:18