聚合物弯曲运动路径

Question

当我按照Material Design指南制作动画时，我在制作曲线运动路径时遇到了困难。

首先，我使用Polymer尽可能构建项目。我想要实现像这个视频中展示的动画。动画应该在一个网格元素上运行，当单击时扩展以填充屏幕。这种效果最好由下面的视频展示。

我已经尝试了一些neon-animation元素的内容，但没有找到轻松完成此操作的方法。

我确实了解到Web Animations API以及如何使用它来实现运动路径，但无法找到一种方法将其与使用Polymer构建的动画结合起来。

另一种可能的解决方案是在自定义动画中设置许多关键点，使用neon-animation构建。通过在曲线上设置足够的点，可以使曲线按预期发生。

我的问题是，制作曲线运动路径动画并单击网格的任意元素最简单和最好的方法是什么？

- Bart Koppelmans

Answer 1

对于曲线运动，您可以使用rotate和transform-origin的组合。

这将使元素以与第二个视频相同的曲线运动进行动画处理：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/neon-animation/neon-animation-behavior.html">
<link rel="import" href="../bower_components/neon-animation/web-animations.html">

<script>

  Polymer({

    is: 'rotate-animation',

    behaviors: [
      Polymer.NeonAnimationBehavior
    ],

    configure: function(config) {
      var node = config.node;

      this._effect = new KeyframeEffect(node, [
        {'transform': 'none'},
        {'transform': 'rotate(90deg)'}
      ], this.timingFromConfig(config));

      if (config.transformOrigin) {
        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
      } else {
        this.setPrefixedProperty(node, 'transformOrigin', 'center -50vw');
      }

      return this._effect;
    }

  });

</script>

- pomber