當你不知道內容的大小時，你如何在原生反應中設置動畫高度？

在react-native中，當您不知道它的內容大小時，如何爲視圖的大小設置動畫效果？當你不知道內容的大小時，你如何在原生反應中設置動畫高度？

假設視圖的內容高度可以在0-400pts之間的任何位置，並且內容可以動態增長和縮小，並且您想要動畫對高度進行任何更改。

基本上，我正在尋找LayoutAnimation 的行爲，但不使用LayoutAnimation，但使用動畫。

我想我躲過的是我不知道如何向目標高度動畫，因爲我不知道內容的高度。

來源

2017-08-11 Poyan

你將不得不添加一些尺寸縮放，可能與百分比的最佳效果。

首先您需要使用Animated.View而不是View。

接下來，您需要對視圖的樣式應用轉換，讓它看起來像下面。這是更新和更改並創建動作的部分。

 <Animated.View style={[ styles.someStyleYouMade, 
      { 
      transform: [ 
       // scaleX, scaleY, scale, theres plenty more options you can find online for this. 
       { scaleX: ViewScaleValue } // this would be the result of the animation code below and is just a number. 
      ] 
      } 
     ]} 
     >

這接下來的部分基本上是一個動畫API例子，你會寫這樣的事情（習慣你怎麼想），當該腳本調用它會在您指定的任何方式的動畫。

Animated.timing(     // Animate over time 
    this.state.ViewScale,    // The animated value to drive, this would be a new Animated.Value(0) object. 
    { 
     toValue: 100,     // Animate the value 
     duration: 5000,     // Make it take a while 
    } 
).start();

最後，您可能需要對該值應用插值以使其看起來儘可能自定義。

（這將進入你的render()功能，但在此之前的return()，該ViewScaleValue將進入Animated.View變換）

const ViewScaleValue = this.state.ViewScale.interpolate({ 
    inputRange: [0, 25, 50, 75, 100], 
    outputRange: [0, .5, 0.75, 0.9, 1] 
});

所有這些代碼將使ViewScaleValue，一個簡單的數字，從0到100動畫，快速然後減慢（由於插值）並將動畫的每次迭代應用於變換。

閱讀動畫API以獲得更好的把握。

來源

2017-08-11 12:05:39

當你不知道內容的大小時，你如何在原生反應中設置動畫高度？

回答

相關問題