[Web LA] Add withInitialValues modifier

[m-bert]

Summary

This PR adds withInitialValues into web layout animations.

Note

This implementation required #6259. You can find more information in mentioned PR.

Implementation

Implementation is based on modifying first step in keyframe. First we obtain default animation style and create its copy using structuredClone. We also add px suffix into translate and perspective in initialValues. Then we can modify styles of animation.

transform

Here situation is more complicated. First, if transform was not specified in the predefined styles, we can simply assign to it the one provided in initialValues. Otherwise we have to merge incoming transform with predefined one.

To do this, we use Map that will contain final transform. First we iterate through predefined transforms, adding each property with its value. Then we perform second iteration, this time on transform from initialValues. In that case we will either add new property, or override existing one. Finally we convert Map back to array of objects using Array.from method.

Other props

Since layout animations on web do not change other props directly, we can simply assign them into styles object.

Note

Animation that has withInitialValues modifier is treated like a custom animation and undergoes whole process of adding it into DOM and removing it when it finishes.

Example

Animation code

<Animated.View
  entering={FadeIn.withInitialValues({
    transform: [{ scale: 0.5 }, { skewX: '-35deg' }],
  })}
  exiting={FadeOut.duration(500).withInitialValues({
    opacity: 0.75,
    transform: [{ scale: 2 }, { rotateY: '-7rad' }, { skewX: '35deg' }],
  })}
  style={styles.box}
/>

Nagranie.z.ekranu.2024-07-11.o.16.27.21.mov

Test plan

Tested on the following code

import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
import { Button, StyleSheet, View } from 'react-native';

import React from 'react';

export default function BasicLayoutAnimation() {
  const [visible, setVisible] = React.useState(true);

  return (
    <View style={styles.container}>
      <Button onPress={() => setVisible(!visible)} title="Create/Remove" />
      {visible && (
        <Animated.View
          entering={FadeIn.withInitialValues({
            transform: [{ scale: 0.5 }, { skewX: '-35deg' }],
          })}
          exiting={FadeOut.duration(500).withInitialValues({
            opacity: 0.75,
            transform: [{ scale: 2 }, { rotateY: '-7rad' }, { skewX: '35deg' }],
          })}
          style={styles.box}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 300,
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#b58df1',
    borderRadius: 10,

    marginTop: 20,
  },
});

[piaskowyk]

Just change the logic responsible by opacity and you can merge it 👍