Tweenmax在trun中突出显示

问题描述 投票:0回答:1

我想轮流突出显示(一个突出显示其他人隐藏,另一个突出显示,其他隐藏.... cyecling)这些是我的代码

HTML:

<div id="lens_flare">
   <div id="lens_flare0" class="test"></div>
   <div id="lens_flare1" class="lens_flare test"></div>
   <div id="lens_flare2" class="lens_flare test"></div>
   <div id="lens_flare3" class="lens_flare test"></div>
  <div id="lens_flare4" class="lens_flare test"></div>
  <div id="lens_flare5" class="lens_flare test"></div>
  <div id="lens_flare6" class="lens_flare"></div>
</div>

CSS:

 body{ 
   margin:20px;
 }

#lens_flare{
  position:relative;
  display: flex;
}

.test {
  width: 100px;
  height: 100px;
  opacity: 0
}

#lens_flare .lens_flare {
/*   position:absolute;
  top:0;
  left:0; */
  width:100px;
  height:100px;
  opacity: 0;
}

.lens_flare {
   width:100px;
   height:100px;
   background:#CC0000;
 }

#lens_flare0 {
   background:black;
   z-index:1;
 }

#lens_flare1 {
   background:#CC0000;
   z-index:1;
 }

#lens_flare2 {
   background:#40A1F7;  
   z-index:2;
 }

#lens_flare3 {
   background:#0C8714;  
   z-index:3;
 }

#lens_flare4 {
   background:purple;  
   z-index:3;
 }

#lens_flare3 {
   background:pink;  
   z-index:3;
 }
#lens_flare6 {
   background:black;  
   z-index:3;
 }

JS:

 var tl = new TimelineMax({repeat: 100, yoyo:false});
var t2 = new TimelineMax({repeat: 100, yoyo:false});

t2.staggerTo(".test", 1.5,
    {opacity:0}
 , 1.5);

tl.staggerTo(".lens_flare", 1.5,
    {opacity:1}
 , 1.5);

它只在第一次运行时才成功。我还应该做什么来反过来总是突出?

(堆栈要求我添加更多细节,但我已经告诉它了,所以在这里添加更多虚拟单词堆栈要求我添加更多细节,但我告诉它,所以在这里添加更多虚拟单词堆栈要求我添加更多细节但我告诉它,所以在这里添加更多的虚拟单词堆栈要求我添加更多细节,但我告诉它,所以在这里添加更多虚拟单词堆栈要求我添加更多细节,但我告诉它,所以在这里添加更多虚拟单词堆栈要求我添加更多细节,但我告诉它,所以在这里添加更多的虚拟单词)

pixi.js tweenmax
1个回答
1
投票

只需要进行简单的更改,重复从100到-1,这将使其无限次运行。

var tl = new TimelineMax({repeat: -1, yoyo:false});
var t2 = new TimelineMax({repeat: -1, yoyo:false});

t2.staggerTo(".test", 1.5,
    {opacity:0}
 , 1.5);

tl.staggerTo(".lens_flare", 1.5,
    {opacity:1}
 , 1.5);
© www.soinside.com 2019 - 2024. All rights reserved.