0

I am trying to create an interpolation on opacity. I create the clock, and decide the start time and end time of the animation. I interpolate it so it starts at 0, however my view is visible. Do you know why it's visible? Is it the clock is created not at default of 0 but of current time? Is it possible to initialize my animStartTime at the same value as clock?

Here is an expo showing the problem and code and screenshot below. We see a black square of 48x48. It should be invisible but its at full 100% opacity.

https://snack.expo.io/@noitidart/reanimated-interpolation-not-initially-invisible

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Reanimated from 'react-native-reanimated';

export default function App() {
  const animClock = new Reanimated.Clock();

  // determine the times it will run from
  const duration = 1400;
  const animStartTime = new Reanimated.Value(0);
  const animEndTime = Reanimated.add(animStartTime, duration);

  // create the opacity
  const animFrom = new Reanimated.Value(0);
  const animTo = new Reanimated.Value(1);
  const opacity = Reanimated.interpolate(animClock, {
    inputRange: [animStartTime, animEndTime],
    outputRange: [animFrom, animTo],
    extrapolate: Reanimated.Extrapolate.CLAMP,
  });

  return (
    <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
      <Reanimated.View
        style={{ width: 48, height: 48, backgroundColor: 'black', opacity }}
      />
    </View>
  );
}

enter image description here

Progman
  • 16,827
  • 6
  • 33
  • 48
Noitidart
  • 35,443
  • 37
  • 154
  • 323

1 Answers1

0

I modified some part of your code and you can see it there

enter image description here

Leri Gogsadze
  • 2,958
  • 2
  • 15
  • 24
  • Thank you, I'm looking at diff now, its quite a few changes. Do you know what exactly fixed it. I'm still diffing and experimenting. – Noitidart Mar 01 '21 at 15:16
  • @Noitidart Tell me which part is unclear for you and I'll explain it – Leri Gogsadze Mar 01 '21 at 15:26
  • Thanks, so I commented out the `useCode` block, and your code has same issue as mine. Before the animation runs, the block is at opacity 1. It should be 0. Is it possible to fix this? – Noitidart Mar 01 '21 at 16:01
  • 1
    Can you share snack? – Leri Gogsadze Mar 01 '21 at 16:21
  • Take a look at a great tutorial [here](https://codedaily.io/courses/7/React-Native-Reanimated-Fundamentals/132). There is explained in detail how reanimated works – Leri Gogsadze Mar 01 '21 at 16:37
  • Thank you Leri for trying to help. My original snack has the problem. Also in your snack if you just comment out the "useCode" block you will see the rectangle on your screen with opacity 1. It should be opacity 0 to start. – Noitidart Mar 01 '21 at 17:05
  • I completely removed `useCode` block entirely but the app works as expected, `useCode ` just detects when the animation is finished and stops the timer – Leri Gogsadze Mar 01 '21 at 17:13