嘿大家我想要达到类似的效果：
https://kimmobrunfeldt.github.io/progressbar.js
(圈一个)
(圈一个)
在使用setNativeProps方法之前,我能够成功动画一些svg元素,但这次使用短划线长度失败了,下面是一个演示当前行为的gif(圆圈在接收到新道具时从完全变为半满)：
本质上我试图动画这个变化,而不是只是轻弹,下面是这个矩形进度条的完整源,基本的想法是使用Circle和strokeDasharray为了显示循环进度,它接收currentExp和nextExp作为字符的值经验,以计算他们到达下一个lvl之前剩余的百分比.
组件使用非常标准的元素集,除了样式的样式和样式组件库中的少量维度/动画和颜色道具.
注意：项目从expo.io导入此库,但它基本上是react-native-svg
import React,{ Component } from "react";
import PropTypes from "prop-types";
import styled from "styled-components/native";
import { Animated } from "react-native";
import { Svg } from "expo";
import { colour,dimension,animation } from "../Styles";
const { Circle,Defs,LinearGradient,Stop } = Svg;
const SSvg = styled(Svg)`
transform: rotate(90deg);
margin-left: ${dimension.ExperienceCircleMarginLeft};
margin-top: ${dimension.ExperienceCircleMarginTop};
`;
class ExperienceCircle extends Component {
// -- prop validation ----------------------------------------------------- //
static propTypes = {
nextExp: PropTypes.number.isrequired,currentExp: PropTypes.number.isrequired
};
// -- state --------------------------------------------------------------- //
state = {
percentage: new Animated.Value(0)
};
// -- methods ------------------------------------------------------------- //
componentDidMount() {
this.state.percentage.addListener(percentage => {
const circumference = dimension.ExperienceCircleRadius * 2 * Math.PI;
const dashLength = percentage.value * circumference;
this.circle.setNativeProps({
strokeDasharray: [dashLength,circumference]
});
});
this._onAnimateExp(this.props.nextExp,this.props.currentExp);
}
componentWillReceiveProps({ nextExp,currentExp }) {
this._onAnimateExp(currentExp,nextExp);
}
_onAnimateExp = (currentExp,nextExp) => {
const percentage = currentExp / nextExp;
Animated.timing(this.state.percentage,{
toValue: percentage,duration: animation.duration.long,easing: animation.eaSEOut
}).start();
};
// -- render -------------------------------------------------------------- //
render() {
const { ...props } = this.props;
// const circumference = dimension.ExperienceCircleRadius * 2 * Math.PI;
// const dashLength = this.state.percentage * circumference;
return (
<SSvg
width={dimension.ExperienceCircleWidthHeight}
height={dimension.ExperienceCircleWidthHeight}
{...props}
>
<Defs>
<LinearGradient
id="ExperienceCircle-gradient"
x1="0"
y1="0"
x2="0"
y2={dimension.ExperienceCircleWidthHeight * 2}
>
<Stop
offset="0"
stopColor={`rgb(${colour.lightGreen})`}
stopOpacity="1"
/>
<Stop
offset="0.5"
stopColor={`rgb(${colour.green})`}
stopOpacity="1"
/>
</LinearGradient>
</Defs>
<Circle
ref={x => (this.circle = x)}
cx={dimension.ExperienceCircleWidthHeight / 2}
cy={dimension.ExperienceCircleWidthHeight / 2}
r={dimension.ExperienceCircleRadius}
stroke="url(#ExperienceCircle-gradient)"
strokeWidth={dimension.ExperienceCircleThickness}
fill="transparent"
strokeDasharray={[0,0]}
strokeLinecap="round"
/>
</SSvg>
);
}
}
export default ExperienceCircle;
更新：扩展讨论和更多示例(针对不同元素的类似方法)可通过发布到react-native-svg repo的问题获得：https://github.com/react-native-community/react-native-svg/issues/451
解决方法
当你知道SVG输入如何工作时,它实际上非常简单,反应本机SVG(或SVG输入,通常是它不能与角度一起工作)的问题之一,所以当你想要工作时圆形你需要将角度转换为它所需的输入,这可以通过简单地编写一个函数来完成(你必须记住或完全理解转换是如何工作的,这是标准)：
function polarToCartesian(centerX,centerY,radius,angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x,y,startAngle,endAngle){
var start = polarToCartesian(x,endAngle);
var end = polarToCartesian(x,startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M",start.x,start.y,"A",largeArcFlag,end.x,end.y
].join(" ");
return d;
}
现在它很棒,你有一个函数(describeArc),它为你提供描述你的路径所需的完美参数(一个圆弧)：
所以你可以将PATH定义为：
<AnimatedPath d={_d} stroke="red" strokeWidth={5} fill="none"/>
例如,如果您需要半径为R的圆弧在45度到90度之间,请将_d定义为：
_d = describeArc(R,R,45,90);
既然我们知道SVG PATH如何工作的一切,我们可以实现反应原生动画,并定义一个动画状态,如进度：
import React,{Component} from 'react';
import {View,Animated,Easing} from 'react-native';
import Svg,{Circle,Path} from 'react-native-svg';
AnimatedPath = Animated.createAnimatedComponent(Path);
class App extends Component {
constructor() {
super();
this.state = {
progress: new Animated.Value(0),}
}
componentDidMount(){
Animated.timing(this.state.progress,{
toValue:1,duration:1000,}).start()
}
render() {
function polarToCartesian(centerX,angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x,endAngle){
var start = polarToCartesian(x,endAngle);
var end = polarToCartesian(x,startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M",end.y
].join(" ");
return d;
}
let R = 160;
let dRange = [];
let iRange = [];
let steps = 359;
for (var i = 0; i<steps; i++){
dRange.push(describeArc(160,160,i));
iRange.push(i/(steps-1));
}
var _d = this.state.progress.interpolate({
inputRange: iRange,outputRange: dRange
})
return (
<Svg style={{flex: 1}}>
<Circle
cx={R}
cy={R}
r={R}
stroke="green"
strokeWidth="2.5"
fill="green"
/>
{/* X0 Y0 X1 Y1*/}
<AnimatedPath d={_d}
stroke="red" strokeWidth={5} fill="none"/>
</Svg>
);
}
}
export default App;
这个简单的组件可以根据需要使用
>在组件的顶部,我们写道,
AnimatedPath = Animated.createAnimatedComponent(Path);
因为从react-native-svg导入的Path不是本机react-native组件,我们将其转为动画.
>在构造函数中,我们将进度定义为在动画期间应该更改的动画状态.
>在componentDidMount处启动动画过程.
>在render方法的开头,声明定义SVG d参数所需的两个函数(polarToCartesian和describeArc).
>然后在this.state.progress上使用react-native interpolate将this.state.progress中的更改从0插入到1,更改为d参数.但是,这里有两点你应该记住：
1-不同长度的两个弧之间的变化不是线性的,因此从角度0到360的线性插值不能按照您的意愿工作,因此,最好在n度的不同步骤中定义动画(我使用过1度,如果需要,你可以增加或减少它.).
2弧不能继续高达360度(因为它等于0),所以最好以接近但不等于360的程度完成动画(例如359.9)>在返回部分的末尾,描述了UI.
