mo.js-定义多边形边的长度

时间:2019-05-31 13:23:43

标签: javascript

我正在使用mo.js创建涉及三角形的动画,并且我希望这些三角形是等腰三角形(2个相等的边)。如何定义多边形中每条线的长度?

class AnimateTriangles {

    constructor() {
        this.triangles = new mojs.Burst({
            /************Swirl animation:
            //size of burst
            radius: { 0 : 100,easing: 'cubic.out'},
            //rotate in CSS
            angle: {1080 : 0,easing: 'quad.out'},
            *************/
            left: 0, top: 0,
            count: 3,
            children : {
                //define triangle dimensions
                shape: 'polygon',
                points: 3,
                //animate radius of triangle from 10 to 100
                radius: { 10 : 100 },
                fill: ['red','white','blue'],
                duration: 2000
            }
        });
    }

    animate(e) {
        this.triangles
        .tune({ x: e.pageX, y: e.pageY, })
        //so it will play every time screen is tapped
        .replay();
    }
}

let animateTriangles = new AnimateTriangles
document.addEventListener('touchend', function(e) {
    animateTriangles.animate(e)
});

0 个答案:

没有答案