react-native - 如何制作简单的动画效果

Question

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

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

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

Answer 1

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

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

首先确定RCTAnimationExperimental是一个链接库


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

导航至 node_modules/react-native/Libraries/Animation/

拖放 RCTAnimationExperimental.xcodeproj到图书馆(应该像上图)

单击您的项目名称(在上面的示例中，我的项目名称是 Memory)

切换到构建阶段选项卡

展开 Libraries/RCTAnimationExperimental.xcodeproj/Products

拖动 libRctAnimationExperimental.a至 Link Binary With Libraries

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

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

好的，冠军，你已经准备好制作动画了。确保你知道你正在制作什么动画。您将制作动画的 View 称为 node .

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

就是这样!

在撰写本文时，可用属性为: opacity , position , positionX , positionY , rotation , scaleXY