motion-tween
Tween property A to B over a given time and interpolation
Last updated 3 years ago by milewski .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install motion-tween 
SYNC missed versions from official npm registry.

#API

let tween = new Tween(false,null,60); // autoStart, loop engine,  framerate //still working on this
let animation = tween.create({
        origin: object | number,
        target: object | number,
        duration: 1 // in seconds,
        ease: Tween.easings.BOUNCEOUT,
        before(),
        update(),
        complete(),
    })

Play Animation simultaneously

let tween = new Tween(),
    vector = { x:0, y:0, z: 0};

let A = tween.create({
    origin: vector,
    target: { x: 10 },
})

let B = tween.create({
    origin: vector,
    target: { y: 10 },
})

tween.start()

Time Properties independently

let tween = new Tween(),
    tween.create({
        origin: { x: 0, y: 0, z: 0},
        target: { x: 10 },
        ease: {
            x: Tween.easings.ELASTICIN,
            y: Tween.easings.EXPOIN,
            z: Tween.easings.LINEAR
        },
        duration:{
            x: 1,
            y: 2,
            z: 3
        }
})

Chain!


let tween = new Tween(),
    vector = { x:0, y:0, z: 0};

tween.create({
        origin: vector,
        target: { x: 10 },
    })
    .then({
        target: { x: 20 }
    })
    .then({
        duration: 5,
        target: { y: 50 },
        complete(){
            //do something
        }
    })
    .then({
        origin: anotherObject,
        //target will be equivalent as the previous on the chain unless you replace it here
        duration: 5,
        target: { y: 50 }
    })
    .then(function(){
        console.log('im done')
    })

You can use your own update function in case you already are using requestAnimationFrame or if u don't really want to use it.


let tween = new Tween(false),

//elapsed time since start it could be performance.now() or Date().getTime()

yourLoopFunction(function(time){ 
    tween.update(time)
})

#Compilation

$ webpack

#Tests

$ npm run test

Current Tags

  • 2.0.0                                ...           beta (2 years ago)
  • 1.0.7                                ...           latest (3 years ago)

9 Versions

  • 2.0.0                                ...           2 years ago
  • 1.0.7                                ...           3 years ago
  • 1.0.6                                ...           3 years ago
  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 9
Last Day 0
Last Week 9
Last Month 2
Dependencies (2)
Dev Dependencies (10)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |