Skip to content

Commit

Permalink
Add an implementation of Animated.subtract
Browse files Browse the repository at this point in the history
Summary:
Fixes #18451

I've added another example to NativeAnimationsExample, which makes use of `Animated.substract()`, let me know if the example is not desired / doesn't add much value. Below two GIFs of the new method working on iOS and Android:

<img width="320" src="https://user-images.githubusercontent.com/1437605/38154748-165cc5f8-3474-11e8-8b31-504444271896.gif" />
<img width="320" src="https://user-images.githubusercontent.com/1437605/38154749-1679bff0-3474-11e8-80b1-b558d44e0494.gif" />

<!--
  Required: Write your test plan here. If you changed any code, please provide us with
  clear instructions on how you verified your changes work. Bonus points for screenshots and videos!
-->

facebook/react-native-website#276

[GENERAL] [ENHANCEMENT] [Animated] - Implemented Animated.subtract
Closes facebook/react-native#18630

Differential Revision: D7462867

Pulled By: hramos

fbshipit-source-id: 4cb0b8af08bb0c841e44ea2099889b8c02a22a4a
  • Loading branch information
avendiart authored and facebook-github-bot committed Mar 31, 2018
1 parent 5cf7a7c commit aeffa86
Showing 1 changed file with 42 additions and 0 deletions.
42 changes: 42 additions & 0 deletions js/NativeAnimationsExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,48 @@ exports.examples = [
);
},
},
{
title: 'Multistage With Subtract',
render: function() {
return (
<Tester type="timing" config={{duration: 1000}}>
{anim => (
<Animated.View
style={[
styles.block,
{
transform: [
{
translateX: anim.interpolate({
inputRange: [0, 1],
outputRange: [0, 200],
}),
},
{
translateY: anim.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 50, 0],
}),
},
],
opacity: Animated.subtract(
anim.interpolate({
inputRange: [0, 1],
outputRange: [1, 1],
}),
anim.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 0.5, 0],
}),
),
},
]}
/>
)}
</Tester>
);
},
},
{
title: 'Scale interpolation with clamping',
render: function() {
Expand Down

0 comments on commit aeffa86

Please sign in to comment.