LOG

マウス追従アニメーション

デモ

Star.js

class Star{
    get SIZE(){ return 6 }
    get COLOR(){ return 0xFFFFFF }
    get MAX_LINE_SIZE(){ return 100 }
    get x(){ return this.graphics.x }
    set x(pos){ this.graphics.x = pos }
    get y(){ return this.graphics.y }
    set y(pos){ this.graphics.y = pos }
    // ===========================================================================
    // コンストラクタ
    // ===========================================================================
    constructor(_stage,_x,_y){
        let SIZE      = this.SIZE;
        let COLOR     = this.COLOR;
        this.graphics = new PIXI.Graphics();
        this.x        = _x;
        this.y        = _y;
        let g         = this.graphics;
        g.beginFill(COLOR);
        g.drawCircle(0,0,SIZE);
        g.endFill();
        _stage.addChild(g);
    }
}

script.js

// =============================================================================
// global
// =============================================================================
let W      = window.innerWidth;
let H      = window.innerHeight;
let mouseX = 0;
let mouseY = 0;
let stars  = [];
let renderer;
let stage;
let star;

// =============================================================================
// events
// =============================================================================
// events:resize
// -----------------------------------------------------------------------------
let resizeObserve = {};
window.addEventListener('resize',(()=>{
    let timer;
    let events  = resizeObserve;
    let observe = (e)=>{
        W = window.innerWidth;
        H = window.innerHeight;
        for(let key in events) events[key](e);
    };
    return ()=>{
        if(timer) clearTimeout(timer);
        timer = setTimeout(observe,250);
    }
})());
// -----------------------------------------------------------------------------
// events:mouseove
// -----------------------------------------------------------------------------
let mouseMoveObserve = {};
window.addEventListener('mousemove',(e)=>{
    let events = mouseMoveObserve;
    mouseX     = e.clientX;
    mouseY     = e.clientY;
    for(let key in events) events[key](e);
});
// -----------------------------------------------------------------------------
// events:animation
// -----------------------------------------------------------------------------
let animationObserve = {};
let animate          = function(){
    requestAnimationFrame(animate);
    for(let key in animationObserve) animationObserve[key]();
    renderer.render(stage);
}

// =============================================================================
//
// 実行
//
// =============================================================================

resizeObserve.resizeRenderer = ()=>{
    renderer.resize(W,H);
}

// -----------------------------------------------------------------------------
// 環境の設定
// -----------------------------------------------------------------------------
renderer = PIXI.autoDetectRenderer(800,600,{
    view      : document.querySelector('canvas'),
    antialias : true
});
stage = new PIXI.Container();
star  = new Star(stage,Math.random() * W,Math.random() * H);
// -----------------------------------------------------------------------------
// starアニメーション
// -----------------------------------------------------------------------------
animationObserve.star = ()=>{
    // ゴール地点(マウス座標)と現在地点(star座標)の差を出して遅延係数で割り
    // 現在の位置に追加する
    star.x += (mouseX - star.x) / 10;
    star.y += (mouseY - star.y) / 10;
}
window.dispatchEvent(new Event('resize'));
animate();

配列版

デモ

script.js (※Star.jsは同じ)

// =============================================================================
// global
// =============================================================================
let W       = window.innerWidth;
let H       = window.innerHeight;
let mouseX  = 0;
let mouseY  = 0;
let stars   = [];
let starNum = 5;
let renderer;
let stage;

// =============================================================================
// events
// =============================================================================
// events:resize
// -----------------------------------------------------------------------------
let resizeObserve = {};
window.addEventListener('resize',(()=>{
    let timer;
    let events = resizeObserve;
    let observe = (e)=>{
        W = window.innerWidth;
        H = window.innerHeight;
        for(let key in events) events[key](e);
    };
    return ()=>{
        if(timer) clearTimeout(timer);
        timer = setTimeout(observe,250);
    }
})());

// -----------------------------------------------------------------------------
// events:mouseove
// -----------------------------------------------------------------------------
let mouseMoveObserve = {};
window.addEventListener('mousemove',(e)=>{
    let events = mouseMoveObserve;
    mouseX     = e.clientX;
    mouseY     = e.clientY;
    for(let key in events) events[key](e);
});
// -----------------------------------------------------------------------------
// events:animation
// -----------------------------------------------------------------------------
let animationObserve = {};
let animate          = function(){ 
    requestAnimationFrame(animate);
    for(let key in animationObserve) animationObserve[key]();
    renderer.render(stage);
}

// =============================================================================
//
// 実行
//
// =============================================================================
resizeObserve.resizeRenderer = ()=>{
    renderer.resize(W,H);
}
// -----------------------------------------------------------------------------
// 環境の設定
// -----------------------------------------------------------------------------
renderer = PIXI.autoDetectRenderer(800,600,{
    view      : document.querySelector('canvas'),
    antialias : true
});
stage = new PIXI.Container();

for(let i=0,l=starNum; i<l; i++){
    stars.push(new Star(
        stage,
        Math.random() * W,
        Math.random() * H
    ));
}
// -----------------------------------------------------------------------------
// starアニメーション
// -----------------------------------------------------------------------------
animationObserve.star = ()=>{
    let oldStar;
    let star;
    let delay;
    for(let i=0,l=stars.length; i<l; i++){
        star  = stars[i];
        delay = 10;
        // delay = (10 / l) * (i + 1);
        if(i == 0){
            star.x += (mouseX - star.x) / delay;
            star.y += (mouseY - star.y) / delay;
        }else{
            star.x += (oldStar.x - star.x) / delay;
            star.y += (oldStar.y - star.y) / delay;
        }
        oldStar = star;
    }
}

window.dispatchEvent(new Event('resize'));
animate();