How to use the @shoutem/animation.TimingDriver function in @shoutem/animation

To help you get started, we’ve selected a few @shoutem/animation examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github shoutem / ui / navigation / NavigationBarView.js View on Github external
createFallbackNavBarInterpolation(previousProps, currentProps) {
    // Use 250ms as transition duration
    const driver = new TimingDriver({ duration: 250 });
    driver.runTimer(1);

    return {
      backgroundColor: driver.value.interpolate({
        inputRange: [0, 1],
        outputRange: this.getColors('backgroundColor', previousProps, currentProps),
        extrapolate: 'clamp',
      }),
      borderBottomColor: driver.value.interpolate({
        inputRange: [0, 1],
        outputRange: this.getColors('borderBottomColor', previousProps, currentProps),
        extrapolate: 'clamp',
      }),
    };
  }
github shoutem / extensions / shoutem.navigation / app / components / ui / NavigationBarView.js View on Github external
createFallbackNavBarInterpolation(previousProps, currentProps) {
    // Use 250ms as transition duration
    const driver = new TimingDriver({ duration: 250 });
    driver.runTimer(1);

    return {
      backgroundColor: driver.value.interpolate({
        inputRange: [0, 1],
        outputRange: this.getColors('backgroundColor', previousProps, currentProps),
        extrapolate: 'clamp',
      }),
      borderBottomColor: driver.value.interpolate({
        inputRange: [0, 1],
        outputRange: this.getColors('borderBottomColor', previousProps, currentProps),
        extrapolate: 'clamp',
      }),
    };
  }
github shoutem / ui / components / DropDownMenu / DropDownModal.js View on Github external
componentWillMount() {
    this.timingDriver = new TimingDriver();
  }
github shoutem / extensions / shoutem.web-view / app / components / NavigationToolbar.js View on Github external
componentWillMount() {
    this.driver = new TimingDriver({
      duration: 450,
    });
  }
github shoutem / animation / examples / ShoutemAnimation / components / SlideInOut.js View on Github external
render() {
    const driver = new TimingDriver({ duration: 6000 });
    driver.runTimer(14);
    return (
github shoutem / animation / examples / ShoutemAnimation / components / Rotate.js View on Github external
render() {
    const driver = new TimingDriver({ duration: 3000 });
    driver.runTimer(1);
    return (
github shoutem / animation / examples / ShoutemAnimation / components / ZoomInOut.js View on Github external
render() {
    const driver = new TimingDriver({ duration: 3000 });
    driver.runTimer(1);
    return (
github shoutem / ui / components / Switch.js View on Github external
constructor(props) {
    super(props);

    this.timingDriver = new TimingDriver();
    this.onSwitchPressed = this.onSwitchPressed.bind(this);

    this.setValue(props.value);
  }
github shoutem / animation / examples / ShoutemAnimation / components / FadeInOut.js View on Github external
render() {
    const driver = new TimingDriver({ duration: 3000 });
    driver.runTimer(1);
    return (