(圈一个)
在使用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
解决方法
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.