7

おそらくチュートリアルのコードを出発点として、react-native アプリケーションで JPG で 2D 変換 (回転やスケーリングなど) を使用する方法を示すコード サンプルはありますか?

可能であれば、次の 2 つのシナリオのコードを参照してください。 1) automatically apply a transform when the app is launched 2) apply a transform after different types of user gestures

将来のある時点で、3D 変換とアニメーション効果を作成する方法が興味深いものになるでしょう。

4

3 に答える 3

23

更新:ここにあるサンプル アプリで例全体を確認できます: https://github.com/grgur/react-native-memory-game

アニメーションは現在 AnimationExperimental であるため、zvona のソリューションを変更する必要があります。

まず、RCTAnimationExperimentalリンクされたライブラリである ことを確認してくださいRCTアニメーション実験的

そうでない場合は、次の手順に従います。

  1. 案内するnode_modules/react-native/Libraries/Animation/
  2. ライブラリにドラッグ アンド ドロップRCTAnimationExperimental.xcodeprojします (上の画像のようになります)。
  3. プロジェクト名をクリックします (上記の例では、私のプロジェクト名は Memory です)。
  4. [ビルド フェーズ] タブに切り替えます
  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、rotationscaleXY

于 2015-04-11T19:06:02.257 に答える
4

RCTAnimation ライブラリの使用例については、2048 デモ アプリケーションをご覧ください。

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

特に複雑な変換は使用しませんが、次のようなコードでさまざまな要素のposition、opacity、およびをアニメーション化します。scaleXY

Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});
于 2015-03-28T02:31:17.690 に答える