Animating react-native-svg dash length of a <Circle />

• react-native-svg

  2 5,983 7.7 Java

  Discontinued SVG library for React Native, React Native Web, and plain React web projects. [Moved to: https://github.com/react-native-svg/react-native-svg] (by react-native-community)

  

import React, { Component } from "react";import PropTypes from "prop-types";import styled from "styled-components/native";import { Animated } from "react-native";import { Svg } from "expo";import { colour, dimension, animation } from "../Styles";const { Circle, Defs, LinearGradient, Stop } = Svg;const SSvg = styled(Svg)` transform: rotate(90deg); margin-left: ${dimension.ExperienceCircleMarginLeft}; margin-top: ${dimension.ExperienceCircleMarginTop};`;class ExperienceCircle extends Component { // -- prop validation ----------------------------------------------------- // static propTypes = { nextExp: PropTypes.number.isRequired, currentExp: PropTypes.number.isRequired }; // -- state --------------------------------------------------------------- // state = { percentage: new Animated.Value(0) }; // -- methods ------------------------------------------------------------- // componentDidMount() { this.state.percentage.addListener(percentage => { const circumference = dimension.ExperienceCircleRadius * 2 * Math.PI; const dashLength = percentage.value * circumference; this.circle.setNativeProps({ strokeDasharray: [dashLength, circumference] }); }); this._onAnimateExp(this.props.nextExp, this.props.currentExp); } componentWillReceiveProps({ nextExp, currentExp }) { this._onAnimateExp(currentExp, nextExp); } _onAnimateExp = (currentExp, nextExp) => { const percentage = currentExp / nextExp; Animated.timing(this.state.percentage, { toValue: percentage, duration: animation.duration.long, easing: animation.easeOut }).start(); }; // -- render -------------------------------------------------------------- // render() { const { ...props } = this.props; // const circumference = dimension.ExperienceCircleRadius * 2 * Math.PI; // const dashLength = this.state.percentage * circumference; return ( (this.circle = x)} cx={dimension.ExperienceCircleWidthHeight / 2} cy={dimension.ExperienceCircleWidthHeight / 2} r={dimension.ExperienceCircleRadius} stroke="url(#ExperienceCircle-gradient)" strokeWidth={dimension.ExperienceCircleThickness} fill="transparent" strokeDasharray={[0, 0]} strokeLinecap="round" /> ); }}export default ExperienceCircle; UPDATE: Extended discussion and more examples (similar approach working for different elements) available via issue posted to react-native-svg repo: https://github.com/react-native-community/react-native-svg/issues/451

• progressbar.js

  5 7,755 3.3 JavaScript

  Responsive and slick progress bars

Hey everyone I'm trying to achieve effect similar to: https://kimmobrunfeldt.github.io/progressbar.js(circle one)

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project