transition-ani-js

Transition.js

JavaScript transition engine for easy animations

npm

$ npm install transition-ani-js

   var sprite = {};
   var from = {
		 x: 0,
		 y: 0
   };
   var to={
	   x: 100,
	   y: 100
   };

   new Transition(sprite,from).to(to);

var values = { x: 0, y: 0 };
var trans = new Transition(values)
	.to({ x: 100, y: 100 }, 1000)
	.on("update",function(target) {
		console.log(target.x, target.y);
	})
	.start();

requestAnimationFrame(animate);

function animate(time) {
	requestAnimationFrame(animate);
	Transition.update(time);
}

var trans = new Transition({ x: 0, y: 0 })
	.to({ x: 100, y: 100 }, 1000)
	.to({ x: 100, y: "+100"},{ duration: 2000, delay: 1000 })
	.on("update",function(target) {
		console.log(target.x, target.y);
	})
	.start();

requestAnimationFrame(animate);

function animate(time) {
	requestAnimationFrame(animate);
	Transition.update(time);
}

Show

index.html

demo.html

Transition.Easing

缓动算法引用tween.js

Linear:{None: ƒ}

Quad:{In: ƒ, Out: ƒ, InOut: ƒ}

Cubic:{In: ƒ, Out: ƒ, InOut: ƒ}

Back:{In: ƒ, Out: ƒ, InOut: ƒ}

Bounce:{In: ƒ, Out: ƒ, InOut: ƒ}

Circ:{In: ƒ, Out: ƒ, InOut: ƒ}

Elastic:{In: ƒ, Out: ƒ, InOut: ƒ}

Expo:{In: ƒ, Out: ƒ, InOut: ƒ}

Quart:{In: ƒ, Out: ƒ, InOut: ƒ}

Quint:{In: ƒ, Out: ƒ, InOut: ƒ}

Sine:{In: ƒ, Out: ƒ, InOut: ƒ}

Transition.Events

{
    "START": "start",
    "UPDATE": "update",
    "NEXT": "next",
    "COMPLETE": "complete",
    "STOP": "stop",
    "REPEAT": "repeat"
}

Transition Methods

   Transition.play();
   Transition.pause();
   Transition.update(time);

   console.log(Transition.now());
   
   doument.addEventListener("visibilitychange",function(){
        if(document.hidden)
	{
	    Transition.pause();
	}
	else
	{
	    Transition.play();
	}
   },false);

   Transition.delay(function(){
	   console.log("3秒后执行");
   }，3000);

Methods

transition.start();
transition.play();
transition.pause();
transition.stop();
transition.update();

transition.yoyo(boolean);
transition.repeat(int);

timeline:

|-------------------|---------------------|

start()        pause()/play()           stop()

properties:

tarnsition.paused    //true or false