标签: react-animated

如何删除应用于 Animated.timing 函数的默认缓动 (easeInOut)？由于某种原因，设置ease: Easing.linear不会删除默认的 escapeInOut 计时。

Animated.timing(this.state.positionX, {
    toValue: 1,
    duration:1000,
    ease: Easing.linear,
    useNativeDriver: true,
}),

我尝试通过使用react-native中的布局动画来实现react-native中组件扩展到全屏，但看起来不太好。任何人都可以帮我得到它吗？

changeLayout = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({ expanded: !this.state.expanded });
}; 

我希望在单击时将组件展开到全屏，然后在单击时再次折叠它。

我目前正在尝试为滚动视图设置动画，因此它会调整到其上方手风琴的高度。我试图通过使用动画来使滚动视图偏移，但我不断收到错误 TranslateY 的键必须是数字：{“translateY”：0}。如果我将其包装在 Animated.View 中，动画将不再起作用？

  <AnimatedScrollView
      {...props}
      onScroll={Animated.event([
        { nativeEvent: { contentOffset: { y: this.state.scroll } } },
      ])}
      scrollEventThrottle={16}
      contentContainerStyle={{
        transform: [
          {
            translateY: this.state.contentOffset,
          },
        ],
      }}
    >

我对 React Native 中的动画 API 相当陌生。我浏览了很多使用动画 API 的教程，似乎每个教程中的元素都是绝对定位的，是否有必要将元素绝对定位？

我还制作了一段动画，但它看起来有问题，我认为文本输入后的视图没有绝对位置，这可能会导致问题。是否可以在保持文本输入位置绝对但其他元素使用 Flexbox 定位的同时执行我尝试的动画？

这是代码

handleFocus = () => {
console.log('starting animation');
this.setState({
  isFocused: true
});
Animated.timing(this.isFromViewFocused, {
  toValue: 1,
  duration: 300
}).start();
}

handleBlur = () => {
console.log('Blurring');
this.setState({
  isFocused: false
});
Animated.timing(this.isFromViewFocused, {
  toValue: 0,
  duration: 300
}).start();
}

render() {
const labelStyle = {
  position: this.state.isFocused === true ? 'absolute' : 'relative',
  alignItems: 'center',
  width: this.isFromViewFocused.interpolate({
    inputRange: [0, 1],
    outputRange: [DEVICE_WIDTH * 0.45, DEVICE_WIDTH]
  }),
  left: this.isFromViewFocused.interpolate({
    inputRange: [0, …

我试图Animate.css在 React 中实现，在我的研究中，我发现这个包react-animated-css似乎很简单，但我无法让它工作。

在文档中（如果可以将其称为文档），据说用户应该Animate.css在 HTML 页面中包含 ，我没有这样做，因为我正在使用 React 并且没有 HTML 页面，但是我安装了animate.css 通过 npm。

下面是我的代码示例：

import {Animated} from 'react-animated-css'

class ComponentTest extends Component {

  render () {

   return (
    <div>
      <Animated 
         animationIn="fadeInDown" 
         animationOut="zoomOut" 
         animationInDuration={1000} 
         animationOutDuration={1000} 
         isVisible={true}
      >
          <h1 style={{backgroundColor: 'red'}}>TESTE 1</h1>
      </Animated>
    </div>
   )
 }
}

我也尝试isVisible使用状态动态设置，但没有任何成功：

import {Animated} from 'react-animated-css'

class ComponentTest extends Component {

  state = {animacao: false}

  toggleAnimation = () => {

     let animacao = !this.state.animacao
     this.setState({animacao})
  }

  render () …