使用react-native-skia在图像上进行着色器转换（按下时）

Question

我对react-native-skia还很陌生，我在图像上应用了灰度着色器，我想在按下时应用这种过渡动画以在灰度和全彩图片之间切换。这是我用来应用灰度效果的代码。

const GRAYSCALE_SHADER = Skia.RuntimeEffect.Make(`
uniform shader image;

half4 main(in vec2 xy)
{
  //Grabbing the texture color at the current pixel.
  vec4 texColor = image.eval(xy).rgba;
  
  vec3 gray_scale = vec3(dot(vec3(0.5, 0.2, 0.2), texColor.rgb));
      
  // Output to screen
  return vec4(gray_scale, texColor.a) ;
}
`)!;

const image = useImage('../path/to/image.png');

return (
    <Canvas
      style={{ flex: 1 }}
    >
      <Image
        image={image}
        fit="cover"
        x={0}
        y={0}
        width={200}
        height={200}
      >
        <RuntimeShader source={GRAYSCALE_SHADER} />
      </Image>
    </Canvas>
)

Answer 1

    const TRANSITION_SHADER = Skia.RuntimeEffect.Make(`
    uniform float smoothness; // = 0.3
    uniform bool opening; // = true
    
    const vec2 center = vec2(0.5, 0.5);
    const float SQRT_2 = 1.414213562373;
    
    vec4 transition (vec2 uv) {
      float x = opening ? progress : 1.-progress;
      float m = smoothstep(-smoothness, 0.0, SQRT_2*distance(center, uv) - x*(1.+smoothness));
      return mix(getFromColor(uv), getToColor(uv), opening ? 1.-m : m);
    }
    `)!;




------------------

 

       const progress = useSharedValue(0.0);
        
        const getFromColor = (xy) => {
          const fromColor = Skia.Paint.Make();
          fromColor.color = Skia.Color.FromRGBA(0, 0, 0, 1); // Set the from color to black
          return fromColor;
        }
        
        const getToColor = (xy) => {
          const toColor = Skia.Paint.Make();
          toColor.color = Skia.Color.FromRGBA(1, 1, 1, 1); // Set the to color to white
          return toColor;
        }
        
        const transitionShader = useDerivedValue(() => {
          const fromColor =Skia.Shader.Make(getFromColor, []);
          const toColor = Skia.Shader.Make(getToColor, []);
          const transition = TRANSITION_SHADER.makeShader({ smoothness: 0.3, opening: true });
          return Skia.Shader.Make(transition, [fromColor, toColor]);
        });
    
    
    -----------------------
    this one for image 
    
    <Image
      image={image}
      fit="cover"
      x={0}
      y={0}
      width={200}
      height={200}
      shader={transitionShader}
    />

---------------------------------

    const [isPressed, setIsPressed] = useState(false);
    
    const pressHandler = () => {
      setIsPressed(!isPressed);
      if (isPressed) {
        progress.value = 0;
      } else {
        progress.value = withTiming(1, { duration: 500 });
      }
    };
    
    <Image
      image={image}
      fit="cover"
      x={0}
      y={0}
      width={200}
      height={200}
      shader={transitionShader}
      onPress={pressHandler}
    />