nativeScript-animated-circle

在 iOS 和 Android 上创建一个动画圆形（动画圆的边框）。

iOS	Android

安装

tns plugin add nativescript-animated-circle

使用

<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

要在 Angular 中使用此插件，请在您的 AppModule 声明上方注册该元素。

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

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

然后您可以在模板中使用 <AnimatedCircle></AnimatedCircle> 来利用此插件。

API

属性	默认值	描述
rimColor	#FF5722	圆边框填充部分的颜色。
barColor	#3D8FF4	圆边框剩余（未填充）部分。
clockwise	true	CW（true）或CCW（false）绘制方向。
rimWidth	5	圆的边框半径。
progress	0	当前进度值。
startAngle	0	开始绘制的角度。
endAngle	100	iOS 仅绘制停止时的结束角度。
animated	false	Android 仅动画状态。
animateFrom	0	Android 仅动画起始的进度值。
animationDuration	1000	Android 仅动画持续时间。
text	""	圆内的文本。
textSize	0	文本大小，0 将隐藏文本
textColor	#ff0000	文本颜色

可供合同

需要在您的 NativeScript 项目中实现速度？我可供您构建满足商业需求的美观且性能卓越的 NativeScript 应用程序。直接给我发邮件：[email protected] 讨论项目详情。

许可

Apache 许可证版本 2.0，2004 年 1 月