Question

我需要使用在图像角落设置的原点（与网络中的变换原点）设置动画，但在React Native中，根据this和{{3}，不支持transform-origin }。

在网络上进行了大量搜索之后，似乎可以使用matrix transform，而this则表明它实际上是可行的（没有动画）。

为了测试matrix transformation是否可以使用动画api，我编写了一个最小的示例，在安装组件后将100x100的正方形图像放大，但是我遇到了这个奇怪的错误。

在NaN的我的初始矩阵数组中插入了一个interpolate，我不知道为什么会这样。

这是源代码：

import React, { Component } from "react";
import { View, Image, StyleSheet, Animated, Easing } from "react-native";

export default class TestMatrixEnlarge extends Component {
  constructor() {
    super();
    this.state = {
      matrix: new Animated.Value(0)
    };
  }

  componentDidMount () {
    Animated.timing(
      this.state.matrix,
      {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear
      }
    ).start()
  }

  render() {
    const enlargement = this.state.matrix.interpolate({
      inputRange: [0, 1],
      outputRange: [
        [
          1, 0, 0, 0,
          0, 1, 0, 0,
          0, 0, 1, 0,
          0, 0, 0, 1
        ], [
          2, 0, 0, 0,
          0, 2, 0, 0,
          0, 0, 1, 0,
          0, 0, 0, 1
        ]
      ]
    })

    return (
      <View style={styles.container}>
        <Image
          style={[styles.imageBox]}
          source={{
            uri: "http://www.google.cn/landing/cnexp/google-search.png"
          }}
        />
        <Animated.Image
          style={[
            styles.imageBox,
            { transform: [{ matrix: enlargement }] }
          ]}
          source={{
            uri: "http://www.google.cn/landing/cnexp/google-search.png"
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 44,
    backgroundColor: "#ecf0f1"
  },
  imageBox: {
    width: 100,
    height: 100,
    position: "absolute",
    top: 120
  }
});

如果我分别替换output range中transform中的值，

即放大前（初始值）：

style={[
    styles.imageBox,
    { transform: [{ matrix: [
              1, 0, 0, 0,
              0, 1, 0, 0,
              0, 0, 1, 0,
              0, 0, 0, 1
            ] 
        }] 
    }
]}

并放大后：

style={[
    styles.imageBox,
    { transform: [{ matrix: [
              2, 0, 0, 0,
              0, 2, 0, 0,
              0, 0, 1, 0,
              0, 0, 0, 1
            ] 
        }] 
    }
]}

您将看到图像分别显示了正确的尺寸（放大之前和之后）。但将它们与动画api链接起来后，它就无法工作了（由于语法？）。

任何帮助将不胜感激！

无法使用React-Native动画API对矩阵变换进行动画处理

0 个答案: