ポリマーの湾曲したモーションパス

Question

マテリアルデザインガイドラインに従っていくつかのアニメーションを作成していたので、私は湾曲したモーションパスを作りながら立ち往生しました。

まず、私は可能な限り多くのプロジェクトを構築するためにPolymerを使用しています。 this videoのようなアニメーションを実装したいと思います。アニメーションは要素のグリッド上で実行する必要があります。要素のグリッドは、クリックすると画面を埋めるように展開されます。この効果は、the following videoによって最もよく示された。

私はネオンアニメーション要素でいくつかのことを試してきましたが、これを簡単に行う方法はありませんでした。

ウェブアニメーションAPIと、これを使用してモーションパスがどのように実装されているかを知りましたが、Polymerで構築されたアニメーションと一緒に動作させる方法が見つかりませんでした。

ネオンアニメーションで構築されたカスタムアニメーションに多くのキーポイントを設定することもできました。カーブ上に十分なポイントを設定することにより、カーブを必要に応じて発生させることができます。

私の質問は、グリッドのランダムな要素をクリックしたときに湾曲したモーションパスのアニメーションを作成する最も簡単な方法は何ですか？

Answer 1

カーブモーションの場合は、rotateとtransform-originの組み合わせを使用できます。

これは、2番目のビデオと同じ曲線運動で要素をアニメーション化します：

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