Twojs闪烁圈

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Twojs闪烁圈相关的知识,希望对你有一定的参考价值。

我正在编写图形编辑器。我需要突出显示一个圆圈,然后在屏幕中心制作该圆圈并将缩放比例设置为2.如果圆圈已经突出显示,则设置它将其切换并设置为普通圆圈。我需要的是至少让圈子在关闭之前闪烁。

我没看到如何让圆圈眨眼。有谁知道“two.js”如何做到这一点。我知道它在函数two.update();

    // Render loop
var temps = 0;
two.bind('update', function(){
    if  (selectedNodes.length > 0){
        if (temps > 0) {    
            temps -= 0.02;
            for(var i = 0; i < selectedNodes.length; i++){
                selectedNodes[i].circle.fill = 'yellow';
                selectedNodes[i].circle.scale = 1.3;
                selectedNodes[i].circle.stroke = "red";
                selectedNodes[i].circle.linewidth = 2;
            }
        } else {
            for(var i = 0; i < selectedNodes.length; i++){
                selectedNodes[i].circle.fill = '#FF8000';
                selectedNodes[i].circle.scale = 1;
                selectedNodes[i].circle.noStroke();
            }
        }
    }
});

并触发眨眼

function Blink(){
    temps = 1;
}

这是眨眼的最好方法(即使它只闪烁一次)

这是一个JsFiddle https://jsfiddle.net/hichem147/uf0b82ry/

要使用它:单击[(+)节点],然后创建一些节点,然后单击[选择]并单击一个圆圈,然后单击[闪烁]按钮。

答案

最后,我使用了setTimeout和setInterval

    function MakeCircleBlink(){
      var count = 5;

      if (count > 0) {
         var x = setInterval(function(){ 
            count--;
            console.log(count);
            if (count ===0) {clearInterval(x);}
            blink(); 
          }, 1000);  


      }  
    }

    function blink(n){
      n--;
    circle1.stroke = 'red';
    circle1.linewidth = 4;
    circle1.scale = 1.0;

    setTimeout(function(){ circle1.noStroke(); circle1.scale = 1;}, 500);
    }

这是一个显示它如何工作的codepen:https://codepen.io/hichem147/pen/jvjKzP?editors=0010

以上是关于Twojs闪烁圈的主要内容,如果未能解决你的问题,请参考以下文章

调用 replace() 方法后片段闪烁/闪烁

片段内的VideoView导致黑屏闪烁

sh HBA和驱动器固件闪烁片段

android,在先做了popStack之后,如何避免用FragmentTransaction替换片段时出现闪烁

从其他片段启动视频视图片段时显示问题?

片段如何设置属性“windowSoftInputMode”