├── ARTProgressDemo ├── .idea │ ├── .name │ ├── copyright │ │ └── profiles_settings.xml │ ├── encodings.xml │ ├── modules.xml │ ├── runConfigurations.xml │ ├── compiler.xml │ ├── gradle.xml │ └── misc.xml ├── app │ ├── .gitignore │ ├── src │ │ ├── main │ │ │ ├── res │ │ │ │ ├── values │ │ │ │ │ ├── strings.xml │ │ │ │ │ ├── colors.xml │ │ │ │ │ ├── dimens.xml │ │ │ │ │ └── styles.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── values-w820dp │ │ │ │ │ └── dimens.xml │ │ │ │ └── layout │ │ │ │ │ └── activity_main.xml │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── daemon1993 │ │ │ │ │ └── artprogressdemo │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── DemoActivity.java │ │ │ └── AndroidManifest.xml │ │ ├── test │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── daemon1993 │ │ │ │ └── artprogressdemo │ │ │ │ └── ExampleUnitTest.java │ │ └── androidTest │ │ │ └── java │ │ │ └── com │ │ │ └── daemon1993 │ │ │ └── artprogressdemo │ │ │ └── ApplicationTest.java │ ├── proguard-rules.pro │ └── build.gradle ├── settings.gradle ├── .gitignore ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── build.gradle ├── gradle.properties ├── gradlew.bat └── gradlew ├── .idea ├── watcherTasks.xml ├── jsLibraryMappings.xml ├── modules.xml ├── ARTDemo.iml ├── misc.xml └── workspace.xml ├── package.json ├── src └── components │ ├── AText.js │ ├── AMAText.js │ ├── AnimatedCircleProgress.js │ └── CircleProgressView.js ├── .flowconfig ├── .gitignore ├── README.md ├── index.android.js └── LICENSE /ARTProgressDemo/.idea/.name: -------------------------------------------------------------------------------- 1 | ARTProgressDemo -------------------------------------------------------------------------------- /ARTProgressDemo/app/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /ARTProgressDemo/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | -------------------------------------------------------------------------------- /ARTProgressDemo/.idea/copyright/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ARTProgressDemo 3 | 4 | -------------------------------------------------------------------------------- /ARTProgressDemo/.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/workspace.xml 5 | /.idea/libraries 6 | .DS_Store 7 | /build 8 | /captures 9 | -------------------------------------------------------------------------------- /.idea/watcherTasks.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /ARTProgressDemo/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daemon1993/ReactNative-Art-Progress/HEAD/ARTProgressDemo/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daemon1993/ReactNative-Art-Progress/HEAD/ARTProgressDemo/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daemon1993/ReactNative-Art-Progress/HEAD/ARTProgressDemo/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daemon1993/ReactNative-Art-Progress/HEAD/ARTProgressDemo/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daemon1993/ReactNative-Art-Progress/HEAD/ARTProgressDemo/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daemon1993/ReactNative-Art-Progress/HEAD/ARTProgressDemo/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /ARTProgressDemo/.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #3F51B5 4 | #303F9F 5 | #FF4081 6 | 7 | -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/res/values/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16dp 4 | 16dp 5 | 6 | -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ARTProgressDemo/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Mon Dec 28 10:00:20 PST 2015 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.10-all.zip 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "artdemo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.android.js", 6 | "scripts": { 7 | "start": "node node_modules/react-native/local-cli/cli.js start" 8 | }, 9 | "author": "daemon", 10 | "license": "ISC", 11 | "dependencies": { 12 | "react": "^15.4.1", 13 | "react-native": "^0.39.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /ARTProgressDemo/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/res/values-w820dp/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 64dp 6 | 7 | -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/test/java/com/daemon1993/artprogressdemo/ExampleUnitTest.java: -------------------------------------------------------------------------------- 1 | package com.daemon1993.artprogressdemo; 2 | 3 | import org.junit.Test; 4 | 5 | import static org.junit.Assert.*; 6 | 7 | /** 8 | * To work on unit tests, switch the Test Artifact in the Build Variants view. 9 | */ 10 | public class ExampleUnitTest { 11 | @Test 12 | public void addition_isCorrect() throws Exception { 13 | assertEquals(4, 2 + 2); 14 | } 15 | } -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/java/com/daemon1993/artprogressdemo/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.daemon1993.artprogressdemo; 2 | 3 | import android.support.v7.app.AppCompatActivity; 4 | import android.os.Bundle; 5 | 6 | public class MainActivity extends AppCompatActivity { 7 | 8 | @Override 9 | protected void onCreate(Bundle savedInstanceState) { 10 | super.onCreate(savedInstanceState); 11 | setContentView(R.layout.activity_main); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/androidTest/java/com/daemon1993/artprogressdemo/ApplicationTest.java: -------------------------------------------------------------------------------- 1 | package com.daemon1993.artprogressdemo; 2 | 3 | import android.app.Application; 4 | import android.test.ApplicationTestCase; 5 | 6 | /** 7 | * Testing Fundamentals 8 | */ 9 | public class ApplicationTest extends ApplicationTestCase { 10 | public ApplicationTest() { 11 | super(Application.class); 12 | } 13 | } -------------------------------------------------------------------------------- /.idea/ARTDemo.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/AText.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Daemon1993 on 16/12/18. 3 | */ 4 | import React, {Component, PropTypes} from 'react'; 5 | import { 6 | View, 7 | Text, 8 | StyleSheet, 9 | Dimensions, 10 | Animated 11 | } from 'react-native'; 12 | 13 | 14 | const Tag = "CenterView"; 15 | 16 | 17 | export default class AText extends Component { 18 | static propTypes = { 19 | value: PropTypes.number, 20 | }; 21 | 22 | render() { 23 | return ( 24 | 25 | {Math.ceil(this.props.value)} 26 | 27 | ); 28 | } 29 | } -------------------------------------------------------------------------------- /ARTProgressDemo/.idea/runConfigurations.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /ARTProgressDemo/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /Users/Daemon1993/Library/Android/sdk/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /ARTProgressDemo/.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /ARTProgressDemo/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:2.1.0' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | jcenter() 18 | maven { 19 | // All of React Native (JS, Android binaries) is installed from npm 20 | url "$rootDir/../node_modules/react-native/android" 21 | } 22 | } 23 | } 24 | 25 | task clean(type: Delete) { 26 | delete rootProject.buildDir 27 | } 28 | -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 16 | 17 | -------------------------------------------------------------------------------- /ARTProgressDemo/.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | 23 | -------------------------------------------------------------------------------- /ARTProgressDemo/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.application' 2 | 3 | android { 4 | compileSdkVersion 23 5 | buildToolsVersion "23.0.3" 6 | 7 | defaultConfig { 8 | applicationId "com.daemon1993.artprogressdemo" 9 | minSdkVersion 15 10 | targetSdkVersion 23 11 | versionCode 1 12 | versionName "1.0" 13 | } 14 | buildTypes { 15 | release { 16 | minifyEnabled false 17 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 18 | } 19 | } 20 | } 21 | 22 | dependencies { 23 | compile fileTree(dir: 'libs', include: ['*.jar']) 24 | testCompile 'junit:junit:4.12' 25 | compile 'com.android.support:appcompat-v7:23.4.0' 26 | 27 | compile "com.facebook.react:react-native:+" // From node_modules. 28 | 29 | 30 | } 31 | -------------------------------------------------------------------------------- /ARTProgressDemo/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/components/AMAText.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Daemon1993 on 16/12/18. 3 | */ 4 | import React, {Component, PropTypes} from 'react'; 5 | import { 6 | View, 7 | Text, 8 | StyleSheet, 9 | Dimensions, 10 | Animated 11 | } from 'react-native'; 12 | 13 | 14 | const Tag = "AMAText"; 15 | import AText from './AText' 16 | 17 | 18 | const ATextCP = Animated.createAnimatedComponent(AText); 19 | 20 | export default class AMAText extends Component { 21 | static propTypes = { 22 | value: PropTypes.number, 23 | }; 24 | 25 | // 构造 26 | constructor(props) { 27 | super(props); 28 | // 初始状态 29 | this.state = { 30 | value: new Animated.Value(0), 31 | }; 32 | } 33 | 34 | componentDidMount() { 35 | console.log(Tag, 'componentDidMount'); 36 | 37 | this.startAnimate(this.props.value) 38 | } 39 | 40 | componentWillReceiveProps(nextProps) { 41 | if(nextProps.value!=this.props.value){ 42 | this.startAnimate(nextProps.value); 43 | } 44 | } 45 | startAnimate(progress) { 46 | 47 | this.state.value.setValue(0); 48 | Animated.timing(this.state.value, { 49 | toValue: progress, 50 | duration: 1000 51 | }).start(); 52 | 53 | } 54 | 55 | 56 | render() { 57 | 58 | return ( 59 | 60 | 62 | ) 63 | ; 64 | } 65 | } -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore templates for 'react-native init' 6 | .*/local-cli/templates/.* 7 | 8 | ; Ignore the website subdir 9 | /website/.* 10 | 11 | ; Ignore "BUCK" generated dirs 12 | /\.buckd/ 13 | 14 | ; Ignore unexpected extra "@providesModule" 15 | .*/node_modules/.*/node_modules/fbjs/.* 16 | 17 | ; Ignore duplicate module providers 18 | ; For RN Apps installed via npm, "Libraries" folder is inside 19 | ; "node_modules/react-native" but in the source repo it is in the root 20 | .*/Libraries/react-native/React.js 21 | .*/Libraries/react-native/ReactNative.js 22 | 23 | [include] 24 | 25 | [libs] 26 | Libraries/react-native/react-native-interface.js 27 | flow/ 28 | 29 | [options] 30 | module.system=haste 31 | 32 | experimental.strict_type_args=true 33 | 34 | munge_underscores=true 35 | 36 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 37 | 38 | suppress_type=$FlowIssue 39 | suppress_type=$FlowFixMe 40 | suppress_type=$FixMe 41 | 42 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-7]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 43 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-7]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 44 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 45 | 46 | unsafe.enable_getters_and_setters=true 47 | 48 | [version] 49 | ^0.37.0 50 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | 40 | 41 | # Android/IJ 42 | # 43 | .idea 44 | .gradle 45 | local.properties 46 | *.iml 47 | 48 | # node.js 49 | # 50 | node_modules/ 51 | npm-debug.log 52 | 53 | # 54 | /release 55 | /logs 56 | 57 | # Built application files 58 | *.apk 59 | *.ap_ 60 | 61 | # Files for the Dalvik VM 62 | *.dex 63 | 64 | 65 | # Java class files 66 | *.class 67 | 68 | # Generated files 69 | android/bin/ 70 | android/gen/ 71 | 72 | # Gradle files 73 | android/.gradle/ 74 | android/.idea/ 75 | android/build/ 76 | 77 | # Local configuration file (sdk path, etc) 78 | android/local.properties 79 | 80 | # Proguard folder generated by Eclipse 81 | android/proguard/ 82 | 83 | # Log Files 84 | 85 | android/captures/ 86 | android/android_iwown_Ble/android_iwown_Ble.iml 87 | android/app/app.iml 88 | *.DS_Store 89 | 90 | *.iml 91 | .gradle 92 | /local.properties 93 | /.idea/workspace.xml 94 | /.idea/libraries 95 | .DS_Store 96 | /build 97 | /captures 98 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ReactNative-Art-Progress 2 | CircleProgress base on ReactNative ART 3 | 4 | 重点实现进度的核心就两个 5 | 6 | - 一个是根据角度计算终点坐标 sin cos 7 | - 一个是push方法 用圆弧 将两个点连起来 8 | - 传入一个radius 我回根据半径计算这个圆的顶点坐标 默认中心最上的点为起始点 9 | 10 | > 效果图 11 | >>![效果图](http://upload-images.jianshu.io/upload_images/831873-35605fb34b5078d3.gif?imageMogr2/auto-orient/strip) 12 | 13 | ![内容说明](http://upload-images.jianshu.io/upload_images/831873-d7f29f111bc27fc3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 14 | 15 | 16 | >使用方法很简单 17 | 18 | ```` 19 | 20 | 21 | 外部放入进度条中间的内容 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | ```` 34 | 35 | ![一个无动画 一个有动画](http://upload-images.jianshu.io/upload_images/831873-863e08fd81b5e4ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 36 | - 复杂配置 37 | ![很多的配置](http://upload-images.jianshu.io/upload_images/831873-db6733ad4bd156ac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 38 | 39 | --- 40 | 41 | >因为进度条是一个单独的组件 所以中间部分 我没有写死 42 | 中间区域留了一个位置 43 | 可以插入你想插入的View 44 | 45 | 效果图中间的数字动画使用Animated.createAnimatedComponent实现 46 | - 中间留空的区域 是根据传入的半径 获取到了圆的区域 在计算中间内切正方形的区域 在通过绝对布局left top实现 具体可以看代码 47 | 48 | --- 49 | >代码就不贴了 github有 50 | 如果对RN的ART arcTo 圆弧 不太熟悉的 可以看看Demo 希望有帮助 51 | 52 | [详细解说介绍地址--->(learn more)](http://www.jianshu.com/p/c11c2d2beca6) -------------------------------------------------------------------------------- /index.android.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, {PropTypes} from 'react'; 4 | import { 5 | AppRegistry, 6 | StyleSheet, 7 | Text, 8 | View, 9 | TouchableOpacity, 10 | Animated 11 | } from 'react-native'; 12 | 13 | 14 | import AnimatedCircleProgress from './src/components/AnimatedCircleProgress' 15 | import CircleProgressView from './src/components/CircleProgressView' 16 | import AMAText from './src/components/AMAText' 17 | 18 | 19 | class Demo extends React.Component { 20 | 21 | // 构造 22 | constructor(props) { 23 | super(props); 24 | // 初始状态 25 | this.state = { 26 | progress: 100, 27 | callBackProgress: 0, 28 | update: true, 29 | }; 30 | } 31 | 32 | changeProgress() { 33 | this.setState({ 34 | progress: Math.random() * 360, 35 | }); 36 | } 37 | 38 | 39 | render() { 40 | console.log('render'); 41 | return ( 42 | 43 | this.changeProgress()}> 44 | 点击改变progress 45 | 46 | 47 | 外部放入进度条中间的内容 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | ) 63 | } 64 | } 65 | 66 | 67 | AppRegistry.registerComponent('daemon', () => Demo); 68 | -------------------------------------------------------------------------------- /src/components/AnimatedCircleProgress.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 圆形进度条 动画效果类 3 | * 内部可以放内容 4 | * 个性化通过props配置 5 | * Created by Daemon on 2016/12/13 17:55. 6 | */ 7 | import React, {Component, PropTypes} from 'react'; 8 | import { 9 | View, 10 | Text, 11 | StyleSheet, 12 | Dimensions, 13 | Animated 14 | } from 'react-native'; 15 | 16 | import CircleProgressView from './CircleProgressView'; 17 | 18 | const AnimatedCP = Animated.createAnimatedComponent(CircleProgressView); 19 | 20 | const Tag = "AnimatedCircleProgress"; 21 | export default class AnimatedCircleProgress extends Component { 22 | 23 | static defaultProps = { 24 | durtime: 1000, 25 | progress: 0, 26 | }; 27 | 28 | 29 | 30 | static propTypes = { 31 | 32 | progress: PropTypes.number, 33 | totalNum: PropTypes.number, 34 | 35 | progressWidth: PropTypes.number, 36 | baseProgressWidth: PropTypes.number, 37 | raduis: PropTypes.number, 38 | 39 | durtime: PropTypes.number, 40 | progressColor:PropTypes.string, 41 | progressBaseColor:PropTypes.string, 42 | centerViewMode:PropTypes.bool, 43 | 44 | }; 45 | 46 | 47 | // 构造 48 | constructor(props) { 49 | super(props); 50 | // 初始状态 51 | this.state = { 52 | progress1: new Animated.Value(0), 53 | }; 54 | } 55 | 56 | componentWillReceiveProps(nextProps) { 57 | console.log(Tag,'componentWillReceiveProps'); 58 | if (nextProps.progress != this.props.progress 59 | || this.props.totalNum!=nextProps.totalNum) { 60 | this.startAnimate(nextProps.progress); 61 | } 62 | } 63 | 64 | componentDidMount() { 65 | console.log(Tag, 'componentDidMount'); 66 | 67 | this.startAnimate(this.props.progress) 68 | } 69 | 70 | startAnimate(progress) { 71 | console.log(Tag,'startAnimate'); 72 | this.state.progress1.setValue(0); 73 | Animated.timing(this.state.progress1, { 74 | toValue: progress, 75 | duration: this.props.durtime 76 | }).start(); 77 | 78 | } 79 | 80 | render() { 81 | 82 | const {durtime, progress, ...other} = this.props; 83 | 84 | return ( 85 | 89 | ); 90 | } 91 | 92 | } 93 | -------------------------------------------------------------------------------- /ARTProgressDemo/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 19 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 46 | 47 | $USER_HOME$/.subversion 48 | 49 | -------------------------------------------------------------------------------- /ARTProgressDemo/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /ARTProgressDemo/app/src/main/java/com/daemon1993/artprogressdemo/DemoActivity.java: -------------------------------------------------------------------------------- 1 | package com.daemon1993.artprogressdemo; 2 | 3 | import android.support.v7.app.AppCompatActivity; 4 | import android.os.Bundle; 5 | import android.view.KeyEvent; 6 | 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactRootView; 9 | import com.facebook.react.bridge.Arguments; 10 | import com.facebook.react.bridge.WritableMap; 11 | import com.facebook.react.common.LifecycleState; 12 | import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler; 13 | import com.facebook.react.modules.core.DeviceEventManagerModule; 14 | import com.facebook.react.shell.MainReactPackage; 15 | 16 | 17 | import java.text.SimpleDateFormat; 18 | import java.util.Date; 19 | import java.util.List; 20 | 21 | public class DemoActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler { 22 | private ReactRootView mReactRootView; 23 | private ReactInstanceManager mReactInstanceManager; 24 | 25 | 26 | 27 | @Override 28 | protected void onCreate(Bundle savedInstanceState) { 29 | super.onCreate(savedInstanceState); 30 | 31 | mReactRootView = new ReactRootView(this); 32 | 33 | mReactInstanceManager = ReactInstanceManager.builder() 34 | .setApplication(getApplication()) 35 | .setBundleAssetName("index.android.bundle") 36 | .setJSMainModuleName("index.android") 37 | .addPackage(new MainReactPackage()) 38 | 39 | // .setUseDeveloperSupport(true) 40 | .setUseDeveloperSupport(true) 41 | .setInitialLifecycleState(LifecycleState.RESUMED) 42 | .build(); 43 | mReactRootView.startReactApplication(mReactInstanceManager, "daemon", null); 44 | setContentView(mReactRootView); 45 | 46 | } 47 | 48 | @Override 49 | public void invokeDefaultOnBackPressed() { 50 | super.onBackPressed(); 51 | } 52 | 53 | @Override 54 | protected void onPause() { 55 | super.onPause(); 56 | 57 | if (mReactInstanceManager != null) { 58 | mReactInstanceManager.onHostPause(); 59 | } 60 | } 61 | 62 | @Override 63 | protected void onResume() { 64 | super.onResume(); 65 | 66 | if (mReactInstanceManager != null) { 67 | mReactInstanceManager.onHostResume(this, this); 68 | } 69 | } 70 | 71 | @Override 72 | protected void onDestroy() { 73 | super.onDestroy(); 74 | 75 | if (mReactInstanceManager != null) { 76 | mReactInstanceManager.onHostDestroy(); 77 | } 78 | } 79 | 80 | 81 | @Override 82 | public boolean onKeyUp(int keyCode, KeyEvent event) { 83 | if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { 84 | mReactInstanceManager.showDevOptionsDialog(); 85 | return true; 86 | } 87 | return super.onKeyUp(keyCode, event); 88 | } 89 | 90 | } 91 | -------------------------------------------------------------------------------- /ARTProgressDemo/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # Attempt to set APP_HOME 46 | # Resolve links: $0 may be a link 47 | PRG="$0" 48 | # Need this for relative symlinks. 49 | while [ -h "$PRG" ] ; do 50 | ls=`ls -ld "$PRG"` 51 | link=`expr "$ls" : '.*-> \(.*\)$'` 52 | if expr "$link" : '/.*' > /dev/null; then 53 | PRG="$link" 54 | else 55 | PRG=`dirname "$PRG"`"/$link" 56 | fi 57 | done 58 | SAVED="`pwd`" 59 | cd "`dirname \"$PRG\"`/" >/dev/null 60 | APP_HOME="`pwd -P`" 61 | cd "$SAVED" >/dev/null 62 | 63 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 64 | 65 | # Determine the Java command to use to start the JVM. 66 | if [ -n "$JAVA_HOME" ] ; then 67 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 68 | # IBM's JDK on AIX uses strange locations for the executables 69 | JAVACMD="$JAVA_HOME/jre/sh/java" 70 | else 71 | JAVACMD="$JAVA_HOME/bin/java" 72 | fi 73 | if [ ! -x "$JAVACMD" ] ; then 74 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 75 | 76 | Please set the JAVA_HOME variable in your environment to match the 77 | location of your Java installation." 78 | fi 79 | else 80 | JAVACMD="java" 81 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 82 | 83 | Please set the JAVA_HOME variable in your environment to match the 84 | location of your Java installation." 85 | fi 86 | 87 | # Increase the maximum file descriptors if we can. 88 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 89 | MAX_FD_LIMIT=`ulimit -H -n` 90 | if [ $? -eq 0 ] ; then 91 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 92 | MAX_FD="$MAX_FD_LIMIT" 93 | fi 94 | ulimit -n $MAX_FD 95 | if [ $? -ne 0 ] ; then 96 | warn "Could not set maximum file descriptor limit: $MAX_FD" 97 | fi 98 | else 99 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 100 | fi 101 | fi 102 | 103 | # For Darwin, add options to specify how the application appears in the dock 104 | if $darwin; then 105 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 106 | fi 107 | 108 | # For Cygwin, switch paths to Windows format before running java 109 | if $cygwin ; then 110 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 111 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 112 | JAVACMD=`cygpath --unix "$JAVACMD"` 113 | 114 | # We build the pattern for arguments to be converted via cygpath 115 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 116 | SEP="" 117 | for dir in $ROOTDIRSRAW ; do 118 | ROOTDIRS="$ROOTDIRS$SEP$dir" 119 | SEP="|" 120 | done 121 | OURCYGPATTERN="(^($ROOTDIRS))" 122 | # Add a user-defined pattern to the cygpath arguments 123 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 124 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 125 | fi 126 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 127 | i=0 128 | for arg in "$@" ; do 129 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 130 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 131 | 132 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 133 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 134 | else 135 | eval `echo args$i`="\"$arg\"" 136 | fi 137 | i=$((i+1)) 138 | done 139 | case $i in 140 | (0) set -- ;; 141 | (1) set -- "$args0" ;; 142 | (2) set -- "$args0" "$args1" ;; 143 | (3) set -- "$args0" "$args1" "$args2" ;; 144 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 145 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 146 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 147 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 148 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 149 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 150 | esac 151 | fi 152 | 153 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 154 | function splitJvmOpts() { 155 | JVM_OPTS=("$@") 156 | } 157 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 158 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 159 | 160 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 161 | -------------------------------------------------------------------------------- /src/components/CircleProgressView.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 圆形进度条 3 | * 内部可以放内容 4 | * 居中 5 | * Created by Daemon on 2016/12/12 11:57. 6 | */ 7 | import React, {Component, PropTypes} from 'react'; 8 | import { 9 | View, 10 | Text, 11 | StyleSheet, 12 | Dimensions, 13 | ART 14 | } from 'react-native'; 15 | 16 | const {Group, Path, Shape, Surface, LinearGradient}=ART; 17 | 18 | const Tag = "CircleProgressView"; 19 | 20 | 21 | export default class CircleProgressView extends Component { 22 | 23 | static defaultProps = { 24 | baseProgressWidth: 8, 25 | progressWidth: 10, 26 | totalNum: 360, 27 | progress: 0, 28 | raduis: 100, 29 | progressColor: '#485759', 30 | progressBaseColor: '#ffffff', 31 | centerViewMode: true, 32 | }; 33 | 34 | static propTypes = { 35 | progress: PropTypes.number, 36 | totalNum: PropTypes.number, 37 | 38 | progressWidth: PropTypes.number, 39 | baseProgressWidth: PropTypes.number, 40 | raduis: PropTypes.number, 41 | 42 | progressColor: PropTypes.string, 43 | progressBaseColor: PropTypes.string, 44 | 45 | centerViewMode: PropTypes.bool, 46 | 47 | 48 | }; 49 | 50 | // 构造 51 | constructor(props) { 52 | super(props); 53 | if (this.props.raduis < 0) { 54 | throw new Error(' radius must >0'); 55 | } 56 | 57 | let size = (this.props.raduis) * 2; 58 | console.log("size " + size); 59 | let centerW = Math.sqrt(Math.pow(size / 2 - this.props.progressWidth * 3 / 2, 2) / 2) * 2; 60 | console.log("centerW " + centerW); 61 | let marginTop = size / 2 - centerW / 2; 62 | let marginLeft = size / 2 - centerW / 2; 63 | 64 | console.log("marginLeft " + marginLeft); 65 | this.state = { 66 | size: size, 67 | startX: size / 2, 68 | startY: this.props.progressWidth, 69 | //这才是真实半径 70 | originR: size / 2 - this.props.progressWidth, 71 | endX: size / 2, 72 | endY: this.props.progressWidth, 73 | startX1: size / 2, 74 | startY1: size - this.props.progressWidth, 75 | endX1: size / 2, 76 | endY1: size - this.props.progressWidth, 77 | centerW: centerW, 78 | marginTop: marginTop, 79 | marginLeft: marginLeft, 80 | target0: null, 81 | target1: null, 82 | }; 83 | } 84 | 85 | componentDidMount() { 86 | 87 | this.changeProgress(this.props.progress, this.props.totalNum); 88 | 89 | // console.log(Tag,"mount "+this.refs['cricleMain'].width); 90 | } 91 | 92 | /** 93 | * 传入进度值 94 | * @param progress 95 | * @param totalNum 96 | */ 97 | changeProgress(progress, totalNum) { 98 | let degress = progress / totalNum * 360; 99 | let target1 = null; 100 | //先计算 右边的 101 | let target = null; 102 | target = calTargetXY(progress, totalNum, 103 | this.state.startX, this.state.startY, this.state.originR); 104 | 105 | if (degress > 180) { 106 | //在计算左边的 107 | target1 = calTargetXY1(degress, this.state.startX1, this.state.startY1, this.state.originR); 108 | //log(Tag, "target1 " + target1); 109 | } 110 | 111 | if(target==null){ 112 | return; 113 | } 114 | if(degress>180&& target1==null){ 115 | return; 116 | } 117 | 118 | //console.log(Tag, "target " + target); 119 | // 初始状态 120 | this.setState({ 121 | target0: target, 122 | target1: target1, 123 | endX: target[0], 124 | endY: target[1], 125 | endX1: target1 != null ? target1[0] : 0, 126 | endY1: target1 != null ? target1[1] : 0, 127 | }); 128 | 129 | 130 | } 131 | 132 | componentWillReceiveProps(nextProps) { 133 | if (nextProps != this.props) { 134 | this.changeProgress(nextProps.progress, nextProps.totalNum); 135 | } 136 | } 137 | 138 | shouldComponentUpdate(nextProps, nexStatus) { 139 | // console.log('CP shouldComponentUpdate '); 140 | if (nexStatus.target0 != this.state.target0 141 | || nexStatus.target1 != this.state.target1) { 142 | return true; 143 | } 144 | // console.log(' false'); 145 | return false; 146 | } 147 | 148 | /** 149 | * 底部基准的两个圆弧 150 | * @param flag 151 | * @returns {*|{index, routes}|NavigationState|ByteVector|Number} 152 | */ 153 | getBase(flag) { 154 | if (flag == 0) { 155 | let pushStr = "M{0},{1} A{2},{3} 0 {4},{5} {6},{7}"; 156 | let result = pushStr.format(this.state.startX, this.state.startY, this.state.originR, this.state.originR, 157 | 0, 1, this.state.startX1, this.state.startY1); 158 | return new Path().push(result); 159 | } else { 160 | let pushStr = "M{0},{1} A{2},{3} 0 {4},{5} {6},{7}"; 161 | let result = pushStr.format(this.state.startX1, this.state.startY1, this.state.originR, this.state.originR, 162 | 0, 1, this.state.startX, this.state.startY); 163 | return new Path().push(result); 164 | } 165 | } 166 | 167 | //中间子View空出来的位置 168 | getCenterView() { 169 | if (this.props.centerViewMode) { 170 | 171 | 172 | return ( 173 | 179 | {this.props.children} 180 | 181 | ); 182 | } else { 183 | return null; 184 | } 185 | } 186 | 187 | render() { 188 | // //下面arcTo和Push效果明明一样的 可以是绘制效果不一样 懵逼了 push才是想要的效果 超级不理解 189 | // let p = "A25,25 0 0,1 25,50".replace(/(\.\d+)(?=\-?\.)/ig, '$1,') //-.3-.575 => -.3,-.575 190 | // .match(/[a-df-z]|[\-+]?(?:[\d\.]e[\-+]?|[^\s\-+,a-z])+/ig); 191 | // console.log(p); 192 | // let i = 1; 193 | // console.log(p[i + 5], p[i + 6], p[i], p[i + 1], p[i + 3], !+p[i + 4], +p[i + 2]); 194 | // 195 | // const path = new Path() 196 | // .moveTo(25, 0) 197 | // .push() 198 | // .arcTo(p[i + 5], p[i + 6], p[i], p[i + 1], p[i + 3], !+p[i + 4], +p[i + 2]); 199 | 200 | const path0 = this.getBase(0); 201 | const path00 = this.getBase(1); 202 | 203 | let pushStr = "M{0},{1} A{2},{3} 0 {4},{5} {6},{7}"; 204 | let result = pushStr.format(this.state.startX, this.state.startY, this.state.originR, this.state.originR, 205 | 0, 1, this.state.endX, this.state.endY); 206 | // console.log(result); 207 | 208 | const path = new Path() 209 | .push(result); 210 | 211 | let pushStr1 = "M{0},{1} A{2},{3} 0 {4},{5} {6},{7}"; 212 | let path1 = new Path(); 213 | if (this.state.endX1 > 0 && this.state.endY1 > 0) { 214 | let result1 = pushStr1.format(this.state.startX1, this.state.startY1, this.state.originR, this.state.originR, 215 | 0, 1, this.state.endX1, this.state.endY1); 216 | // console.log(result1); 217 | path1.push(result1); 218 | } 219 | return ( 220 | 221 | 222 | 223 | 224 | 226 | 228 | 229 | 230 | 231 | 232 | {this.getCenterView()} 233 | 234 | 235 | ); 236 | }; 237 | } 238 | 239 | const myStyles = StyleSheet.create({ 240 | 241 | centerViewStyle: { 242 | position: 'absolute', 243 | } 244 | }); 245 | 246 | /** 247 | * 计算目的坐标位置 右边 <180度的计算 248 | * @param progress 249 | * @param total 250 | * @param startX 251 | * @param startY 252 | */ 253 | function calTargetXY(progress, total, startX, startY, radius) { 254 | let degress = progress / total * 360; 255 | if (degress > 180) { 256 | //log(Tag, '强制 degress -> 180'); 257 | degress = 180; 258 | } 259 | //log(Tag, "开始位置 " + startX + " " + startY + " r: " + radius + " degress " + degress); 260 | let target = []; 261 | if (degress <= 90) { 262 | degress = degress * 2 * Math.PI / 360; 263 | // log(Tag, "sin " + Math.sin(degress)); 264 | let endx = startX + radius * Math.sin(degress); 265 | let endy = startY + radius - radius * Math.cos(degress); 266 | target.push(endx); 267 | target.push(endy); 268 | return target; 269 | } 270 | else if (degress <= 180) { 271 | degress = degress - 90; 272 | degress = degress * 2 * Math.PI / 360; 273 | // log(Tag, "sin " + Math.sin(degress)); 274 | let endx = startX + radius * Math.cos(degress); 275 | let endy = startY + radius + radius * Math.sin(degress); 276 | target.push(endx); 277 | target.push(endy); 278 | return target; 279 | } 280 | return null; 281 | } 282 | 283 | /** 284 | * 左边圆的计算 >180度的计算 285 | * @param degress 286 | * @param startX 287 | * @param startY 288 | * @param radius 289 | */ 290 | function calTargetXY1(degress, startX, startY, radius) { 291 | let target = []; 292 | //log(Tag, "开始位置1 " + startX + " " + startY + " r: " + radius + " degress " + degress); 293 | if (degress > 360) { 294 | degress = 360; 295 | } 296 | if (degress <= 270) { 297 | degress = degress - 180; 298 | degress = degress * 2 * Math.PI / 360; 299 | // log(Tag, Math.sin(degress)); 300 | let endx = startX - radius * Math.sin(degress); 301 | let endy = startY - ( radius - +radius * Math.cos(degress)); 302 | target.push(endx); 303 | target.push(endy); 304 | return target; 305 | } else if (degress <= 360) { 306 | degress = degress - 270; 307 | degress = degress * 2 * Math.PI / 360; 308 | let endx = startX - radius * Math.cos(degress); 309 | let endy = startY - radius - radius * Math.sin(degress); 310 | target.push(endx); 311 | target.push(endy); 312 | return target; 313 | } 314 | } 315 | 316 | 317 | //字符串的格式化 318 | String.prototype.format = function (args) { 319 | var result = this; 320 | if (arguments.length < 1) { 321 | return result; 322 | } 323 | var data = arguments; //如果模板参数是数组 324 | if (arguments.length == 1 && typeof (args) == "object") { 325 | //如果模板参数是对象 326 | data = args; 327 | } 328 | for (var key in data) { 329 | var value = data[key]; 330 | if (undefined != value) { 331 | result = result.replace("{" + key + "}", value); 332 | } 333 | } 334 | return result; 335 | }; 336 | 337 | 338 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 67 | 68 | 69 | 71 | 72 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | true 92 | DEFINITION_ORDER 93 | 94 | 95 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 123 | 124 | 127 | 128 | 129 | 130 | 133 | 134 | 137 | 138 | 141 | 142 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 205 | 206 | project 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | project 223 | 224 | 225 | true 226 | 227 | 228 | 229 | DIRECTORY 230 | 231 | false 232 | 233 | 234 | 235 | 236 | 238 | 239 | 240 | 241 | 1481980541449 242 | 252 | 253 | 1482117481377 254 | 259 | 260 | 1482117634220 261 | 266 | 267 | 1482127394813 268 | 273 | 276 | 277 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 305 | 306 | 309 | 312 | 313 | 314 | 316 | 317 | 318 | 319 | 320 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | --------------------------------------------------------------------------------