Animieren transformations Ursprung in React india

Also habe ich ein paar CSS-Animationen, die gegenwärtig in einer Hybrid-App habe ich gemacht:Animieren transformations Ursprung in React india

@keyframes spaceInLeft { 
    0% { 
    opacity: 0; 
    transform-origin: 0% 50%; 
    transform: scale(.2) translate(-20%, 0%); 
    } 

    100% { 
    opacity: 1; 
    transform-origin: 0% 50%; 
    transform: scale(1) translate(0%, 0%); 
    } 
} 

@keyframes spaceOutRight { 
    0% { 
    opacity: 1; 
    transform-origin: 100% 50%; 
    transform: scale(1) translate(0%, 0%); 
    } 

    100% { 
    opacity: 0; 
    transform-origin: 100% 50%; 
    transform: scale(.2) translate(20%, 0%); 
    } 
}

ich dabei bin Portierung sagte App india zu reagieren und ich Habe mit dieser Animation einen Straßenblock getroffen. Wie Sie sehen können, verwendet es den Transform-Ursprung, den React Native nicht bietet.

Zur Zeit habe ich:

Animatable.initializeRegistryWithDefinitions({ 
    spaceInLeft: { 
    from: { 
     opacity: 0, 
     transform: [ 
     { 
      scale: 0.2, 
      translateX: '-20%', 
      translateY: '0%', 
     }, 
     ], 
    }, 

    to: { 
     opacity: 1, 
     transform: [ 
     { 
      scale: 1, 
      translateX: '0%', 
      translateY: '0%', 
     }, 
     ], 
    }, 
    }, 

    position: { 
    from: { 
     transform: [ 
     { 
      translateX: 0, 
      translateY: '50%', 
     }, 
     ], 
    }, 

    to: { 
     transform: [ 
     { 
      translateX: 0, 
      translateY: '50%', 
     }, 
     ], 
    }, 
    }, 
});

ich mich gefragt, ob jemand könnte bitte etwas Licht auf, wie genau implementiere ich diese Änderung genaue Ursprung in der india reagieren?

Wenn es soll hilft etwas wie diese aussehen ...

Scroll to the On the Space section

Quelle

2017-11-07 Alsh

Leider wird der Transform-Ursprung in der nativen Reaktion nicht unterstützt. Früher warst du in der Lage, dies mit einem Matrix-Mathetrick zu tun, der hier gezeigt wird https://commitocracy.com/implementing-foldview-in-react-native-e970011f98b8, aber das scheint nicht mehr zu funktionieren = ( –

@FunkSoulNinja Yeah Ich vermutete, dass, wenn das nicht funktioniert, ich nicht glaube, dass Sie wissen, ob ich die Animation erreichen kann, ohne den Ursprung zu manipulieren? Danke für Ihre Antwort trotzdem. – Alsh

Ich glaube, ich habe nur eine Abhilfe gefunden. Anstatt irgendeine Art von Ursprung zu verwenden, habe ich sie einfach entlang der X-Achse transformiert.

spaceInLeft: { 
    0: { 
     opacity: 0, 
     scale: 0.2, 
     translateX: 0, 
     translateY: 0, 
    }, 

    0.5: { 
     scale: 0.6, 
     translateX: -100, 
     translateY: 0, 
    }, 

    1: { 
     opacity: 1, 
     scale: 1, 
     translateX: 0, 
     translateY: 0, 
    }, 
    },

Ich denke auch, dass ich einen Syntaxfehler mit der Deklaration einer Transformation hinzufügen.

Quelle

2017-11-07 15:49:47 Alsh

Animieren transformations Ursprung in React india

Antwort

Verwandte Themen