聚合物彎曲運動路徑

由於我根據材質設計指南製作了一些動畫，所以在製作彎曲運動路徑時卡住了。聚合物彎曲運動路徑

首先，我正在使用Polymer來構建儘可能多的項目。我想實現一個動畫，如this video所示。動畫應該在一個元素的網格上運行，這些元素會在點擊後展開以填充屏幕。這種效果在the following video中顯示得最好。

我一直在嘗試一些霓虹燈動畫元素的東西，並沒有找到一種方法來輕鬆做到這一點。

我確實發現了關於Web動畫API以及如何使用它來實現運動路徑，但無法找到一種方法使它與Polymer構建的動畫一起工作。

另一種可能的解決方案是在用霓虹燈動畫製作的自定義動畫中設置很多關鍵點。通過在曲線上設置足夠的點，可以使曲線按需要發生。

我的問題是，單擊網格的隨機元素時，製作曲線運動路徑動畫最簡單和最好的方法是什麼？

來源

2016-06-23 Bart Koppelmans

對於彎曲運動，可以使用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-04 13:00:19 pomber

聚合物彎曲運動路徑

回答

相關問題