首页 新闻 搜索 专区 学院

(诚心求助,有个方向就结贴)canvas中写了一段粒子动画。通过点击事件触发;第二次触发动画就闪动开了怎么回事()

0
悬赏园豆:100 [已关闭问题] 关闭于 2016-08-19 09:39

canvas中写了一段粒子动画。通过点击事件触发;第二次触发动画就闪动开了怎么回事

问题补充:
function arrow(canvas,obj,posArr,colorArr,animateArr) {
    //canvas和2d对象
    this.canvas=canvas;
    this.obj=obj;
    //固定位置(起始点,结束点)
    this.grapos=animateArr?animateArr[0]:0.2; //渐变起始点
    this.speed=animateArr?animateArr[1]:0.05;  //控制动画的速度
    
    this.num=50;//控制动画的时长
    this.flag=true;//动画的开关

    //绘制箭头的点坐标
    this.pos1_x=posArr[0];//上曲线起点坐标            **************渐变起点*************************
    this.pos1_y=posArr[1];

    this.pos2_x=posArr[2];//控制点1的坐标
    this.pos2_y=posArr[3];

    this.pos3_x=posArr[4];//上曲线终点坐标
    this.pos3_y=posArr[5];


    //箭头三角的坐标
    this.pos4_x=posArr[6];
    this.pos4_y=posArr[7];

    this.pos5_x=posArr[8];//                       ********************渐变终点**********************
    this.pos5_y=posArr[9];

    this.pos6_x=posArr[10];
    this.pos6_y=posArr[11];


    //下曲线起点坐标
    this.pos7_x=posArr[12];
    this.pos7_y=posArr[13];

    //下曲线控制点坐标
    this.pos8_x=posArr[14];
    this.pos8_y=posArr[15];

    //渐变的颜色设置
    this.beginColor=colorArr?colorArr[0]:"rgba(255,255,255,0)";
    this.moveColor=colorArr?colorArr[1]:"rgba(33,126,216,0.5)";
    this.endColor=colorArr?colorArr[2]:"rgba(33,126,216,1)";
}

arrow.prototype={
    draw:function () {
        var gra=this.obj.createLinearGradient(this.pos1_x,this.pos1_y,this.pos6_x,this.pos6_y);
        gra.addColorStop(0, this.beginColor);
        gra.addColorStop(this.grapos, this.moveColor);
        gra.addColorStop(1, this.endColor)

        //上曲线
        this.obj.beginPath();
        this.obj.moveTo(this.pos1_x, this.pos1_y);   //箭头尾部(起始点)
        this.obj.quadraticCurveTo(this.pos2_x, this.pos2_y, this.pos3_x, this.pos3_y);  //绘制上曲线

        //三角
        //this.obj.lineTo(225, 120);
        this.obj.lineTo(this.pos4_x, this.pos4_y);
        this.obj.lineTo(this.pos5_x, this.pos5_y);
        this.obj.lineTo(this.pos6_x, this.pos6_y);
        this.obj.lineTo(this.pos7_x, this.pos7_y)

        //下曲线
        this.obj.quadraticCurveTo(this.pos8_x, this.pos8_y, this.pos1_x, this.pos1_y);
        this.obj.fillStyle = gra;
        this.obj.fill();
    },

    //动画
    play:function () {
        this.flag=false;
        var that=this;
        var t1=setInterval(function () {
            that.num--;
            if (that.num<=0){
                clearInterval(t1);
                that.obj.clearRect(0,0,1000,1000);
                that.flag=true;
                that.num=50;
                return;
            }
            if (that.grapos > 0.9) {
                that.grapos = 0.2;
            } else {
                that.grapos += that.speed;
            }
            that.obj.clearRect(0,0,1000,1000)
            that.draw();
        },100)
    },
    
    //清空画布操作
    clearAll:function () {
        this.obj.clearRect(0,0,1000,1000);
    }
    
}



leywis的主页 leywis | 初学一级 | 园豆:10
提问于:2016-08-10 17:20
< >
分享
所有回答(4)
0

代码贴出来看一下

世间无码 | 园豆:20 (初学一级) | 2016-08-10 17:26

我站出来了,一个渐变的箭头动画。不同的事件可以画出不一样的箭头动画,但是如果多次点击会闪。开关也许加的地方不对,也没什么反应

支持(0) 反对(0) leywis | 园豆:10 (初学一级) | 2016-08-10 17:32

这只是具有相同问题的例子。原动画有点不方便

支持(0) 反对(0) leywis | 园豆:10 (初学一级) | 2016-08-10 17:34
0

一般也不同时触发,没人不解决了

leywis | 园豆:10 (初学一级) | 2016-08-15 09:32
0

想看下效果图是怎样的

随心而动~MF | 园豆:79 (初学一级) | 2016-08-15 14:31

实际的效果图在上传了,有兴趣可以看下(不是上面代码的运行结果,不过具有相同的闪动问题)

支持(0) 反对(0) leywis | 园豆:10 (初学一级) | 2016-08-18 10:31
0

你的问题需要什么样的效果图?现在做的效果图又是怎样的?

Mask1 | 园豆:113 (初学一级) | 2016-08-17 15:49

就是在canvas中不断画出一些粒子构成一个曲线的运动轨迹。当触发一个事件时去执行他。目前的问题是如果这段粒子没有运动完再次触发的话  ,动画效果会闪动

支持(0) 反对(0) leywis | 园豆:10 (初学一级) | 2016-08-18 10:26

我实际代码(不是贴出来的代码,但是问题都一样)的运行效果图上传了,其中红色的就是一些圆形粒子生成的。

支持(0) 反对(0) leywis | 园豆:10 (初学一级) | 2016-08-18 10:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册