#react-native #animation #layout-animation
Вопрос:
У меня есть представление с преобразованием и абсолютной позицией, и я хочу установить положение представления для его преобразования, а затем активировать LayoutAnimation.
это означает, что я хотел бы установить положение вида на X, и после того, как положение будет установлено, настройте LayoutAnimation и установите его положение на Y.
class someComponent extends React.Component { state: { transform: 100, top: 0 } someFunction = () =gt; { this.setState({ top: this.state.transform, transform: 0 }); LayoutAnimation.configureNext( someAnimationConfig ); this.setState({ top: 500 }); } render = () =gt; { return( lt;View style={ someStyles, { transform: [ { translateY: this.state.transform } ], top: this.state.top } }gt; lt;/Viewgt; ) } }
требуемое поведение при вызове someFunc
заключается в том, чтобы представление установило свою позицию в соответствии с преобразованием и сбросило преобразование (что является чисто техническим и не имеет визуального эффекта), а затем запустило анимацию
причина, по которой я подозреваю, что этого не происходит, заключается в том, что анимация запускается только при рендеринге, и поскольку я меняю состояние дважды подряд, оба изменения происходят до render
вызова, а позиция обновляется только один раз.
другой способ решить мою проблему-оставить преобразование и переместить экран (wantedPosition - currentTransform)
, но это кажется уродливым , и я блуждал, есть ли более чистый и элегантный способ справиться с этой ситуацией
Я делаю все это для того, чтобы внедрить представление с возможностью прокрутки, и я бы предпочел использовать его без дополнительных библиотек или зависимостей
некоторые сотрудники, которых я пробовал
- calling the second set state and animation config in the callback of the first setState, same behavior
- добавление двух объектов LAYOUTANIMATIOM, установка первой анимации «мгновенной» (задержка 0) и вызов ее после первого заданного состояния, а также вызов второй со вторым заданным состоянием в
didAnimationFinish
обратном вызове. этот был близок к работе, но проблема заключалась в том, что первая анимация не была мгновенной, вы не можете установить задержку 0, а при установке задержки 1 вы можете видеть представление с позицией 0 и преобразованием 0 для одного кадра, и после завершения первой анимации возникает небольшая задержка перед запуском второй анимации. хотя я верю, что есть способ избавиться от небольшой задержки перед второй анимацией, у вас все равно будет один «прослушиваемый» кадр