Создание простой анимации в React-Pose

Question

Создание простой анимации в React-Pose

Если вы проверите исходный код для RayCaster в

https://github.com/mrdoob/three.js/blob/master/src/core/Raycaster.js

оказалось бы, что функция intersectObject проверяет только те объекты, которые являются экземплярами THREE.Particle или THREE.Mesh, а не THREE.Sprite. Возможно, это связано с тем, что спрайты могут быть настроены на использование экранных координат, и поэтому луч, который проецируется в вашу 3D-сцену, не имеет смысла в этой ситуации или если он помещается в сцену, так как изображение спрайта всегда обращено к камере, t, как ваша стандартная 3d-сетка.

Возможно, вы могли бы прикрепить PlaneGeometry или очень тонкую CubeGeometry к положению вашего спрайта, установить его вращение на вращение камеры так, чтобы оно всегда было параллельным вид плоскости камеры, такой как спрайт, а затем проверить пересечения с сеткой вместо этого?

1

reactjs animation

задан Jon 23 February 2019 в 21:28

1 ответ

Другие вопросы по тегам:

reactjs animation

Похожие вопросы:

score 0 · Answer 1

Были две основные проблемы с вашим кодом:

duration не поддерживает строковые значения, такие как «2s». Я изменил это на 2000.
Вы определяли свои компоненты (например, используя styled.div, posed.div) внутри своей функции рендеринга. Это привело к тому, что React рассматривал эти компоненты как уникальные типы компонентов при каждом повторном рендеринге. Это приводит к тому, что эти компоненты демонтируются и монтируются при каждом рендеринге, что препятствует работе переходов, поскольку элемент не изменяется - вместо этого он заменяется новым компонентом другого типа.

Ниже приведена рабочая версия вашего кода, которая перемещает определения компонентов за пределы функции рендеринга (UpFor). Вы можете поиграть с ним в предоставленной песочнице.

import React, { useState } from "react";
import styled from "styled-components";
import posed from "react-pose";

const Container = styled.div`
  font-family: "Baumans";
  font-size: 220px;
  display: flex;
  cursor: pointer;
`;

const Up = styled.div`
  color: #81d6e3;
`;

const Four = styled.div`
  color: #ff101f;
`;
const Fours = styled.div`
  display: flex;
`;
const MirroredFour = posed.div({
  unhovered: { transform: "rotateY(0deg)" },
  hovered: {
    transform: "rotateY(180deg)",
    transition: {
      type: "tween",
      duration: 2000
    }
  }
});

const SecondFour = styled(MirroredFour)`
color: #FF101F
position: absolute;
transform-origin: 67%;
`;

const UpFor = () => {
  const [hovering, setHovering] = useState(false);

  console.log("hovering", hovering);
  return (
    <Container
      onMouseEnter={() => {
        setHovering(true);
      }}
      onMouseLeave={() => {
        setHovering(false);
      }}
    >
      <Up>Up</Up>
      <Fours>
        <Four>4</Four>
        <SecondFour pose={hovering ? "hovered" : "unhovered"}>4</SecondFour>
      </Fours>
    </Container>
  );
};

export default UpFor;