Expo React Native SVG - 3 行动画答案

【问题标题】：Expo React Native SVG - animation of 3 linesExpo React Native SVG - 3 行动画
【发布时间】：2018-02-24 21:32:05
【问题描述】：

我有一个自己制作的汉堡菜单，需要帮助才能在 onPress={} 事件中对其进行动画处理，

<Svg style={svgStyles}>
<Line
    x1={4}
    y1={6}
    x2={20}
    y2={6}
    stroke="white"
    strokeWidth={2}
    strokeLinecap="round"
/>
<Line
    x1={4}
    y1={12}
    x2={20}
    y2={12}
    stroke="white"
    strokeWidth={2}
    strokeLinecap="round"
/>
<Line
    x1={4}
    y1={18}
    x2={20}
    y2={18}
    stroke="white"
    strokeWidth={2}
    strokeLinecap="round"
/>

我想让中间线收缩到中心，然后同时让第一条线下降到 y2={18} 和第三条线下降到 y2={6} 形成一个十字。这应该发生在 onPress 函数上...... “setNativeProps”类型的作品，但不是 onPress 功能。你们将如何实现这一点？感谢您的帮助！万事如意！

【问题讨论】：

标签： react-native expo react-animated

【解决方案1】：

您可以使用以下代码执行此操作。此外，我还提供了我的 git 存储库的链接，其中包含您的代码作为运行示例。您还可以查看其他 SVG 和动画示例。

import React from 'react';
import { View, StyleSheet, Text, Animated, TouchableOpacity } from 'react-native';
import { Svg } from 'expo'; // Supported builtin module
const { Line } = Svg;

class Burger extends React.Component {

    constructor () {
        super();
        this.state = {
            _lineOne: new Animated.Value(6),
            _lineTwo_x1: new Animated.Value(4),
            _lineThree: new Animated.Value(18),
        }
    }

    invokeAnimation = () => {        
        Animated.parallel([
            Animated.timing(this.state._lineOne, {
            toValue: 18,
            duration: 1500,
            }),
            Animated.timing(this.state._lineTwo_x1, {
                toValue: 12,
                duration: 1500,
            }),
            Animated.timing(this.state._lineThree, {
                toValue: 6,
                duration: 1500,
            }),
        ]).start();
    }

    componentDidMount() {
        this.state._lineOne.addListener( (progress) => {
            this._lineOne.setNativeProps({ y2: progress.value.toString() });
        });
        this.state._lineThree.addListener( (progress) => {
            this._lineThree.setNativeProps({ y2: progress.value.toString() });
        });
        this.state._lineTwo_x1.addListener( (progress) => {
            this._lineTwo.setNativeProps({ 
                x1: progress.value.toString(),
                x2:  (24 - progress.value).toString(),
            });
        });
    }

    render() {
        return (
            <TouchableOpacity style={styles.container} onPress={() => this.invokeAnimation()}>
                <Svg fill="#000" height={24} width={24}>
                    <Line
                        x1={4}
                        y1={6}
                        x2={20}
                        y2={6}
                        stroke="#000000"
                        strokeWidth={2}
                        strokeLinecap="round"
                        ref={ ref => this._lineOne = ref }
                    />
                    <Line
                        x1={4}
                        y1={12}
                        x2={20}
                        y2={12}
                        stroke="#000000"
                        strokeWidth={2}
                        strokeLinecap="round"
                        ref={ ref => this._lineTwo = ref }
                    />
                    <Line
                        x1={4}
                        y1={18}
                        x2={20}
                        y2={18}
                        stroke="#000000"
                        strokeWidth={2}
                        strokeLinecap="round"
                        ref={ ref => this._lineThree = ref }
                    />
                </Svg>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10
    },
});

export default Burger;

https://github.com/pankaj1433/React-Native-SVG-Animation/blob/master/src/components/animationExample/burger.js

【讨论】：