插值复杂的反应本机动画

Question

我有一个非常复杂的示例，我想尝试并开始工作，也许数学方面比我更好的人有更好的方法。到目前为止的代码：https://gist.github.com/kyle-ssg/697570a7d5edc0e14cc6967b2e40b7ba。

我有一个容器组件，其比例可以从1缩放到4，而子组件我希望始终保持在完全相同的位置（即似乎也不能缩放），以便可以使用overflow：hidden对其进行掩盖。

我的方法是从本质上抵消比例，并随着父级比例的增加适当地转换x和y。我以为我的方法行得通，因为我可以将动画值从0调整为1，并且可以将宽度，高度和位置调整为任意值，并且起点和终点正是我所期望的

https://ibb.co/TTCkN8M（开始）https://ibb.co/KwKfW4F（完成）

但是，当为0到1之间的值设置动画时，它似乎正确地开始和结束了，但是在它们之间没有适当地设置动画（即，红色正方形保持原位）。 http://g.recordit.co/HPEkMyvVOf.gif

Answer 1

最后我不需要这个，使用react-native-masked-view实现了我想要的。