I want to implement fruit ninja like animation for my html5 banner

Hi.

Here is a very simple and raw sample using Animate CC. Hopefully it is going to help you get started.

Live demo:

index

Preview:

JS code:

var root = this;
var fruits = [];
var particles = [];
var container = root.container;
root.randomRange = function(min, max)
{
    return Math.random() * (max - min + 1) + min;
};
root.lerp = function(start, end, ratio)
{
    return (1 - ratio) * start + ratio * end;
};
// particle prototypes
function Particle(color, radius, index, scaleRatio)
{
    createjs.Shape.call(this, new createjs.Graphics().beginFill(color).drawCircle(0, 0, radius));
    this.ratio = index + 1;
    this.alpha = 1 / this.ratio;
    this.scaleX = this.scaleY = 1 / this.ratio * scaleRatio;
};
Particle.prototype = Object.create(createjs.Shape.prototype);
Particle.prototype.constructor = Particle;
Particle.prototype.move = function()
{
    this.x = root.lerp(this.x, stage.mouseX / stage.scaleX, 1 / this.ratio);
    this.y = root.lerp(this.y, stage.mouseY / stage.scaleY, 1 / this.ratio);
    this.alpha -= 0.1;
};
Particle.prototype.reset = function()
{
    for (var i = particles.length - 1; i >= 0; i--)
        particles.alpha = 1;
};
// fruits prototypes
lib.Fruit.prototype.getReady = function()
{
    this.hit = false;
    this.x = root.randomRange(this.nominalBounds.width * 0.5, canvas.width / stage.scaleX - this.nominalBounds.width * 0.5);
    this.y = this.parent.spawnY + this.nominalBounds.height * 0.5;
    this.vY = 0;
    this.forceY = root.randomRange(30, 40);
    this.frictionY = 0.95;
    this.rotationSpeed = root.randomRange(-10, 10);
    
    this.half0.x = 0;
    this.half0.y = -15;
    this.half0.rotation = 0;
    this.half0.vX = 0;
    this.half0.forceX = 0;
    this.half0.frictionX = 0;
    this.half0.rotationSpeed = 0;
    
    this.half1.x = 0;
    this.half1.y = 15;
    this.half1.rotation = 0;
    this.half1.vX = 0;
    this.half1.forceX = 0;
    this.half1.frictionX = 0;
    this.half1.rotationSpeed = 0;
};
lib.Fruit.prototype.launch = function()
{
    this.offscreen = false;
    this.visible = true;
    this.vY -= this.forceY;
};
lib.Fruit.prototype.spawn = function()
{
    setTimeout(function(scope)
    {
        scope.getReady();
        scope.launch();
    }, root.randomRange(this.parent.minDelay, this.parent.maxDelay), this);
};
lib.Half.prototype.moveX = function()
{
    this.vX *= this.frictionX;
    
    if (!isNaN(this.vX) && this.vX !== undefined)
        this.x += this.vX;
};
lib.Fruit.prototype.moveY = function()
{
    this.vY += this.parent.gravity;
    this.vY *= this.frictionY;
    this.y += this.vY;
};
lib.Fruit.prototype.checkCollision = function(explosionLinkage)
{
    var point = this.globalToLocal(this.stage.mouseX, this.stage.mouseY);
            
    if (!this.hit && this.stage.mouseInBounds && this.hitTest(point.x, point.y))
    {        
        var explosion = new lib[explosionLinkage]();
        explosion.x = this.x;
        explosion.y = this.y;
        container.addChild(explosion);
        
        this.hit = true;
        this.rotationSpeed = 0;
        
        this.half0.vX += root.randomRange(-10, -30);
        this.half0.forceX = root.randomRange(40, 60);
        this.half0.frictionX = 0.85;
        this.half0.rotationSpeed = root.randomRange(-15, 15);
        
        this.half1.vX += root.randomRange(10, 30);
        this.half1.forceX = root.randomRange(40, 60);
        this.half1.frictionX = 0.85;
        this.half1.rotationSpeed = root.randomRange(-15, 15);
    }
};
lib.Fruit.prototype.checkIfOffscreen = function()
{
    if (!this.offscreen && this.y > this.stage.canvas.height / stage.scaleY + this.nominalBounds.height * 0.5)
    {
        this.offscreen = true;
        this.spawn();
    }
};
lib.Fruit.prototype.anim = function()
{
    this.moveY();
    this.half0.moveX();
    this.half1.moveX();
    
    if (!isNaN(this.rotationSpeed) && this.rotationSpeed !== undefined)
        this.rotation += this.rotationSpeed;
        
    if (!isNaN(this.half0.rotationSpeed) && this.half0.rotationSpeed !== undefined)
        this.half0.rotation += this.half0.rotationSpeed;
    
    if (!isNaN(this.half1.rotationSpeed) && this.half1.rotationSpeed !== undefined)
        this.half1.rotation += this.half1.rotationSpeed;
};
// start
root.start = function()
{
    document.body.style.backgroundColor = "#222";
    root.totalParticles = 10;
    container.totalFruits = 5;
    container.gravity = 0.5;
    container.minDelay = 3000;
    container.maxDelay = 6000;
    container.spawnY = canvas.height / stage.scaleY;
    root.createParticles();
    root.createFruits();
    createjs.Ticker.on("tick", root.tickHandler);
    stage.on("stagemousemove", root.stageMouseMoveHandler);
};
root.createParticles = function()
{
    for (var i = 0; i < root.totalParticles; i++)
    {
        var particle = new Particle("#fff", 8, i, 0.75);
        root.addChild(particle);
        particles = particle;
    }
};
root.createFruits = function()
{
    for (var i = 0; i < container.totalFruits; i++)
    {
        var fruit = new lib.Fruit();
        fruit.hit = true;
        container.addChild(fruit);
        fruit.visible = false;
        fruit.spawn();
        fruits = fruit;
    }
};
root.tickHandler = function(e)
{
    var i;
    
    for (i = 0, total = fruits.length; i < total; i++)
    {
        var fruit = fruits;        
        fruit.anim();        
        fruit.checkCollision("Explosion");        
        fruit.checkIfOffscreen();        
    }
    
    for (i = 0, total = particles.length; i < total; i++)
        particles.move();
};
root.stageMouseMoveHandler = function(e)
{
    for (var i = particles.length - 1; i >= 0; i--)
        particles.reset();
};
root.start();

FLA / source / files download:

adobe/animate cc/html5_canvas/fruit_ninja at master · joao-cesar/adobe · GitHub

Regards,

JC

Talk to Halfbrick Studios and they might be able to help you. Halfbrick Studios

They are the creators of fruit ninja.

send an email to the author and ask.  or use public domain art.