react-native – 如何创建简单的动画效果

发布时间：2020-12-15 20:47:52 所属栏目：百科来源：网络整理

导读：是否有可用的代码示例说明如何在反应原生应用程序中使用JPG进行2D变换(如旋转和缩放),可能以教程中的代码作为起点？如果可能,查看两个场景的代码会很有帮助： 1)在启动应用程序时自动应用转换 2)在不同类型的用户手势之后应用变换在未来的某个时刻,看看如

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

如果可能,查看两个场景的代码会很有帮助：

1)在启动应用程序时自动应用转换
2)在不同类型的用户手势之后应用变换

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

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

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

首先,确保RCTAnimationExperimental是一个链接库

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

>导航到node_modules / react-native / Libraries / Animation /
>将RCTAnimationExperimental.xcodeproj拖放到库中(应该如上图所示)
>单击您的项目名称(在上面的示例中,我的项目名称是Memory)
>切换到Build Phases选项卡
>展开Libraries / RCTAnimationExperimental.xcodeproj / Products
>将libRctAnimationExperimental.a拖到Link Binary with Libraries

好吧,最困难的部分现在已经结束了.转到您的JavaScript文件.动画不再是react-native包的一部分,因此我们必须明确地包含它.

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

好吧,冠军,你准备动画了.确保你知道你的动画.您将要制作动画的视图称为节点.

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

就是这样！

在撰写本文时,可用的属性包括：不透明度,位置,positionX,positionY,rotation,scaleXY

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!