How to use the troika-animation.Tween function in troika-animation

To help you get started, we’ve selected a few troika-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 protectwise / troika / packages / troika-core / src / facade / Animatable.js View on Github external
// Build a MultiTween with tweens for each keyframe+property
              let keyframePropTweens = []
              for (let j = 1, len = keyframes.length; j < len; j++) {
                let keyframe = keyframes[j]
                let props = keyframe.props
                for (let prop in props) {
                  if (props.hasOwnProperty(prop)) {
                    let prevKeyframe = null
                    for (let k = j; k--;) {
                      if (prop in keyframes[k].props) {
                        prevKeyframe = keyframes[k]
                        break
                      }
                    }
                    if (prevKeyframe) {
                      let propTween = new Tween(
                        this[prop + '➤anim:actuallySet'].bind(this), //callback
                        prevKeyframe.props[prop], //fromValue
                        props[prop], //toValue
                        (keyframe.time - prevKeyframe.time) * duration, //duration
                        prevKeyframe.time * duration, //delay
                        'linear', //easing
                        1, //iterations
                        'forward', //direction
                        animDesc.interpolate && animDesc.interpolate[prop] || 'number'
                      )
                      propTween.$$property = prop
                      keyframePropTweens.push(propTween)
                    }
                  }
                }
              }
github protectwise / troika / packages / troika-core / src / facade / Animatable.js View on Github external
// If there's no active transition tween, or the new value is different than the active tween's
            // target value, initiate a new transition tween. Otherwise ignore it.
            let tween = this[activeTweenKey]
            let needsNewTween = false
            if (tween) {
              // Active tween - start new one if new value is different than the old tween's target value
              if (value !== tween.toValue) {
                runner.stop(tween)
                needsNewTween = true
              }
            } else if (value !== this[propName]) {
              // No active tween - only start one if the value is changing
              needsNewTween = true
            }
            if (needsNewTween) {
              tween = this[activeTweenKey] = new Tween(
                actuallySet.bind(this), //callback
                this[propName], //fromValue
                value, //toValue
                transition.duration || DEFAULT_DURATION, //duration
                transition.delay || 0, //delay
                transition.easing || DEFAULT_EASING, //easing
                1, //iterations
                'forward', //direction
                transition.interpolate || 'number' //interpolate
              )
              runner.start(tween)
            }
            return
          }

          // No animation or transition will be started; set the value.

troika-animation

Troika Animation Utilities

MIT
Latest version published 25 days ago

Package Health Score

73 / 100
Full package analysis

Similar packages