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.