插件
动画圆圈
@nativescript/animated-circle
一个在 iOS 和 Android 上创建圆形进度条的插件。
 |  |
|---|---|
Android | iOS |
内容
安装
cli
npm install @nativescript/animated-circle使用 @nativescript/animated-circle
核心
- 使用 Page 的
xmlns属性注册插件命名空间，并提供你的前缀（例如ui）。
xml
<Page xmlns:ui="@nativescript/animated-circle">- 通过前缀访问
AnimatedCircle视图。
xml
<ui:AnimatedCircle ... />核心
xml
<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="{{ circleProgress }}"
text="{{ circleProgress + '%'}}"
textSize="28"
textColor="red" />
</Page>Angular
- 将
NativeScriptAnimatedCircleModule添加到要使用该视图的模块导入中。
typescript
import { NativeScriptAnimatedCircleModule } from '@nativescript/animated-circle/angular'
imports: [NativeScriptAnimatedCircleModule]- 在 HTML 中使用该视图。
xml
<AnimatedCircle backgroundColor="transparent" width="200" height="200" animated="true" animateFrom="0" rimColor="#fff000" barColor="#ff4081" rimWidth="25" [progress]="circleProgress" [text]="progress + '%'" textSize="22" textColor="#336699"></AnimatedCircle>Vue
- 在
app.ts文件中注册该视图。
ts
import { registerElement } from 'nativescript-vue'
registerElement(
'AnimatedCircle',
() => require('@nativescript/animated-circle').AnimatedCircle
)- 在
.vue文件中使用该视图。
xml
<AnimatedCircle
backgroundColor="transparent"
width="200"
height="200"
animated="true"
animateFrom="0"
rimColor="#FF5722"
barColor="#3D8FF4"
fillColor="#eee"
clockwise="true"
rimWidth="5"
:progress="progress"
:text="progress + '%'"
textSize="28"
textColor="red" />Svelte
- 在
app.ts文件中注册该插件的视图。
ts
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement(
'animatedCircle',
() => require('@nativescript/animated-circle').AnimatedCircle
)- 在标记中使用该视图。
xml
<animatedCircle
backgroundColor="transparent"
width="200"
height="200"
animated="true"
animateFrom="0"
rimColor="#C4BF55"
barColor="#000"
clockwise="true"
rimWidth="20"
progress={ circleProgress }
text="80%"
textSize="28"
textColor="red"
/>React
- 在
app.ts文件中注册该插件的视图。
ts
interface AnimatedCircleAttributes extends ViewAttributes {
progress?: number
animated?: boolean
animateFrom?: number
text?: string
textSize?: number
textColor?: string
rimColor?: string
barColor?: string
rimWidth?: number
clockwise?: boolean
}
declare global {
module JSX {
interface IntrinsicElements {
animatedCircle: NativeScriptProps<
AnimatedCircleAttributes,
AnimatedCircle
>
}
}
}
registerElement(
'animatedCircle',
() => require('@nativescript/animated-circle').AnimatedCircle
)- 在标记中使用该视图。
xml
<stackLayout marginTop={30}>
<animatedCircle
backgroundColor="transparent"
width={200}
height={200}
animated={true}
animateFrom={0}
rimColor="#000"
barColor="#C4BF55"
clockwise={true}
rimWidth={20}
progress={this.state.progress}
text={this.state.progress + '%'}
textSize={28}
textColor="#000"
/>
</stackLayout>API 参考
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
rimColor | 颜色 | #FF5722 | 圆圈边框填充部分的颜色。 |
barColor | 颜色 | #3D8FF4 | 圆圈边框的剩余（未填充）部分。 |
rimWidth | 数字 | 5 | 圆圈的边框半径。 |
progress | 数字 | 0 | 当前进度值。 |
startAngle | 数字 | 0 | 开始绘制的角度。 |
endAngle | 数字 | 100 | 仅限 iOS 停止绘制的结束角度。 |
animated | 布尔值 | false | 仅限 Android 动画状态。 |
animateFrom | 数字 | 0 | 仅限 Android 要从其进行动画的进度值。 |
animationDuration | 数字 | 1000 | 仅限 Android 动画持续时间。 |
text | 字符串 | "" | 圆圈内部的文本。 |
textSize | 数字 | 0 | 文本大小，0 将隐藏文本 |
textColor | 颜色 | #ff0000 | 文本颜色 |
许可证
Apache 许可证 2.0 版
