sean-perkins / nativescript-animated-circle

NativeScript plugin for animated progress borders on circles.

nativescript-animated-circle

Creates an animated circle (animates the border of the circle) on iOS and Android.

iOS	Android

Installation

tns plugin add nativescript-animated-circle

Usage

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:ui="nativescript-animated-circle">
    <ui:AnimatedCircle
        backgroundColor="transparent"
        width="200"
        height="200"
        animated="true"
        animateFrom="0"
        rimColor="#FF5722"
        barColor="#3D8FF4"
        fillColor="#eee"
        clockwise="true"
        rimWidth="5"
        progress="80"
        text="bam"
        textSize="28"
        textColor="red" />
</Page>

Angular

To use this plugin in Angular, please register the element above your AppModule declaration.

import { registerElement } from 'nativescript-angular/element-registry'

registerElement('AnimatedCircle', () => require('nativescript-animated-circle').AnimatedCircle);

Then you can leverage the plugin using <AnimatedCircle></AnimatedCircle> in your templates.

API

Property	Default	Description
rimColor	#FF5722	The filled portion of the circle border's color.
barColor	#3D8FF4	The remaining (unfilled) portion of the circle border.
clockwise	true	The CW (true) or CCW (false) draw direction.
rimWidth	5	The border radius of the circle.
progress	0	The current progress value.
startAngle	0	The angle to start drawing from.
endAngle	100	iOS only the end angle to stop drawing at.
animated	false	Android only animation status.
animateFrom	0	Android only the progress value to animate from.
animationDuration	1000	Android only the duration to animate for.
text	""	The text inside of the circle.
textSize	0	Text size, 0 will hide the text
textColor	#ff0000	Text color

Available for Contract

Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: [email protected] to discuss project details.

License

Apache License Version 2.0, January 2004

nativescript-animated-circle's Issues

[Feature Request] Text in the middle

@sean-perkins i was about to make a pr to add this functionality to your plugin, but then i realised the ios pod don't support it.

i did a little search to find a simple pod with the current functionality an support for text(https://github.com/atecle/ATCircularProgressView)

if it's ok for you i will summit another pr with support for text

thanks!

bar width not actually used in android impl

If the demo apps cannot help and there is no issue for your problem, tell us about it

The barWidth setting does not actually apply to the android version - the rimWidth is incorrectly applied to the barwidth. This means that the example android screenshot is not possible to recreate since the rim width cannot be different from the bar width.

Which platform(s) does your issue occur on?

Android

Please, tell us how to recreate the issue in as much detail as possible.

Add barWidth and rimWidth settings to xml with different settings. Only the rimWidth setting is applied and is applied to both the bar and the rim.

Can't resize text

Which platform(s) does your issue occur on?

Android, Pixel XL 2

Please, provide the following version numbers that your issue occurs with:

• CLI: 3.4.2
• Cross-platform modules: 3.4.1
• Runtime(s): tns-android 3.4.2
• Plugin(s):

"devDependencies": {
    "@angular/compiler-cli": "~5.2.0",
    "@ngtools/webpack": "~1.9.4",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "codelyzer": "~4.0.2",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "1.5.0",
    "nativescript-dev-typescript": "~0.6.0",
    "nativescript-dev-webpack": "~0.9.1",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "sass-loader": "~6.0.6",
    "tslint": "~5.8.0",
    "typescript": "~2.6.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0"
  }

Please, tell us how to recreate the issue in as much detail as possible.

I did a custom layout setup to get around this one but if you use the text property on the component I cant change the text size. It's huge and gets clipped.

Demo application crashes

Platform: ios emulator
tns --version: 3.4.2

I did a simple git clone, and a "tns run ios".
This results in the following error:

$ tns run ios
Searching for devices...
Executing before-prepare hook from /private/tmp/nativescript-animated-circle/demo/hooks/before-prepare/nativescript-dev-typescript.js
Found peer TypeScript 2.3.4
Preparing project...
Project successfully prepared (iOS)
Executing after-prepare hook from /private/tmp/nativescript-animated-circle/demo/hooks/after-prepare/nativescript-unit-test-runner.js
Successfully transferred all files.
Refreshing application...
Successfully synced application org.nativescript.demo on device E448BAC2-1F61-4C88-ADC3-C8A7E3DF6E12.
Executing before-watch hook from /private/tmp/nativescript-animated-circle/demo/hooks/before-watch/nativescript-dev-typescript.js
Found peer TypeScript 2.3.4
1   0x1102a86db NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
2   0x11097d11e ffi_closure_unix64_inner
3   0x11097da52 ffi_closure_unix64
4   0x1117b69e5 -[UIViewController __viewWillAppear:]
5   0x1117b8242 -[UIViewController viewWillMoveToWindow:]
6   0x1116c0cfd -[UIView(Hierarchy) _willMoveToWindow:withAncestorView:]
7   0x1116d26cd -[UIView(Internal) _addSubview:positioned:relativeTo:]
8   0x11167baa2 -[UIWindow addRootViewControllerViewIfPossible]
9   0x11167bed7 -[UIWindow _setHidden:forced:]
10  0x11168ee54 -[UIWindow makeKeyAndVisible]
11  0x11097d8ad ffi_call_unix64
12  0x1338a2710
file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:196:56: JS ERROR Error: Building UI from XML. @file:///app/main-page.xml:7:7
22:05:46 - Compilation complete. Watching for file changes.

I am not sure where to go from here. A working demo/example would really help.

Animation on iOS doesn't happen on init as it does on Android

Title pretty much describes it all. I was looking into the specific plugins used for both platforms and couldn't get the idea. Is the support for animating iOS circle bar dropped? On Android it works flawlessly though.

TypeError: at.grabner.circleprogress.CircleProgressView is not a constructor

###System.err: TypeError: at.grabner.circleprogress.CircleProgressView is not a constructor
System.err: File: "file:///data/data/org.agrohaven.application/files/app/vendor.js, line: 7521, column: 11
System.err:
System.err: StackTrace:
System.err: Frame: function:'AnimatedCircle.createNativeView', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 7521, column: 12
System.err: Frame: function:'ViewBase._setupUI', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 68301, column: 25
System.err: Frame: function:'', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 68356, column: 13
System.err: Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 78983, column: 20
System.err: Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 69685, column: 10
System.err: Frame: function:'ViewBase._setupUI', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 68355, column: 10
System.err: Frame: function:'', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 68356, column: 13
System.err: Frame: function:'ContentView.eachChildView', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 65168, column: 7
System.err: Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 69685, column: 10
System.err: Frame: function:'ViewBase._setupUI', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 68355, column: 10
System.err: Frame: function:'', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 68356, column: 13
System.err: Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 78983, column: 20
System.err: Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 69685, column: 10
System.err: Frame: function:'ViewBase._setupUI', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 68355, column: 10
System.err: Frame: function:'', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 68356, column: 13
System.err: Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 78983, column: 20
System.err: Frame: function:'ViewCommon.eachChild', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 69685, column: 10
System.err: Frame: function:'ViewBase._setupUI', file:'file:///data/data/org.agrohaven.application/files/app/vendor.js', line: 68355, column: 10

Unable to use binding on text property

Which platform(s) does your issue occur on?

• iOS
• iOS 11.3
• iPhone X

Please, provide the following version numbers that your issue occurs with:

• CLI: 4.0.0

Please, tell us how to recreate the issue in as much detail as possible.

• Use bindable [text] property instead of static [text] property on the AnimatedCircle instance
• Expected: It works and correct value is displayed from the binding
• Actual: App crashes

Slight dark border wrapping the ring

Which platform(s) does your issue occur on?

Android, Pixel XL 2

Please, provide the following version numbers that your issue occurs with:

• CLI: 3.4.2
• Cross-platform modules: 3.4.1
• Runtime(s): tns-android 3.4.2
• Plugin(s):

"devDependencies": {
    "@angular/compiler-cli": "~5.2.0",
    "@ngtools/webpack": "~1.9.4",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "codelyzer": "~4.0.2",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "1.5.0",
    "nativescript-dev-typescript": "~0.6.0",
    "nativescript-dev-webpack": "~0.9.1",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "sass-loader": "~6.0.6",
    "tslint": "~5.8.0",
    "typescript": "~2.6.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0"
  }

Please, tell us how to recreate the issue in as much detail as possible.

There's a slight border around the ring on android that I can't get rid of. See attached image. Is there some way to get rid of that border?

Thanks!

Use CSS properties

Documentation doesn't show CSS properties.

It would be a useful feature, use CSS to modify properties, especially if you use SASS.

Thanks, it's a very useful package.

Feature request: animate bar colors

It would be great to provide a mechanism for animating transitions between colors of the circle elements - e.g. to provide a pulsing effect or transition between colors depending on the progress of the bar (but not a gradient along the bar)

Android implementation doesn't handle dynamic values.

Great plugin. Exactly what I need for a project I'm working on.

One issue is that the Android implementation doesn't handle dynamic attributes (e.g. progress={{ value }}). It is really easy to fix. You just need to move the code you have in initNativeView() into the setters. For example, to make the progress value handle dynamic values you would do this:

    set progress(value: number) {
        this._progress = Number(value);
        if (this.android) {
            if (this.animated) {
                if (this.animateFrom) {
                    this.android.setValueAnimated(this.animateFrom, this.progress, this.animationDuration);
                }
                else {
                    if (!this._animationDuration) {
                        this.android.setValueAnimated(this.progress);
                    }
                    else {
                        this.android.setValueAnimated(this.progress, this.animationDuration);
                    }
                }
            }
            else {
                this.android.setValue(this.progress);
            }
        }
    }

and setting rimWidth would look something like this:

    set rimWidth(value: number) {
        this._rimWidth = Number(value);
        if (this.android) {
                this.android.setRimWidth(this.rimWidth);
        }
    }

That code can then be removed from the initNativeView() function.

I'd be happy to submit a PR to fix this if you'd like. I probably won't get to it until the weekend though.