Move out RotatingImages example
Summary: Changelog: [Internal][Changed] - Move RNTester Animated example, RotatingImages to a separate module Reviewed By: nadiia, kacieb Differential Revision: D27245468 fbshipit-source-id: df4c5cb0b1f5b6cea7a4c5457d8c419e1f39c475
This commit is contained in:
Родитель
ee539cb280
Коммит
22107c6f9f
|
@ -15,6 +15,7 @@ const React = require('react');
|
|||
const {Animated, Easing, StyleSheet, Text, View} = require('react-native');
|
||||
|
||||
import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
|
||||
import RotatingImagesExample from './RotatingImagesExample';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
content: {
|
||||
|
@ -278,68 +279,7 @@ exports.examples = ([
|
|||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Rotating Images',
|
||||
description: 'Simple Animated.Image rotation.',
|
||||
render: function(): React.Node {
|
||||
this.anim = this.anim || new Animated.Value(0);
|
||||
return (
|
||||
<View>
|
||||
<RNTesterButton
|
||||
onPress={() => {
|
||||
Animated.spring(this.anim, {
|
||||
// Returns to the start
|
||||
toValue: 0,
|
||||
|
||||
// Velocity makes it move
|
||||
velocity: 3,
|
||||
|
||||
// Slow
|
||||
tension: -10,
|
||||
|
||||
// Oscillate a lot
|
||||
friction: 1,
|
||||
|
||||
useNativeDriver: false,
|
||||
}).start();
|
||||
}}>
|
||||
Press to Spin it!
|
||||
</RNTesterButton>
|
||||
<Animated.Image
|
||||
source={require('../../assets/bunny.png')}
|
||||
style={[
|
||||
styles.rotatingImage,
|
||||
{
|
||||
transform: [
|
||||
{
|
||||
scale: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 10],
|
||||
}),
|
||||
},
|
||||
{
|
||||
translateX: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 100],
|
||||
}),
|
||||
},
|
||||
{
|
||||
rotate: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [
|
||||
'0deg',
|
||||
'360deg', // 'deg' or 'rad'
|
||||
],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
RotatingImagesExample,
|
||||
{
|
||||
title: 'Moving box example',
|
||||
name: 'movingView',
|
||||
|
|
|
@ -0,0 +1,86 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow strict-local
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import RNTesterButton from '../../components/RNTesterButton';
|
||||
import {Animated, View, StyleSheet} from 'react-native';
|
||||
import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
rotatingImage: {
|
||||
width: 70,
|
||||
height: 70,
|
||||
},
|
||||
});
|
||||
|
||||
function RotatingImagesExample(): React.Node {
|
||||
this.anim = this.anim || new Animated.Value(0);
|
||||
return (
|
||||
<View>
|
||||
<RNTesterButton
|
||||
onPress={() => {
|
||||
Animated.spring(this.anim, {
|
||||
// Returns to the start
|
||||
toValue: 0,
|
||||
|
||||
// Velocity makes it move
|
||||
velocity: 3,
|
||||
|
||||
// Slow
|
||||
tension: -10,
|
||||
|
||||
// Oscillate a lot
|
||||
friction: 1,
|
||||
|
||||
useNativeDriver: false,
|
||||
}).start();
|
||||
}}>
|
||||
Press to Spin it!
|
||||
</RNTesterButton>
|
||||
<Animated.Image
|
||||
source={require('../../assets/bunny.png')}
|
||||
style={[
|
||||
styles.rotatingImage,
|
||||
{
|
||||
transform: [
|
||||
{
|
||||
scale: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 10],
|
||||
}),
|
||||
},
|
||||
{
|
||||
translateX: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 100],
|
||||
}),
|
||||
},
|
||||
{
|
||||
rotate: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [
|
||||
'0deg',
|
||||
'360deg', // 'deg' or 'rad'
|
||||
],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default ({
|
||||
title: 'Rotating Images',
|
||||
description: 'Simple Animated.Image rotation.',
|
||||
render: RotatingImagesExample,
|
||||
}: RNTesterExampleModuleItem);
|
Загрузка…
Ссылка в новой задаче