javascript - 高分子曲线运动路径

Question

当我根据 Material Design Guidelines 制作一些动画时，我在制作弯曲的运动路径时卡住了。

首先，我正在使用 Polymer 来构建尽可能多的项目。我想实现一个动画，如 this video 所示。 .动画应该在元素网格上运行，这些元素在单击时会展开以填满屏幕。 the following video 显示了这种效果。 .

我一直在尝试使用 NEON 动画元素做一些事情，但还没有找到一种轻松完成此操作的方法。

我确实了解了 Web Animations API 以及如何使用它实现运动路径，但找不到一种方法让它与使用 Polymer 构建的动画一起工作。

另一种可能的解决方案是在使用 NEON 动画构建的自定义动画中设置大量关键点。通过在曲线上设置足够多的点，可以使曲线按需要出现。

我的问题是，在单击网格的随机元素时制作弯曲运动路径动画的最简单和最佳方法是什么？

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>