Нема описа

animate-text.js 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. /**
  2. * @author wkh237
  3. * @version 0.1.1
  4. */
  5. // @flow
  6. import React, { Component } from 'react';
  7. import {
  8. Text,
  9. View
  10. } from 'react-native';
  11. import Timer from 'react-timer-mixin';
  12. const HALF_RAD = Math.PI/2
  13. export default class AnimateNumber extends Component {
  14. props : {
  15. countBy? : ?number,
  16. interval? : ?number,
  17. steps? : ?number,
  18. value : number,
  19. timing : 'linear' | 'easeOut' | 'easeIn' | () => number,
  20. formatter : () => {},
  21. onProgress : () => {},
  22. onFinish : () => {}
  23. };
  24. static defaultProps = {
  25. interval : 14,
  26. timing : 'linear',
  27. steps : 45,
  28. value : 0,
  29. formatter : (val) => val,
  30. onFinish : () => {}
  31. };
  32. static TimingFunctions = {
  33. linear : (interval:number, progress:number):number => {
  34. return interval
  35. },
  36. easeOut : (interval:number, progress:number):number => {
  37. return interval * Math.sin(HALF_RAD*progress) * 5
  38. },
  39. easeIn : (interval:number, progress:number):number => {
  40. return interval * Math.sin((HALF_RAD - HALF_RAD*progress)) * 5
  41. },
  42. };
  43. state : {
  44. value? : ?number,
  45. displayValue? : ?number
  46. };
  47. /**
  48. * Animation direction, true means positive, false means negative.
  49. * @type {bool}
  50. */
  51. direction : bool;
  52. /**
  53. * Start value of last animation.
  54. * @type {number}
  55. */
  56. startFrom : number;
  57. /**
  58. * End value of last animation.
  59. * @type {number}
  60. */
  61. endWith : number;
  62. constructor(props:any) {
  63. super(props);
  64. // default values of state and non-state variables
  65. this.state = {
  66. value : 0,
  67. displayValue : 0
  68. }
  69. this.dirty = false;
  70. this.startFrom = 0;
  71. this.endWith = 0;
  72. }
  73. componentDidMount() {
  74. this.startFrom = this.state.value
  75. this.endWith = this.props.value
  76. this.dirty = true
  77. this.startAnimate()
  78. }
  79. componentWillUpdate(nextProps, nextState) {
  80. // check if start an animation
  81. if(this.props.value !== nextProps.value) {
  82. this.startFrom = this.props.value
  83. this.endWith = nextProps.value
  84. this.dirty = true
  85. this.startAnimate()
  86. return
  87. }
  88. // Check if iterate animation frame
  89. if(!this.dirty) {
  90. return
  91. }
  92. if (this.direction === true) {
  93. if(parseFloat(this.state.value) <= parseFloat(this.props.value)) {
  94. this.startAnimate();
  95. }
  96. }
  97. else if(this.direction === false){
  98. if (parseFloat(this.state.value) >= parseFloat(this.props.value)) {
  99. this.startAnimate();
  100. }
  101. }
  102. }
  103. render() {
  104. return (
  105. <Text {...this.props}>
  106. {this.state.displayValue}
  107. </Text>)
  108. }
  109. startAnimate() {
  110. let progress = this.getAnimationProgress()
  111. Timer.setTimeout(() => {
  112. let value = (this.endWith - this.startFrom)/this.props.steps
  113. if(this.props.countBy)
  114. value = Math.sign(value)*Math.abs(this.props.countBy)
  115. let total = parseFloat(this.state.value) + parseFloat(value)
  116. this.direction = (value > 0)
  117. // animation terminate conditions
  118. if (((this.direction) ^ (total <= this.endWith)) === 1) {
  119. this.dirty = false
  120. total = this.endWith
  121. this.props.onFinish(total, this.props.formatter(total))
  122. }
  123. if(this.props.onProgress)
  124. this.props.onProgress(this.state.value, total)
  125. this.setState({
  126. value : total,
  127. displayValue : this.props.formatter(total)
  128. })
  129. }, this.getTimingFunction(this.props.interval, progress))
  130. }
  131. getAnimationProgress():number {
  132. return (this.state.value - this.startFrom) / (this.endWith - this.startFrom)
  133. }
  134. getTimingFunction(interval:number, progress:number) {
  135. if(typeof this.props.timing === 'string') {
  136. let fn = AnimateNumber.TimingFunctions[this.props.timing]
  137. return fn(interval, progress)
  138. } else if(typeof this.props.timing === 'function')
  139. return this.props.timing(interval, progress)
  140. else
  141. return AnimateNumber.TimingFunctions['linear'](interval, progress)
  142. }
  143. }