Question

当我根据材料设计指南制作一些动画时，我在弯曲运动路径时卡住了。

首先，我使用Polymer来尽可能多地构建项目。我想实现http://webpy.org/docs/0.3/api#web.application中显示的动画。动画应该在一个元素网格上运行，这些元素会在点击时展开以填充屏幕。 this video表明这种效果最佳。

我一直在尝试使用霓虹动画元素做一些事情，并且没有办法轻易做到这一点。

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

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

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

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>

聚合物弯曲运动路径

1 个答案: