4

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

首先，我使用 Polymer 来构建尽可能多的项目。我想实现这个视频中显示的动画。动画应该在元素网格上运行，单击时这些元素会展开以填满屏幕。以下视频最好地展示了这种效果。

我一直在尝试使用霓虹动画元素做一些事情，但还没有找到一种轻松做到这一点的方法。

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

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

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

4

1 回答 1

0

对于曲线运动，您可以使用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>
于 2016-10-04T13:00:19.723 回答