mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-23 20:01:01 +08:00
Prettier the rest of ReactNative
Reviewed By: yungsters Differential Revision: D7974340 fbshipit-source-id: 5fe457a8a9be4bd360fc3af9acb5c1136b2be0d7
This commit is contained in:
Eli White
committed by
Facebook Github Bot
Facebook Github Bot
parent
aba4ec0c09
commit
36fcbaa56d
@@ -4,31 +4,29 @@
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var ReactNative = require('react-native');
|
||||
var {
|
||||
Animated,
|
||||
Easing,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} = ReactNative;
|
||||
var {Animated, Easing, StyleSheet, Text, View} = ReactNative;
|
||||
var RNTesterButton = require('./RNTesterButton');
|
||||
|
||||
exports.framework = 'React';
|
||||
exports.title = 'Animated - Examples';
|
||||
exports.description = 'Animated provides a powerful ' +
|
||||
exports.description =
|
||||
'Animated provides a powerful ' +
|
||||
'and easy-to-use API for building modern, ' +
|
||||
'interactive user experiences.';
|
||||
|
||||
exports.examples = [
|
||||
{
|
||||
title: 'FadeInView',
|
||||
description: 'Uses a simple timing animation to ' +
|
||||
description:
|
||||
'Uses a simple timing animation to ' +
|
||||
'bring opacity from 0 to 1 when the component ' +
|
||||
'mounts.',
|
||||
render: function() {
|
||||
@@ -40,19 +38,20 @@ exports.examples = [
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
Animated.timing( // Uses easing functions
|
||||
Animated.timing(
|
||||
// Uses easing functions
|
||||
this.state.fadeAnim, // The value to drive
|
||||
{
|
||||
toValue: 1, // Target
|
||||
duration: 2000, // Configuration
|
||||
toValue: 1, // Target
|
||||
duration: 2000, // Configuration
|
||||
},
|
||||
).start(); // Don't forget start!
|
||||
).start(); // Don't forget start!
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Animated.View // Special animatable View
|
||||
<Animated.View // Special animatable View
|
||||
style={{
|
||||
opacity: this.state.fadeAnim, // Binds
|
||||
opacity: this.state.fadeAnim, // Binds
|
||||
}}>
|
||||
{this.props.children}
|
||||
</Animated.View>
|
||||
@@ -69,19 +68,19 @@ exports.examples = [
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<RNTesterButton onPress={() => {
|
||||
this.setState((state) => (
|
||||
{show: !state.show}
|
||||
));
|
||||
<RNTesterButton
|
||||
onPress={() => {
|
||||
this.setState(state => ({show: !state.show}));
|
||||
}}>
|
||||
Press to {this.state.show ?
|
||||
'Hide' : 'Show'}
|
||||
Press to {this.state.show ? 'Hide' : 'Show'}
|
||||
</RNTesterButton>
|
||||
{this.state.show && <FadeInView>
|
||||
<View style={styles.content}>
|
||||
<Text>FadeInView</Text>
|
||||
</View>
|
||||
</FadeInView>}
|
||||
{this.state.show && (
|
||||
<FadeInView>
|
||||
<View style={styles.content}>
|
||||
<Text>FadeInView</Text>
|
||||
</View>
|
||||
</FadeInView>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -91,7 +90,8 @@ exports.examples = [
|
||||
},
|
||||
{
|
||||
title: 'Transform Bounce',
|
||||
description: 'One `Animated.Value` is driven by a ' +
|
||||
description:
|
||||
'One `Animated.Value` is driven by a ' +
|
||||
'spring with custom constants and mapped to an ' +
|
||||
'ordered set of transforms. Each transform has ' +
|
||||
'an interpolation to convert the value into the ' +
|
||||
@@ -100,33 +100,46 @@ exports.examples = [
|
||||
this.anim = this.anim || new Animated.Value(0);
|
||||
return (
|
||||
<View>
|
||||
<RNTesterButton onPress={() => {
|
||||
Animated.spring(this.anim, {
|
||||
toValue: 0, // Returns to the start
|
||||
velocity: 3, // Velocity makes it move
|
||||
tension: -10, // Slow
|
||||
friction: 1, // Oscillate a lot
|
||||
}).start(); }}>
|
||||
<RNTesterButton
|
||||
onPress={() => {
|
||||
Animated.spring(this.anim, {
|
||||
toValue: 0, // Returns to the start
|
||||
velocity: 3, // Velocity makes it move
|
||||
tension: -10, // Slow
|
||||
friction: 1, // Oscillate a lot
|
||||
}).start();
|
||||
}}>
|
||||
Press to Fling it!
|
||||
</RNTesterButton>
|
||||
<Animated.View
|
||||
style={[styles.content, {
|
||||
transform: [ // Array order matters
|
||||
{scale: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 4],
|
||||
})},
|
||||
{translateX: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 500],
|
||||
})},
|
||||
{rotate: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [
|
||||
'0deg', '360deg' // 'deg' or 'rad'
|
||||
],
|
||||
})},
|
||||
]}
|
||||
style={[
|
||||
styles.content,
|
||||
{
|
||||
transform: [
|
||||
// Array order matters
|
||||
{
|
||||
scale: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 4],
|
||||
}),
|
||||
},
|
||||
{
|
||||
translateX: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 500],
|
||||
}),
|
||||
},
|
||||
{
|
||||
rotate: this.anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [
|
||||
'0deg',
|
||||
'360deg', // 'deg' or 'rad'
|
||||
],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
]}>
|
||||
<Text>Transforms!</Text>
|
||||
</Animated.View>
|
||||
@@ -136,80 +149,87 @@ exports.examples = [
|
||||
},
|
||||
{
|
||||
title: 'Composite Animations with Easing',
|
||||
description: 'Sequence, parallel, delay, and ' +
|
||||
description:
|
||||
'Sequence, parallel, delay, and ' +
|
||||
'stagger with different easing functions.',
|
||||
render: function() {
|
||||
this.anims = this.anims || [1,2,3].map(
|
||||
() => new Animated.Value(0)
|
||||
);
|
||||
this.anims = this.anims || [1, 2, 3].map(() => new Animated.Value(0));
|
||||
return (
|
||||
<View>
|
||||
<RNTesterButton onPress={() => {
|
||||
var timing = Animated.timing;
|
||||
Animated.sequence([ // One after the other
|
||||
timing(this.anims[0], {
|
||||
toValue: 200,
|
||||
easing: Easing.linear,
|
||||
}),
|
||||
Animated.delay(400), // Use with sequence
|
||||
timing(this.anims[0], {
|
||||
toValue: 0,
|
||||
easing: Easing.elastic(2), // Springy
|
||||
}),
|
||||
Animated.delay(400),
|
||||
Animated.stagger(200,
|
||||
this.anims.map((anim) => timing(
|
||||
anim, {toValue: 200}
|
||||
)).concat(
|
||||
this.anims.map((anim) => timing(
|
||||
anim, {toValue: 0}
|
||||
))),
|
||||
),
|
||||
Animated.delay(400),
|
||||
Animated.parallel([
|
||||
Easing.inOut(Easing.quad), // Symmetric
|
||||
Easing.back(1.5), // Goes backwards first
|
||||
Easing.ease // Default bezier
|
||||
].map((easing, ii) => (
|
||||
timing(this.anims[ii], {
|
||||
toValue: 320, easing, duration: 3000,
|
||||
})
|
||||
))),
|
||||
Animated.delay(400),
|
||||
Animated.stagger(200,
|
||||
this.anims.map((anim) => timing(anim, {
|
||||
<RNTesterButton
|
||||
onPress={() => {
|
||||
var timing = Animated.timing;
|
||||
Animated.sequence([
|
||||
// One after the other
|
||||
timing(this.anims[0], {
|
||||
toValue: 200,
|
||||
easing: Easing.linear,
|
||||
}),
|
||||
Animated.delay(400), // Use with sequence
|
||||
timing(this.anims[0], {
|
||||
toValue: 0,
|
||||
easing: Easing.bounce, // Like a ball
|
||||
duration: 2000,
|
||||
})),
|
||||
),
|
||||
]).start(); }}>
|
||||
easing: Easing.elastic(2), // Springy
|
||||
}),
|
||||
Animated.delay(400),
|
||||
Animated.stagger(
|
||||
200,
|
||||
this.anims
|
||||
.map(anim => timing(anim, {toValue: 200}))
|
||||
.concat(this.anims.map(anim => timing(anim, {toValue: 0}))),
|
||||
),
|
||||
Animated.delay(400),
|
||||
Animated.parallel(
|
||||
[
|
||||
Easing.inOut(Easing.quad), // Symmetric
|
||||
Easing.back(1.5), // Goes backwards first
|
||||
Easing.ease, // Default bezier
|
||||
].map((easing, ii) =>
|
||||
timing(this.anims[ii], {
|
||||
toValue: 320,
|
||||
easing,
|
||||
duration: 3000,
|
||||
}),
|
||||
),
|
||||
),
|
||||
Animated.delay(400),
|
||||
Animated.stagger(
|
||||
200,
|
||||
this.anims.map(anim =>
|
||||
timing(anim, {
|
||||
toValue: 0,
|
||||
easing: Easing.bounce, // Like a ball
|
||||
duration: 2000,
|
||||
}),
|
||||
),
|
||||
),
|
||||
]).start();
|
||||
}}>
|
||||
Press to Animate
|
||||
</RNTesterButton>
|
||||
{['Composite', 'Easing', 'Animations!'].map(
|
||||
(text, ii) => (
|
||||
<Animated.View
|
||||
key={text}
|
||||
style={[styles.content, {
|
||||
left: this.anims[ii]
|
||||
}]}>
|
||||
<Text>{text}</Text>
|
||||
</Animated.View>
|
||||
)
|
||||
)}
|
||||
{['Composite', 'Easing', 'Animations!'].map((text, ii) => (
|
||||
<Animated.View
|
||||
key={text}
|
||||
style={[
|
||||
styles.content,
|
||||
{
|
||||
left: this.anims[ii],
|
||||
},
|
||||
]}>
|
||||
<Text>{text}</Text>
|
||||
</Animated.View>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Continuous Interactions',
|
||||
description: 'Gesture events, chaining, 2D ' +
|
||||
description:
|
||||
'Gesture events, chaining, 2D ' +
|
||||
'values, interrupting and transitioning ' +
|
||||
'animations, etc.',
|
||||
render: () => (
|
||||
<Text>Checkout the Gratuitous Animation App!</Text>
|
||||
),
|
||||
}
|
||||
render: () => <Text>Checkout the Gratuitous Animation App!</Text>,
|
||||
},
|
||||
];
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
|
||||
Reference in New Issue
Block a user