Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to animate the circular progress to be full after one minute #16

Open
eranabir opened this issue Jul 18, 2017 · 1 comment
Open

Comments

@eranabir
Copy link

eranabir commented Jul 18, 2017

i am using this function to change the this.state.timeLoader2 with setState
but the problem is on every device its acting different
i need to animate the circular progress like a loader to be full after one minute

      startCircleAnimation(number,stop) {
         if (number > 920 || stop > 9200) {
            return
        }
        Animated.timing(this.state.timeLoader, {
            toValue: totalTime / 920 * number,
            duration: 50,

        }).start(() => {

            this.setState({
                timeLoader2: this.state.timeLoader._value
            }, () => {
                this._startCircleAnimation(number + 1, stop + 10)
            });

        })
    }
 <CircularProgress
                        startAngle={0}
                        angleLength={this.state.timeLoader2}
                        segments={5}
                        strokeWidth={3}
                        radius={calcSize(100)}
                        gradientColorFrom="#2A818E"
                        gradientColorTo="#30ABA5"
                        onUpdate={({startAngle, angleLength}) => console.log(startAngle, angleLength)}
                        clockFaceColor="#9d9d9d"
                        bgCircleColor="#D3D3D3"
/>

any idea how to accomplish that ? thanks !

@emirsnck
Copy link

emirsnck commented Oct 7, 2019

I am using following code for this issue but this solution not work on release apk. any idea how to work.

import CircularSlider from 'react-native-circular-slider';


const AnimatedProgress = Animated.createAnimatedComponent(CircularSlider);

  updateValue = ({ x }) => {
    this.setState({
      animateValue:new Animated.Value(0)
    }, function() {
        Animated.timing(this.state.animateValue, {
            toValue: Math.PI,
            duration: 600,
            easing: Easing.quad,
          }).start();
          });;

  }



          <AnimatedProgress
            startAngle={startAngle}
            angleLength={animateValue}
            onUpdate={this.onUpdate}
            segments={30}
            strokeWidth={40}
            radius={125}
            gradientColorFrom="#2abdcd"
            gradientColorTo="#44d6f0"
            bgCircleColor="#171717"
            stopIcon={<G scale="1.1" transform={{ translate: "-8, -8" }}>{}</G>}
            startIcon={<G scale="1.1" transform={{ translate: "-8, -8" }}>{}</G>}
          />

release exception

2019-10-07 09:37:35.197 26346-26346/? E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.xxxxxx, PID: 26346
java.lang.IllegalStateException: java.lang.NoSuchFieldException: fill
at com.horcrux.svg.E.a(Unknown Source:92)
at com.horcrux.svg.k.d(Unknown Source:41)
at com.horcrux.svg.k.a(Unknown Source:13)
at com.horcrux.svg.E.b(Unknown Source:265)
at com.horcrux.svg.k.d(Unknown Source:54)
at com.horcrux.svg.k.a(Unknown Source:13)
at com.horcrux.svg.E.b(Unknown Source:265)
at com.horcrux.svg.k.d(Unknown Source:54)
at com.horcrux.svg.k.a(Unknown Source:13)
at com.horcrux.svg.E.b(Unknown Source:265)
at com.horcrux.svg.L.a(Unknown Source:158)
at com.horcrux.svg.L.j(Unknown Source:71)
at com.horcrux.svg.L.onDraw(Unknown Source:16)
at android.view.View.draw(View.java:20366)
at android.view.View.updateDisplayListIfDirty(View.java:19241)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at com.facebook.react.views.view.h.dispatchDraw(Unknown Source:3)
at android.view.View.updateDisplayListIfDirty(View.java:19232)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at com.facebook.react.views.view.h.dispatchDraw(Unknown Source:3)
at android.view.View.updateDisplayListIfDirty(View.java:19232)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at android.view.View.draw(View.java:20369)
at android.widget.ScrollView.draw(ScrollView.java:1757)
at com.facebook.react.views.scroll.g.draw(Unknown Source:82)
at android.view.View.updateDisplayListIfDirty(View.java:19241)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at com.facebook.react.views.view.h.dispatchDraw(Unknown Source:3)
at android.view.View.draw(View.java:20369)
at android.view.View.updateDisplayListIfDirty(View.java:19241)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at com.facebook.react.views.view.h.dispatchDraw(Unknown Source:3)
at android.view.View.updateDisplayListIfDirty(View.java:19232)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at com.facebook.react.views.view.h.dispatchDraw(Unknown Source:3)
at android.view.View.updateDisplayListIfDirty(View.java:19232)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
2019-10-07 09:37:35.197 26346-26346/? E/AndroidRuntime: at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:690)
at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:696)
at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:805)
at android.view.ViewRootImpl.draw(ViewRootImpl.java:3517)
at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:3314)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2683)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1635)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7788)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1004)
at android.view.Choreographer.doCallbacks(Choreographer.java:816)
at android.view.Choreographer.doFrame(Choreographer.java:751)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:990)
at android.os.Handler.handleCallback(Handler.java:873)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:6898)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:537)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
Caused by: java.lang.NoSuchFieldException: fill
at java.lang.Class.getField(Class.java:1601)
at com.horcrux.svg.E.a(Unknown Source:55)
... 93 more
2019-10-07 09:37:35.198 26346-26346/? E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.xxxxx, PID: 26346
java.lang.IllegalStateException: java.lang.NoSuchFieldException: fill
at com.horcrux.svg.E.a(Unknown Source:92)
at com.horcrux.svg.k.d(Unknown Source:41)
at com.horcrux.svg.k.a(Unknown Source:13)
at com.horcrux.svg.E.b(Unknown Source:265)
at com.horcrux.svg.k.d(Unknown Source:54)
at com.horcrux.svg.k.a(Unknown Source:13)
at com.horcrux.svg.E.b(Unknown Source:265)
at com.horcrux.svg.k.d(Unknown Source:54)
at com.horcrux.svg.k.a(Unknown Source:13)
at com.horcrux.svg.E.b(Unknown Source:265)
at com.horcrux.svg.L.a(Unknown Source:158)
at com.horcrux.svg.L.j(Unknown Source:71)
at com.horcrux.svg.L.onDraw(Unknown Source:16)
at android.view.View.draw(View.java:20366)
at android.view.View.updateDisplayListIfDirty(View.java:19241)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at com.facebook.react.views.view.h.dispatchDraw(Unknown Source:3)
at android.view.View.updateDisplayListIfDirty(View.java:19232)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at com.facebook.react.views.view.h.dispatchDraw(Unknown Source:3)
at android.view.View.updateDisplayListIfDirty(View.java:19232)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at android.view.View.draw(View.java:20369)
at android.widget.ScrollView.draw(ScrollView.java:1757)
at com.facebook.react.views.scroll.g.draw(Unknown Source:82)
at android.view.View.updateDisplayListIfDirty(View.java:19241)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at com.facebook.react.views.view.h.dispatchDraw(Unknown Source:3)
at android.view.View.draw(View.java:20369)
at android.view.View.updateDisplayListIfDirty(View.java:19241)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at com.facebook.react.views.view.h.dispatchDraw(Unknown Source:3)
at android.view.View.updateDisplayListIfDirty(View.java:19232)
at android.view.View.draw(View.java:20094)
at android.view.ViewGroup.drawChild(ViewGroup.java:4337)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4116)
at com.facebook.react.views.view.h.dispatchDraw(Unknown Source:3)
at android.view.View.updateDisplayListIfDirty(View.java:19232)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
2019-10-07 09:37:35.198 26346-26346/? E/AndroidRuntime: at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4321)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4294)
at android.view.View.updateDisplayListIfDirty(View.java:19201)
at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:690)
at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:696)
at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:805)
at android.view.ViewRootImpl.draw(ViewRootImpl.java:3517)
at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:3314)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2683)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1635)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7788)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1004)
at android.view.Choreographer.doCallbacks(Choreographer.java:816)
at android.view.Choreographer.doFrame(Choreographer.java:751)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:990)
at android.os.Handler.handleCallback(Handler.java:873)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:6898)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:537)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
Caused by: java.lang.NoSuchFieldException: fill
at java.lang.Class.getField(Class.java:1601)
at com.horcrux.svg.E.a(Unknown Source:55)
... 93 more

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants