我有四个绝对定位的div，每个div都包含png图像和css规则“object-fit：cover”。动画通过逐渐减少每个div的不透明度来进行。使用requestAnimationFrame调用动画函数。
我认为这样的条件不会导致过度使用CPU
所以，有两个问题
1.我可以在UX中使用这样的动画代码吗？
2.如何降低CPU使用率？
这是js代码：
// collection of divs
var sliderWrapperSlide =
document.getElementsByClassName('slider-wrapper__slide');
// collection of buttons
var sliderNavigationButton =
document.getElementsByClassName('slider-navigation__button');
// number of active div. Animation starts from last div
var slidesNumber = sliderWrapperSlide.length - 1;
// all divs get "opacity: 1" and "z-index: 2"
for (var i = 0; i <= slidesNumber; i++) {
sliderWrapperSlide[i].style.opacity = 1;
sliderWrapperSlide[i].style.zIndex = 2;
}
// button of active div gets corresponding class
sliderNavigationButton[slidesNumber].classList.add('slider-navigation__button_active');
// variable to stop animation in the case of button click.
// Default value "1" permits animation
var sliderPlay = 1;
// addEventListener for buttons. It determines required
// number of div and changes "sliderPlay" value to "0" for
// animation break
var sliderNavigation = document.getElementById('id-slider-navigation');
sliderNavigation.addEventListener('click', function(e) {
if (e.target && e.target.nodeName == "A") {
for (var i = 0; i < sliderNavigationButton.length; i++) {
if (sliderNavigationButton[i] == e.target) {
slidesNumber = i;
sliderPlay = 0;
}
}
}
});
// animation function
function opacityImageDecrease() {
var slideOpacity =
Number(sliderWrapperSlide[slidesNumber].style.opacity);
// check whether opacity is not naught and any button is not clicked,
// if it is so opacity of div starts gradually decrease by 0.005
if (slideOpacity != 0 && sliderPlay == 1) {
slideOpacity -= 0.005;
sliderWrapperSlide[slidesNumber].style.opacity = slideOpacity;
requestAnimationFrame(opacityImageDecrease);
} else {
// if opacity is naught or button is pressed
sliderNavigationButton[slidesNumber].classList.remove('slider-navigation__button_active');
slidesNumber -= 1;
// then it checks is any button is pressed.
if (sliderPlay == 0) {
slidesNumber += 1;
sliderWrapperSlide[0].style.zIndex = 2;
for (var j = 0; j < sliderWrapperSlide.length; j++) {
if (j <= slidesNumber) {
sliderWrapperSlide[j].style.opacity = 1;
} else {
sliderWrapperSlide[j].style.opacity = 0;
}
sliderNavigationButton[j].classList.remove('slider-navigation__button_active');
}
sliderNavigationButton[slidesNumber].classList.add('slider-navigation__button_active');
if (slidesNumber == 0) {
sliderWrapperSlide[0].style.zIndex = 3;
for (var i = 1; i < sliderWrapperSlide.length; i++) {
sliderWrapperSlide[i].style.opacity = 1;
}
}
sliderPlay = 1;
requestAnimationFrame(opacityImageDecrease);
// There is simple code for all divs except first div.
} else if (slidesNumber > 0) {
sliderNavigationButton[slidesNumber].classList.add('slider-navigation__button_active');
requestAnimationFrame(opacityImageDecrease);
// That is certain code for first div.
} else if (slidesNumber == 0) {
sliderNavigationButton[slidesNumber].classList.add('slider-navigation__button_active');
sliderWrapperSlide[0].style.zIndex = 3;
for (var i = 1; i < sliderWrapperSlide.length; i++) {
sliderWrapperSlide[i].style.opacity = 1;
}
requestAnimationFrame(opacityImageDecrease);
// And some code to finish animation cycle and start another one.
} else if (slidesNumber == -1) {
sliderWrapperSlide[0].style.zIndex = 2;
sliderWrapperSlide[0].style.opacity = 1;
slidesNumber = sliderWrapperSlide.length - 1;
sliderNavigationButton[slidesNumber].classList.add('slider-navigation__button_active');
requestAnimationFrame(opacityImageDecrease);
}
}
}
requestAnimationFrame(opacityImageDecrease);