Javascript 根据点击量逐渐模糊图片（React Native）

我想根据“模糊图片”按钮的点击次数逐渐模糊图片。例如：如果用户点击一次图片会模糊一点，那么第二次点击会模糊一点，依此类推。。。 是否有一个图书馆可以做到这一点，否则我如何才能做到这一点

---

我想在React Native中这样做，但如果您知道如何使用另一种语言，我愿意接受任何建议。

图像组件有一个名为“blurRadius”的属性，您可以在触摸时触发该属性（如果目标是图像，则必须使用类似TouchableHighlight的可触摸容器）

检查下面的示例，它与您描述的完全一致；我使用状态来跟踪模糊级别

import React，{Component}来自“React”；
从“react native”导入{TouchableHighlight，Image，View}；
类应用程序扩展组件{
声明：{
半径：数字
}
建造师（道具）{
超级（道具）；
this.state={radius:0}；
}
_imagePressed（）{
this.setState（{radius:this.state.radius+4}）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

太棒了！使用模糊以外的东西怎么样。例如，像拼图效果这样的东西，每次点击都会在图片顶部添加一块拼图？有一系列用于图像过滤和动画的组件，可能有一些类似于拼图动画的东西。如果我能找到类似的东西，我会搜索，但我找不到如果你对react原生图像拼图动画特别感兴趣，这听起来像一个很好的问题如果你不介意，请竖起大拇指，让更多的人可以看到它：

import React, { Component } from "react";
import { TouchableHighlight, Image, View } from "react-native";

class App extends Component {
  state: {
    radius: number
  }
  constructor(props){
    super(props);
    this.state = { radius: 0 };
  }


  _imagePressed() {
    this.setState({ radius: this.state.radius + 4 });

  }

  render() {
    return (
      <View>
        <TouchableHighlight onPress={this._imagePressed.bind(this)}>
          <Image
            blurRadius={this.state.radius}
            style={{ width: 320, height: 240 }}
            source={{
              uri:
                "https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg"
            }}
            resizeMode="contain"
          />
        </TouchableHighlight>
      </View>
    );
  }
}

export default App;