Closed m-bert closed 4 days ago
This PR adds support for custom layout animations created via Keyframe on web.
Keyframe
[!IMPORTANT] This PR replaces #5277
Tested on example app and the following code snippet:
Summary
This PR adds support for custom layout animations created via
Keyframe
on web.Test plan
Tested on example app and the following code snippet:
Test code
```jsx import { StyleSheet, View, Text, Pressable } from 'react-native'; import React, { useState } from 'react'; import Animated, { Easing, Keyframe } from 'react-native-reanimated'; const entering = new Keyframe({ 0: { transform: [ { translateX: -500 }, { translateY: -300 }, { scale: 1.25 }, { skewY: '25deg' }, ], opacity: 0.3, easing: Easing.cubic, }, 70: { transform: [{ translateX: 250 }, { translateY: 100 }, { scale: 1.25 }], opacity: 0.7, }, }); const exiting = new Keyframe({ 0: { easing: Easing.exp, }, 100: { transform: [ { translateX: 700 }, { translateY: 250 }, { scale: 0.3 }, { rotate: '225deg' }, ], opacity: 0, }, }); export default function EmptyExample() { const [show, setShow] = useState(true); return (