React native css transition

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Standard set of easy to use animations and declarative transitions for React Native

License

oblador/react-native-animatable

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Declarative transitions and animations for React Native

$ npm install react-native-animatable —save

To animate things you must use the createAnimatableComponent composer similar to the Animated.createAnimatedComponent . The common components View , Text and Image are precomposed and exposed under the Animatable namespace. If you have your own component that you wish to animate, simply wrap it with a Animatable.View or compose it with:

import * as Animatable from 'react-native-animatable'; MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);

Animatable.Text animation pl-s">zoomInUp">Zoom me up, ScottyAnimatable.Text>

To make looping animations simply set the iterationCount to infinite . Most animations except the attention seekers work best when setting direction to alternate .

Animatable.Text animation pl-s">slideInDown" iterationCount= direction pl-s">alternate">Up and down you goAnimatable.Text> Animatable.Text animation pl-s">pulse" easing pl-s">ease-out" iterationCount pl-s">infinite" style= <textAlign: 'center' >>>❤️Animatable.Text>

You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don’t supply a duration property, a spring animation will be used.

Note: If you are using colors, please use rgba() syntax.

Note: Transitions require StyleSheet.flatten available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage.

TouchableOpacity onPress= => this.setState()>> Animatable.Text transition pl-s">fontSize" style= this.state.fontSize || 10>>>Size me up, ScottyAnimatable.Text> TouchableOpacity>

Note: Other properties will be passed down to underlying component.

Prop	Description	Default
animation	Name of the animation, see below for available animations.	None
duration	For how long the animation will run (milliseconds).	1000
delay	Optionally delay animation (milliseconds).	0
direction	Direction of animation, especially useful for repeating animations. Valid values: normal , reverse , alternate , alternate-reverse .	normal
easing	Timing function for the animation. Valid values: custom function or linear , ease , ease-in , ease-out , ease-in-out , ease-in-cubic , ease-out-cubic , ease-in-out-cubic , ease-in-circ , ease-out-circ , ease-in-out-circ , ease-in-expo , ease-out-expo , ease-in-out-expo , ease-in-quad , ease-out-quad , ease-in-out-quad , ease-in-quart , ease-out-quart , ease-in-out-quart , ease-in-quint , ease-out-quint , ease-in-out-quint , ease-in-sine , ease-out-sine , ease-in-out-sine , ease-in-back , ease-out-back , ease-in-out-back .	ease
iterationCount	How many times to run the animation, use infinite for looped animations.	1
iterationDelay	For how long to pause between animation iterations (milliseconds).	0
transition	What style property to transition, for example opacity , rotate or fontSize . Use array for multiple properties.	None
onAnimationBegin	A function that is called when the animation has been started.	None
onAnimationEnd	A function that is called when the animation has been completed successfully or cancelled. Function is called with an endState argument, refer to endState.finished to see if the animation completed or not.	None
onTransitionBegin	A function that is called when the transition of a style has been started. The function is called with a property argument to differentiate between styles.	None
onTransitionEnd	A function that is called when the transition of a style has been completed successfully or cancelled. The function is called with a property argument to differentiate between styles.	None
useNativeDriver	Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling.	false
isInteraction	Whether or not this animation creates an «interaction handle» on the InteractionManager.	false if iterationCount is less than or equal to one

All animations are exposed as functions on Animatable elements, they take an optional duration argument. They return a promise that is resolved when animation completes successfully or is cancelled.

import * as Animatable from 'react-native-animatable'; class ExampleView extends Component  handleViewRef = ref => this.view = ref; bounce = () => this.view.bounce(800).then(endState => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled')); render()  return ( TouchableWithoutFeedback onPress=this.bounce>> Animatable.View ref=this.handleViewRef>> Text>Bounce me!/Text> /Animatable.View> /TouchableWithoutFeedback> ); > >

To stop any ongoing animations, just invoke stopAnimation() on that element.

You can also animate imperatively by using the animate() function on the element for custom animations, for example:

transition(fromValues, toValues[[, duration], easing])

Will transition between given styles. If no duration or easing is passed a spring animation will be used.

transitionTo(toValues[[, duration], easing])

This function will try to determine the current styles and pass it along to transition() as fromValues .

import * as Animatable from 'react-native-animatable'; class ExampleView extends Component  handleTextRef = ref => this.text = ref; render()  return ( TouchableWithoutFeedback onPress=() => this.text.transitionTo( opacity: 0.2 >)>> Animatable.Text ref=this.handleTextRef>>Fade me!/Animatable.Text> /TouchableWithoutFeedback> ); > >

Animations can be referred to by a global name or a definition object.

Animation Definition Schema

An animation definition is a plain object that contains an optional easing property, an optional style property for static non-animated styles (useful for perspective , backfaceVisibility , zIndex etc) and a list of keyframes. The keyframes are refered to by a number between 0 to 1 or from and to . Inspect the source in the definitions folder to see more in depth examples.

A simple fade in animation:

const fadeIn =  from:  opacity: 0, >, to:  opacity: 1, >, >;

Animatable.Text animation= >Fade me inAnimatable.Text>

Combining multiple styles to create a zoom out animation:

const zoomOut =  0:  opacity: 1, scale: 1, >, 0.5:  opacity: 1, scale: 0.3, >, 1:  opacity: 0, scale: 0, >, >;

Animatable.Text animation= >Zoom me outAnimatable.Text>

To make your animations globally available by referring to them by a name, you can register them with initializeRegistryWithDefinitions . This function can also be used to replace built in animations in case you want to tweak some value.

Animatable.initializeRegistryWithDefinitions( myFancyAnimation:  from:  . >, to:  . >, > >);

The talk A Novel Approach to Declarative Animations in React Native from React Europe 2017 about this library and animations/transitions in general is available on YouTube.

See Examples/MakeItRain folder for the example project from the talk.

See Examples/AnimatableExplorer folder for an example project demoing animations available out of the box and more.

Animations are heavily inspired by Animated.css.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Enable animate react-native components like css transition property.

JustForFront/react-native-css-transition

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Enable animate react-native components like css transition property.

npm install react-native-css-transition 

import Transition from 'react-native-css-transition';

react-native-styling: For compling nested raw style sheet.

It’s not a must to use react-native-styling for compling sheet, but we recommended for improving performance.

export const styles =  Counter: stateTest:  default:  transition:[ //Must not pass to native StyleSheet.create directly, will cause error property:"color", duration:1000, delay:0, timingFunction:Easing.back, // native Easing options interpolate: // Default interpolate option for non-numeric value, auto generated inputRange: [0, 100], outputRange: ["#333", "#333"] // Default is initial value >, sequence:0, //determinate the property animation effect run sync/async with others, default all zero >, property:"fontSize", duration:1000, delay:0, timingFunction:Easing.back, sequence:1, >], color: '#333' >, 1: color: 'yellow' >, 2: color: 'orange' >, 3: color: 'red' > > > >; export const compliedStyle = CreateNestedStyleSheet(styles);

Supports the same basic components as react native Animated: Text, View, ScrollView, Image

Transition.Text style=GetStyle(compliedStyle.Counter.stateTest,fontSize:10+stateValue*5>,stateValue)> //will change as stateValue changed animationOptions=_all:useNativeDriver:true>>> >v>/Transition.Text>

Can be a normal style ID(s) or raw style properties, or stated sheet by CreateNestedStyleSheet with transition property. The transition component will monitor the delegated properties accroding to transition property setting and animated them on changed. Just like how CSS transition property works.

Callback on animation played, work as Animation.start(animationPlayed).

Animation option object. First level key match with animated property name, _all to match all. These options will overwrite computed property value.

About

Enable animate react-native components like css transition property.

Источник