如何创建很少出现的动画以及总是出现的动画？ [英] How to create an animation with rarity of it to appear together with animations that always appear?

问题描述

如何创建罕见的动画以及总是出现的动画？

此处的示例：

数字 1 很少出现，例如40％几率。如果未显示，它将以 2 开头，然后在完成2的动画后， 3 将开始。

如果它偶然通过 1 出现，它将出现并向上移动，动画完成后，将播放 2 ，然后在2之后播放， 3 。因此，它们只是作为示例。

2 和 3 将始终显示，但 1 <例如，/ strong>出现40％。在 3 上，我设法为其添加了随机背景机会。我已经在代码上对其进行了注释。

应该不出现 1 ，然后它应该像 display一样显示：无。当我在box1上放置 display：none 时，动画永远不会开始，或者它开始了，但是我看不到它，但是我将其放在了关键帧中。

 

我在想的是，我猜它需要Javascript才能更改 animation-delay CSS属性，我不确定。

这是我到目前为止的内容： https://jsfiddle.net/edy3xjvz/2/

  var box1 = document.getElementById（ box1）; / *具有稀有性的那个* / var box2 = document.getElementById（ box2）; var box3 = document.getElementById（ box3）; / *也许可以给它一种颜色的机会* / var box = document.getElementById（ boxes）; var box3Colors = { blue：90， red：50}; / *蓝色有90％的机率，红色有50％的机率不确定是否正确，但是如果我想添加90％的机率的绿色（如蓝色）怎么办？ * // *可能必须在这里完成，或到达某个区域时，可能需要使用按钮* // * document.onload * / var btn = document.getElementById（ btn）; btn.addEventListener（ click ，startAnimation）; boxes.style.display = none; function randomizerWithChances（input）{var array = []; for（输入中的变量项）{if（input.hasOwnProperty（item））{for（var i = 0; i  

  #boxes {} .box {display：inline-block;职位：相对高度：50px；宽度：50像素；左边距：20px；}＃box1 {background：＃00afe8;}＃box2 {background：绿色；}＃box3 {background：蓝色；} @ keyframes box1-up {0％{top：70px;职位：相对可见度：可见；} 100％{top：0px;职位：相对可见性：可见；}} @关键帧混合{0％{不透明度：0； } 100％{不透明度：1； }}＃box1 {顶部：70像素； / *显示：无；不能以此为起点，我希望当它不存在时不应该显示，但要显示：没有，它不起作用，因为它永远不会出现，然后* / / * position：absolute;可见性：隐藏； * / / *因此必须使用它，但是当使用它时它不起作用，因此框在某种程度上处于上行https://i.imgur.com/3vER5ja.png，所以不确定* /动画：box1-up 2s; animation-fill-mode：转发；}＃box2 {不透明度：0；动画：混合3s； animation-fill-mode：转发； animation-delay：3s;}＃box3 {opacity：0;动画：混合3s； animation-fill-mode：转发； animation-delay：5s;}  

 < div id = 盒子> < div id = box1 class = box>< / div> < div id = box2 class = box>< / div> < div id = box3 class = box>< / div>< / div>< button id = btn style = margin-top：200px;>开始动画< / button> ;  


下面应该有一个按钮。我尝试过的是为 box3 背景颜色放置一个随机化器，这似乎可行。我曾尝试使用 box1 ，但 display：none 打破了它。

I尝试制作一些东西，当动画根本不开始时，box2就像这里没有，但是当我使用 display：none 时，动画永远不会开始为什么。
https://jsfiddle.net/edy3xjvz/3/

然后我将其删除，因此这就是您在上面的代码段中看到的内容。 https://jsfiddle.net/edy3xjvz/4/

解决方案

我认为动画处理（如应如何将其随机化，然后对其他动画进行处理）必须手动完成，但您可以保存值

但是我所做的基本上是一个基本概念，您可以做更多的工作，但是必须调整延迟和所有这些工作。 / p>

这是第一个概念：

https://jsfiddle.net/8z9obyLh/

此外，您还必须注意，一旦显示消失，则延迟

另一种方法有点复杂，但是只是看一下它是如何完成的。

p>

Tbh，应该有另一种方法可以做到这一点，

https://jsfiddle.net/d25kx6cj/5/

  var box1 = document.getElementById（ box1）; / *具有稀有性的那个* / var box2 = document.getElementById（ box2）; var box3 = document.getElementById（ box3）; / *也许给它一种颜色的机会* / var box = document.getElementById（ boxes）; var box3Colors = { blue：90， red：50}; var btn = document.getElementById（ btn ）; btn.addEventListener（ click，toggleAnimation）; boxes.classList.add（ deactivated）; function randomizerWithChances（input）{var array = []; for（输入中的变量项）{if（input.hasOwnProperty（item））{for（var i = 0; i  

  #boxes {} .active {display：inline-block！important;}。停用{显示：none！important; / *可见性：隐藏！重要； * /}。box {display：inline-block;职位：相对高度：50px；宽度：50像素；左边距：20px；}＃box1 {background：＃00afe8;}＃box2 {background：绿色；}＃box3 {background：蓝色；}＃box4 {background：橙色；} @ keyframes box1-up {0％{top ：70px；} 100％{top：0px;}} @ keyframes box1-down {0％{top：0px;} 100％{top：70px; opacity：0;}} @ keyframes box4-anim {0％{height：50px;宽度：50像素；变换：比例尺（0.5）旋转（0deg）; } 100％{高度：50像素；宽度：50像素；变换：标度（1）旋转（180deg）; }} @关键帧混合{0％{不透明度：0; } 100％{不透明度：1； }}＃box1 {顶部：70像素；显示：无；动画：box1-up 2s，box1-down 3s； animation-fill-mode：转发；}＃box2 {不透明度：0；动画：混合3s； animation-fill-mode：转发； / *动画延迟：3秒； * /}＃box3 {不透明度：0；动画：混合3s，反向混合4s； animation-fill-mode：转发；动画延迟：3秒，6秒； / *两种延迟一起开始。在这种情况下，您可能希望另一个延迟是第一个延迟的两倍，但是可能不是每次* /}＃box4 {display：none;高度：0px；宽度：0px；动画：box4-anim 1s；动画填充模式：转发；}  

 < div id = boxes> < div id = box1 class = box>< / div> < div id = box2 class = box>< / div> < div id = box4 class = box>< / div> < div id = box3 class = box>< / div>< / div>< button id = btn style = margin-top：200px;>开始动画< / button> ;  

How to create an animation with rarity of it to appear together with animations that always appear?

Example here:

The number 1 has a rare chance to appear, let's say 40% chance. When it doesn't appear, it will start with 2 then after the animation of 2 is done 3 will start.

Should it 1 make it through the chance, it will appear and move up and after its animation is done, 2 will play and then after 2, 3 will play. So they just blend in as example.

2 and 3 will always appear, but 1 has a 40% for it to appear, as example. On 3 I've managed to put a random background chance on it. I've commented it on the code.

Should 1 not appear, then it should act like display: none. When I put display: none however on box1, the animation never starts, or it started but I can't see it, but I put it in the keyframes.

 

What I'm thinking is that, I guess it requires Javascript so it can change the animation-delay CSS property, I'm not sure though.

This is what I have so far: https://jsfiddle.net/edy3xjvz/2/

var box1 = document.getElementById("box1"); /* The one with the rarity */

var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3"); /* Maybe give it a chance of which color */

var boxes = document.getElementById("boxes");

var box3Colors = {"blue": 90, "red": 50}; /* Blue has 90% chance and red has 50% not sure if done right, but what if I want to add a "green" with the chance of 90% too like "blue"???  */


/* Probably has to be done here, or when reaching a certain area, maybe with a button */
/*document.onload*/

var btn = document.getElementById("btn");
btn.addEventListener("click", startAnimation);

boxes.style.display = "none";

function randomizerWithChances(input) {
    var array = [];
    for(var item in input) {
        if ( input.hasOwnProperty(item) ) {
            for( var i=0; i<input[item]; i++ ) {
                array.push(item);
            }
        }
    }
    return array[Math.floor(Math.random() * array.length)];
}


/* Start Animation */
function startAnimation() {
	boxes.style.display = "none"; /* to replay but doesn't work*/
  
	/* Do radomize stuff */
  /* Don't really know for box1 */
  
 
  /* I've tried box3, like that before
  var random2 = box3Colors[Math.floor(Math.random() * box3Colors.length)]
  box3.style.backgroundColor = random2;*/
  box3.style.backgroundColor = randomizerWithChances(box3Colors);

	/* Animation starts here */
	boxes.style.display = "block";
}

#boxes {
  
}

.box {
  display: inline-block;
  position: relative;
  height: 50px;
  width: 50px;
  margin-left: 20px;
}

#box1 {background: #00afe8;}
#box2 {background: green;}
#box3 {background: blue;}

@keyframes box1-up {
  0% { top: 70px; position: relative; visibility: visible;}
  100% {top: 0px; position: relative; visibility: visible;}
}

@keyframes blend {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


#box1 {
  top: 70px;
  /* display: none; Can't start with this I wanted that when it isn't there, it should not appear but with display: none it didn't work because it can never appear then */
  /*position: absolute; visibility: hidden;*/ /* So had to use this but when using this
                                             it didn't work the box is somehow upside 
                                             https://i.imgur.com/3vER5ja.png so not sure */
  animation: box1-up 2s;
  animation-fill-mode: forwards;
}


#box2 {
  opacity: 0;
  animation: blend 3s;
  animation-fill-mode: forwards;
  animation-delay: 3s;
}

#box3 {
  opacity: 0;
  animation: blend 3s;
  animation-fill-mode: forwards;
  animation-delay: 5s;
}

<div id="boxes">
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box3" class="box"></div>
</div>


<button id="btn" style="margin-top: 200px;">Start Animation</button> 

Below there should be a button. What I've tried is to put a randomizer for box3 background color, seemed to work. I've tried to use box1 but display: none broke it.

I've tried to make something that when the animation doesn't start at all, that box2 is like not here, but when I use display: none the animation never starts not sure why. https://jsfiddle.net/edy3xjvz/3/

Then I removed it so this is what you seen on the snippet above. https://jsfiddle.net/edy3xjvz/4/

解决方案

I think the animation handling, as in how it should be randomized and then what happens with the other animations, has to be kinda done manually but you can save the values or get them.

But that what I made is basically a basic concept and you can do even more stuff, but you have to adjust the delays and all that stuff.

This is the first concept:

https://jsfiddle.net/8z9obyLh/

Also you have to notice that once display is gone that the delay will start from there depending on which element just got out of display none.

The other one has a bit complex way but just look at it and how it's done.

Tbh, there should be another way to do this, which I think there is.

https://jsfiddle.net/d25kx6cj/5/

var box1 = document.getElementById("box1"); /* The one with the rarity */

var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3"); /* Maybe give it a chance of which color */

var boxes = document.getElementById("boxes");

var box3Colors = {"blue": 90, "red": 50};

var btn = document.getElementById("btn");
btn.addEventListener("click", toggleAnimation);

boxes.classList.add("deactivated");

function randomizerWithChances(input) {
    var array = [];
    for(var item in input) {
        if ( input.hasOwnProperty(item) ) {
            for( var i=0; i<input[item]; i++ ) {
                array.push(item);
            }
        }
    }
    /*console.log(array)
    var randomizerValue = Math.floor(Math.random() * array.length);
    console.log(randomizerValue)*/
    return array[Math.floor(Math.random() * array.length)];
}

function propertyFromStylesheet(selector, attribute) {
    var value;

    [].some.call(document.styleSheets, function (sheet) {
        return [].some.call(sheet.rules, function (rule) {
            if (selector === rule.selectorText) {
                return [].some.call(rule.style, function (style) {
                    if (attribute === style) {
                        value = rule.style.getPropertyValue(attribute);
                        return true;
                    }

                    return false;
                });
            }

            return false;
        });
    });

    return value;
}

var box1_defaultDurs = propertyFromStylesheet("#box1", "animation-duration");
var box2_defaultDur = parseFloat(propertyFromStylesheet("#box2", "animation-duration"));
var box4_defaultDur = parseFloat(propertyFromStylesheet("#box4", "animation-duration"));
var box3_defaultDurs = propertyFromStylesheet("#box3", "animation-duration");

var box1AppearChance = {no:6, yes:4} /* 40% Appear chance I guess*/
var box4AppearChance = {no:8, yes:2}

/*
defaultDurs.split(",").map(function(item) {
  return item.trim();
});*/

var box1_defaultDur = box1_defaultDurs.split(",").map(function(item) {
  return item.trim();
});
var box3_defaultDur = box3_defaultDurs.split(",").map(function(item) {
  return item.trim();
});


var box1_defaultDurStart = parseFloat(box1_defaultDur[0]);
var box1_defaultDurEnd = parseFloat(box1_defaultDur[1]);

var box3_defaultDurStart = parseFloat(box3_defaultDur[0]);
var box3_defaultDurEnd = parseFloat(box3_defaultDur[1]);

var box3_delays = [];


function animationHandler() {
  box3.style.backgroundColor = randomizerWithChances(box3Colors);
  
  var box1Value = randomizerWithChances(box1AppearChance);
  var box4Value = randomizerWithChances(box4AppearChance);
  /*console.log(box1Value)*/
  
  box3_delays[0] = "0s"; /* Put first delay value */
  
  if (box1Value == "yes") {
  	box1.classList.add("active");
    
    box2.style.animationDelay = box1_defaultDurStart + "s";
    box3_delays[0] = box1_defaultDurStart + "s";
 }
 
 if (box1Value == "yes" || box4Value == "yes") {
  	box3_delays[0] = parseFloat(box3_delays[0]) + box2_defaultDur + "s";
  }
  
    /*box3.style.animationDelay = box3_defaultDurs.split(",").map(function(item) {
    	var itemTrimmed = item.trim();

    	return parseFloat(itemTrimmed) + box1_defaultDurStart + box2_defaultDur + "s";
    });
  }*/
  /* Use this incase you have to summarize something with two delays, if it has 0s you might want to do something else or check if it's the first one in the array just to leave it alone. But in this case I didn't needed it */
  
 
 /* box4.style.animationDelay = "0s"; To prevent NaN 
 Don't do this it it just breaks it just check it
 */
  
  if (box4Value == "yes") {
  	box4.classList.add("active");
    
    if ( isNaN(parseFloat(box2.style.animationDelay)) ) {
    	box4.style.animationDelay = box2_defaultDur + "s";
    }
    else if ( !isNaN(parseFloat(box2.style.animationDelay)) ) {
      box4.style.animationDelay = parseFloat(box2.style.animationDelay) + box2_defaultDur + "s";
    } /* box4 doesn't have a delay and we set one */
    
  	box3_delays[0] = parseFloat(box3_delays[0]) + box4_defaultDur + "s";
    /* Delay of box3 is getting extended because of box4 when it appears */
	}


  if (box1Value == "yes" || box4Value == "yes") {
  	box3.style.animationDelay = [ parseFloat(box3_delays[0]) + "s", parseFloat(box3_delays[0]) + parseFloat(box3_defaultDurStart) + "s" ];
  }
  
 if (box1Value == "yes") {
  	if (box4Value == "no") {
      box1.style.animationDelay = ["0s", box2_defaultDur + box3_defaultDurStart + box1_defaultDurStart + box3_defaultDurEnd + "s"]
    }
   	else {
    	box1.style.animationDelay = ["0s", box2_defaultDur + box3_defaultDurStart + parseFloat(box4.style.animationDelay) + box1_defaultDurStart + box3_defaultDurEnd + "s"];
    }
    /* The + 2 is because of the box1_defaultDurStart which is needed */
    /* And box3_defaultDurEnd also needed in this case */
	}
}

function animationHandlerReset() { 
	box1.classList.remove("active");
  box4.classList.remove("active"); /* And don't forget to remove the class at the end*/
  
  /* Reset to default to stylesheet */
  box1.style.removeProperty("animation-delay");
  box2.style.removeProperty("animation-delay");
  box3.removeAttribute("style"); /* or you could do this if you didn't give it any inline style by default */
  box4.style.removeProperty("animation-delay");
} 


function toggleAnimation() {
	if (!boxes.classList.contains("deactivated")) {
  	animationHandlerReset();
		boxes.classList.add("deactivated");
    btn.innerHTML = "Start Animation";
  }
 	else if (boxes.classList.contains("deactivated")) {
  	animationHandler();
  	boxes.classList.remove("deactivated");
    btn.innerHTML = "Stop Animation"
  }
}

#boxes {
  
}

.active {
  display: inline-block!important;
}

.deactivated {
  display: none!important;
  /*visibility: hidden!important;*/
}

.box {
  display: inline-block;
  position: relative;
  height: 50px;
  width: 50px;
  margin-left: 20px;
}

#box1 {background: #00afe8;}
#box2 {background: green;}
#box3 {background: blue;}
#box4 {background: orange;}

@keyframes box1-up {
  0% { top: 70px;}
  100% {top: 0px;}
}

@keyframes box1-down {
  0% { top: 0px;}
  100% {top: 70px; opacity: 0;}
}

@keyframes box4-anim {
  0% { height: 50px; width: 50px; transform: scale(0.5) rotate(0deg); }
  100% { height: 50px; width: 50px; transform: scale(1) rotate(180deg); }
}

@keyframes blend {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


#box1 {
  top: 70px;
  display: none;
  animation: box1-up 2s, box1-down 3s;
  animation-fill-mode: forwards;
}


#box2 {
  opacity: 0;
  animation: blend 3s;
  animation-fill-mode: forwards;
  /*animation-delay: 3s;*/
}

#box3 {
  opacity: 0;
  animation: blend 3s, blend 4s reverse;
  animation-fill-mode: forwards;
  animation-delay: 3s, 6s; /* Both delays start together. Probably you want the other delay to be the twice as the size of the first one in this case for the end, but maybe not everytime */
}

#box4 {
  display: none;
  height: 0px;
  width: 0px;
  animation: box4-anim 1s;
  animation-fill-mode: forwards;
}

<div id="boxes">
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box4" class="box"></div>
  <div id="box3" class="box"></div>
</div>


<button id="btn" style="margin-top: 200px;">Start Animation</button> 

这篇关于如何创建很少出现的动画以及总是出现的动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！