7

是否有可用的代码示例说明如何在 react-native 应用程序中使用 JPG 的 2D 变换（例如旋转和缩放），也许以教程中的代码为起点？

如果可能，查看以下两种情况的代码会很有帮助： 1) automatically apply a transform when the app is launched 2) apply a transform after different types of user gestures

在未来的某个时候，看看如何创建 3D 变换和动画效果会很有趣。

4

3 回答 3

23

更新：您可以在我的示例应用程序中看到整个示例：https ://github.com/grgur/react-native-memory-game

动画现在是 AnimationExperimental，所以我们需要修改 zvona 的解决方案。

首先，确保RCTAnimationExperimental是链接库 RCT动画实验

如果没有，请按照以下步骤操作：

  1. 导航node_modules/react-native/Libraries/Animation/
  2. 拖放RCTAnimationExperimental.xcodeproj到库（应如上图所示）
  3. 点击你的项目名称（在上面的例子中，我的项目名称是 Memory）
  4. 切换到构建阶段选项卡
  5. 扩张Libraries/RCTAnimationExperimental.xcodeproj/Products
  6. 拖动libRctAnimationExperimental.a到Link Binary With Libraries 将二进制文件与库链接

好的，最困难的部分现在结束了。转到您的 JavaScript 文件。动画不再是 react-native 包的一部分，所以我们必须明确地包含它。

var React = require('react-native');
var AnimationExperimental = require('AnimationExperimental');

好吧，冠军，你准备好制作动画了。确保你知道你在制作什么动画。您将制作动画的视图称为node.

AnimationExperimental.startAnimation({
  node: this.refs.image,
  duration: 400,
  easing: 'easeInQuad',
  property: 'opacity',
  toValue: 0.1,
});

就是这样！

在撰写本文时，可用的属性有：opacity, position, positionX, positionY, rotation,scaleXY

于 2015-04-11T19:06:02.257 回答
18

目前，这是一个更复杂的过程，我打算写一篇关于这个的博客文章。但是，作为一个简短的开始，我在这里写一些东西。

第一个问题是 RCTAnimation / RCTAnimationManager 根本不存在，如果您使用react-native init [ProjectName]( https://github.com/facebook/react-native/issues/226 ) 创建了您的项目。

您需要从左上角的加号将其添加到 XCode 中：“将文件添加到 [ProjectName]”。然后导航到node_modules > Libraries > Animation > RCTAnimation.xcodeproj。导入后，您需要将其拖到Libraries项目中。

然后你需要打开 tab Build Phases。那里有菜单Link Binary With Libraries (x items)。从名为的文件Products下拖动到菜单。RCTAnimation.xcodeprojlibRCTAnimation.a

现在，您可以构建项目以支持动画。我对 XCode 不太熟悉，所以可能有一种更简单的方法来实现这一点，但我把它整理成这样。

第二个问题是并非所有可用的（或计划的）功能都在那里。至少我在屏幕上看到任何东西之前经历了反复试验和错误的丛林。

首先尝试例如此代码，以充分证明动画正在工作：

var {
  Animation,
  AppRegistry,
  StyleSheet,
  Text,
  View
} = React;

var styles = StyleSheet.create({
  test: {
    width: 400,
    height: 400,
    backgroundColor: 'blue',
    opacity: 0
  }
});

var AnimationTest = React.createClass({
  componentDidMount () {
    Animation.startAnimation(this.refs['this'], 400, 0, 'linear', {opacity: 1});
  },

  render () {
    return (
      <View ref='this' style={styles.test}>
        <Text>Just an animation test</Text>
      </View>
    )
  }
});

AppRegistry.registerComponent('AnimationTest', () => AnimationTest);

这应该让你继续前进。如果您需要任何进一步的帮助，请通知我。

如果我成功地以博客文章的形式编写了更完整的说明，我会将其更新为这个答案。

于 2015-04-01T21:07:27.027 回答
4

查看 2048 演示应用程序，了解 RCTAnimation 库的使用示例：

https://github.com/facebook/react-native/tree/master/Examples/2048

它不使用任何特别复杂的变换，但对各种元素进行动画处理position，代码如下所示：opacityscaleXY

Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});
于 2015-03-28T02:31:17.690 回答