transition.md

The style mapping lvgl style transition

Feature

It's possible to set

• the time of the transition
• the delay before starting the transition
• the animation path (also known as timing or easing function)
• the properties to animate

Value

transition with following properties:

• transition-property, supoort multiple values, sets the properties to which a transition effect should be applied
• transition-duration, support write with millisecond, second
• transition-timing-function, sets how intermediate values are calculated for properties being affected by a transition effect, with following value
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • overshoot
  • bounce
  • step
• transition-delay, support write with millisecond, second

Usage

function App () {
    return (
            <View 
                align={{
                    type: EAlignType.ALIGN_CENTER
                }} 
                style={style.view}
                onPressedStyle={style.pressedStyle}    
            >{`Text of a label`}</View>
    )
};

const style = {
    view: {
        'transition-property': 'border-width, background-color, border-color',
        'transition-duration': '100ms',
        'transition-timing-function': 'linear',
        'transition-delay': '200ms',
    },
    pressedStyle: {
        'border-width': 6,
        'border-color': 'red',
        'background-color': 'red',
        'transition-property': 'border-width, background-color, border-color',
        'transition-duration': '0.5s',
        'transition-timing-function': 'linear',
        'transition-delay': '0',
    }
};