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

前端之家收集整理的这篇文章主要介绍了react-native – 如何创建简单的动画效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有可用的代码示例说明如何在反应原生应用程序中使用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

原文链接:https://www.f2er.com/react/300983.html

猜你在找的React相关文章