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:
parent
04fa721ed5
commit
4c6dece09c
|
@ -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:
|
||||
|
|
Loading…
Reference in New Issue