React Native SVG Animated 绘制动画

 
 

  
  
转自：React Native SVG描边动画
  
  
stroke属性

  
  
stroke 定义描边颜色

  
  
stroke="#0078ff"

  
  
strokeWidth 定义描边的宽度
  
  
strokeWidth="3"

  
  
创建虚线时候用到的属性：
  
  
strokeDasharray 创建虚线
  
  
// 假设一个‘空格’5像素，一个‘_’5像素

strokeDasharray="5"  
// 看到的是 _ _ _ _ 即5像素实线，5像素空白，5像素实线，.... 循环

strokeDasharray="5,10"  
// 看到的是 _  _  _  _  5像素实线，10像素空白...循环

  
  
strokeDashoffset 虚线的位移
  
  
strokeDasharray="5"
strokeDashoffset="1"
// 看到的第一个_会往左边挪动1像素

  
  
描边动画
  
  
有足够长的空白，控制位移，让空白的位置移动，实线的位置就会慢慢显示出来。
假设灰色区域宽度300：
  
  

   
   

    
    

     
     
    
    
   
   
   
   

    
    Untitled 3.png
   
   
  
  
  
  

  
  
如果strokeDashoffset从300到0连续变化，就是描边了
  
  
有一小段实线在奔跑
  
  
有足够长的空白，有一小段实线，改变strokeDashoffset控制空白的移动
  
  

   
   

    
    

     
     
    
    
   
   
   
   

    
    Untitled 2.png
   
   
  
  
  
  
如果strokeDashoffset从20到320连续变化，会看到小段实线从右向左滑动过来。画曲线就可以跑曲线了。
  
  

   
   

    
    

     
     
    
    
   
   
   
   

    
    跑个栗子
   
   
  
  
  
  
在react-native里，可以用animated改变strokeDashoffset的值来做动画。
另：类似sketch等软件可以绘矢量图并存成svg格式，基本上改改就能用了比较方便。
  
  
rn
  
  
npm install --save react-native-svg

  
  
使用react-native里的ART的话，strokeDasharray和strokeDashoffset写在strokeDash属性里。
一个不是例子的栗子:
  
  
import {
    Animated 
    ...
} from 'react-native';

import Svg, {
    G,
    Path
} from 'react-native-svg';

// 注意要用 Animated.createAnimatedComponent 让组件可动画化
let AnimatePath = Animated.createAnimatedComponent(Path);

...
    constructor (props) {
        super(props);

        this.state = {
            strokeDashOffset: new Animated.Value(38)
        }
    }

    changeStroke = () => {
        // 使用炫酷的animated让小线段愉悦的奔跑��
        Animated.spring(
            this.state.strokeDashOffset,
            {
                toValue: 243
            }
        ).start();
    };

    render () {

        return (
            <View>
                ...
                <TouchableWithoutFeedback
                    onPress={this.changeStroke}
                >
                    <Svg
                        height="100"
                         width="100"
                    >
                        <G fill="none">
                            <AnimatePath
                                d={一坨路径}
                                stroke="#0078FF"
                                strokeWidth="3"
                                strokeDasharray="28,215"
                                strokeDashoffset={this.state.strokeDashOffset}
                               />
                           </G>
                      </Svg>
                </TouchableWithoutFeedback>
            </View>
        )
    }