Animated Example using Image

Summary: Need to test a potential issue with Animated.Image on Android. Adding a RNTester example to exercise it.

Reviewed By: yungsters

Differential Revision: D8559440

fbshipit-source-id: 4319d958de146c177cb0bd4b84679b773ce50833
This commit is contained in:
Eli White 2018-06-20 23:47:40 -07:00 committed by Facebook Github Bot
parent 04fa721ed5
commit 4c6dece09c
1 changed files with 53 additions and 0 deletions

View File

@ -222,6 +222,59 @@ exports.examples = [
);
},
},
{
title: 'Rotating Images',
description: 'Simple Animated.Image rotation.',
render: function() {
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();
}}>
Press to Spin it!
</RNTesterButton>
<Animated.Image
source={require('./bunny.png')}
style={[
{width: 70, height: 70},
{
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>
);
},
},
{
title: 'Continuous Interactions',
description: