如何创建简单的动画效果

Question

是否有可用的代码示例说明如何在反应原生应用程序中使用JPG进行2D转换（如旋转和缩放），可能以教程中的代码为起点？

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

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

Answer 1

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

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

首先，确保RCTAnimationExperimental是链接库

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

1. 导航至node_modules/react-native/Libraries/Animation/
2. 将RCTAnimationExperimental.xcodeproj拖放到库中（应该如上图所示）
3. 点击你的项目名称（在上面的例子中，我的项目名称是Memory）
4. 切换到Build Phases选项卡
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

Answer 2

目前，这是一个更复杂的过程，我打算写一篇博文。但是，作为一个简短的启动者，我在这里写点什么。

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

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

然后您需要打开标签Build Phases。你有菜单Link Binary With Libraries (x items)。从名为Products的{​​{1}}文件下的RCTAnimation.xcodeproj拖到菜单。

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

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

尝试例如这个代码起初是为了充分证明动画是有效的：

libRCTAnimation.a

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

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

Answer 3

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

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

它不使用任何特别复杂的变换，但会使用如下代码为各种元素的position，opacity和scaleXY设置动画：

Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});