React Native Reanimated + SVG + пользовательский компонент без анимации

avatar
William Del Giudice
8 августа 2021 в 17:16
297
0
0

Я пытаюсь создать пользовательский компонент svg (ракету), который затем превращаю в анимированный компонент с помощью reanimated, чтобы я мог перемещать ракету по экрану!

Ракета:

    Rocket: class extends React.Component {
        render() {
            return <Path
                origin={[this.props.x, this.props.y]}
                rotation={this.props.rotation !== undefined ? this.props.rotation : 0}
                d={`
                    M ${this.props.x + this.props.length / 4} ${this.props.y + this.props.length / 4}
                    L ${this.props.x + this.props.length / 3} ${this.props.y + this.props.length / 2}
                    L ${this.props.x - this.props.length / 3} ${this.props.y + this.props.length / 2}
                    L ${this.props.x - this.props.length / 4} ${this.props.y + this.props.length / 4}
                    L ${this.props.x - this.props.length / 4} ${this.props.y - this.props.length / 4}
                    C ${this.props.x - this.props.length / 4} ${this.props.y - this.props.length * .575}, ${this.props.x + this.props.length / 4} ${this.props.y - this.props.length * .575}, ${this.props.x + this.props.length / 4} ${this.props.y - this.props.length / 4}
                    Z
                `}
                opacity={this.props.opacity !== undefined ? this.props.opacity : 1}
                fill='white'
            />;
        }
    },

Анимированный компонент ракеты (обертывает ракету):

Здесь я использую два реквизита: data и t.

data: объект, содержащий детали анимации (начальная точка, конечная точка, начальное время, конечное время)

t: SharedValue, использующий метод reanimated withTiming() для перехода от 0 к 1000.


const _AnimatedRocket = createAnimatedComponent(Icons.Rocket); // reanimated component from svg rocket


    Rocket({ data, t }) {
        const duration = data.t2 - data.t1;
        if (duration == 0) return null;

        const animatedProps = useAnimatedProps(() => {
            return {
                opacity: t.value >= data.t1 && t.value <= data.t2 ? 1 : 0,
                x: interpolate(t.value, [data.t1, data.t2], [data.p1.x, data.p2.x]),
                y: interpolate(t.value, [data.t1, data.t2], [data.p1.y, data.p2.y]),
            }
        }, null, SVGAdapter);

        return <_AnimatedRocket animatedProps={animatedProps} />
    },

Затем я управляю компонентом Animated Rocket в главном компоненте, в котором размещены все анимированные компоненты, и управляю ими с помощью одного t.

В результате ракета отображается в исходном положении и остается неподвижной на протяжении всей анимации.

Я воспроизвел результаты, создав анимированные компоненты из традиционных компонентов svg (Путь, Линия, Окружность, G...), и все работает, но как только я анимирую пользовательский компонент, он больше не двигается!

Источник

Ответы (0)