2 thoughts on “Animations”

  1. I’ve successfully implemented an inefficient SVG animation by using an Animated.Value and animating that using the React Native normal Animated methods.

    I then hooked into the changing values by adding an event listener to the value. On each value change you set the state with some style properties that allow the re-rendering of the SVG with the new style.

    As said this is inefficient, is noticeable on Android (iOS seems find though…) and is definitely not a long term solution.

  2. @mattvot Did you try wrapping the svg with an Animated.View. I have has some success with that. example (note it is smooth on device, gif is a bit choppy):

    class Blarg extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      scale: new Animated.Value(0)
    }
    this.animate = this.animate.bind(this);
  }

  componentDidMount() {
    this.animate();
  }

  animate() {
    Animated.sequence([
      Animated.timing(this.state.scale,
        {
          toValue:1,
          duration:2000
        }),
      Animated.timing(this.state.scale,
        {
          toValue:0,
          duration:2000
        })
    ]).start(this.animate)
  }

  render () {
    return (
      <View>
        <Animated.View style={{transform:[{scale:this.state.scale}]}}>
        <Svg height="100" width="100">
          <Path x='50' y='60' d="M23.70-49.04Q33.40-49.04 39.45-42.10Q45.49-35.16 45.49-23.98Q45.49-12.80 39.45-5.89Q33.40 1.02 23.70 1.02Q13.99 1.02 7.89-5.91Q1.79-12.83 1.79-23.98Q1.79-35.16 7.89-42.10Q13.99-49.04 23.70-49.04M23.70-43.00Q19.76-43.00 17.88-38.34Q16.00-33.68 16.00-23.98Q16.00-14.17 17.86-9.56Q19.72-4.96 23.70-4.96Q27.63-4.96 29.48-9.53Q31.32-14.10 31.32-23.98Q31.32-33.75 29.46-38.37Q27.60-43.00 23.70-43.00Z" stroke="red"/>
        </Svg>
        </Animated.View>
      </View>
    )
  }
}

Comments are closed.

2 thoughts on “Animations”

  1. I’ve successfully implemented an inefficient SVG animation by using an Animated.Value and animating that using the React Native normal Animated methods.

    I then hooked into the changing values by adding an event listener to the value. On each value change you set the state with some style properties that allow the re-rendering of the SVG with the new style.

    As said this is inefficient, is noticeable on Android (iOS seems find though…) and is definitely not a long term solution.

  2. @mattvot Did you try wrapping the svg with an Animated.View. I have has some success with that. example (note it is smooth on device, gif is a bit choppy):

    class Blarg extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      scale: new Animated.Value(0)
    }
    this.animate = this.animate.bind(this);
  }

  componentDidMount() {
    this.animate();
  }

  animate() {
    Animated.sequence([
      Animated.timing(this.state.scale,
        {
          toValue:1,
          duration:2000
        }),
      Animated.timing(this.state.scale,
        {
          toValue:0,
          duration:2000
        })
    ]).start(this.animate)
  }

  render () {
    return (
      <View>
        <Animated.View style={{transform:[{scale:this.state.scale}]}}>
        <Svg height="100" width="100">
          <Path x='50' y='60' d="M23.70-49.04Q33.40-49.04 39.45-42.10Q45.49-35.16 45.49-23.98Q45.49-12.80 39.45-5.89Q33.40 1.02 23.70 1.02Q13.99 1.02 7.89-5.91Q1.79-12.83 1.79-23.98Q1.79-35.16 7.89-42.10Q13.99-49.04 23.70-49.04M23.70-43.00Q19.76-43.00 17.88-38.34Q16.00-33.68 16.00-23.98Q16.00-14.17 17.86-9.56Q19.72-4.96 23.70-4.96Q27.63-4.96 29.48-9.53Q31.32-14.10 31.32-23.98Q31.32-33.75 29.46-38.37Q27.60-43.00 23.70-43.00Z" stroke="red"/>
        </Svg>
        </Animated.View>
      </View>
    )
  }
}

Comments are closed.