如何制作简单的动画效果

Posted 2023-02-16

【中文标题】如何制作简单的动画效果

【英文标题】：How to create a simple animation effect

【发布时间】：2015-06-01 09:49:30

【问题描述】：

是否有可用的代码示例说明如何在 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 变换和动画效果会很有趣。

【问题讨论】：

React Native 动画 API 已经落地。查看黑客新闻的链接！ news.ycombinator.com/item?id=9872996

【参考方案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');

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

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

就是这样！

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

【讨论】：

添加 RCTAnimation 库，路径应该是 node_modules/react-native/Libraries/**NativeAnimation**/ 对于 RN 0.38

【参考方案2】：

目前，这是一个更复杂的过程，我正计划就此写一篇博文。不过，作为一个简短的开始，我在这里写一些东西。

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

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

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

现在，您可以构建项目以支持动画。我对 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);

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

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

【讨论】：

非常好。它对我来说真的很顺利。感谢您的明确解释。

谢谢。作为一个 Xcode 新手，我错误地打开了错误的 Build Phases 选项卡......你想将 libRCTAnimation.a 放在你的 MainProject.xcodeproj

不会再工作了。用 API 略有不同的 AnimationExperimental 替换

从 react-native 0.38 开始，RCTAnimation.xcodeproj 生活在@node_modules/react-native/Libraries/NativeAnimation/。

【参考方案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]);

【讨论】：

感谢您指出示例 - 我完全错过了这些！