更改对象属性时如何添加不透明度

Question

我有下一个示例https://codepen.io/mihail-kuznecow/pen/mjoYzz

这是animejs库https://github.com/juliangarnier/anime。 代码段示例：

 const members = [{
        name: "Вася Пупки"
    }, {
        name: "Дмитрий Васильев"
    }, {
        name: "Анатолий Вассерман"
    }, {
        name: "Петросян Вазгенович"
    }, {
        name: "Гоша Вазгенович"
    }, {
        name: "Миша Вазгенович"
    }, {
        name: "Саша Вазгенович"
    }, {
        name: "Анатолий Вазгенович"
    }, {
        name: "Энакентий Вазгенович"
    }, {
        name: "Динис Вазгенович"
    }, {
        name: "Иван Вазгенович"
    }, {
        name: "Руслан Вазгенович"
    }, {
        name: "Богдан Вазгенович"
    }, {
        name: "Костян Вазгенович"
    }];
window.onload = function() {
    const button = document.getElementById('start');

    if(button){
        button.addEventListener('click', () => rollNames(document.querySelector('.name'), members));
    }



    function rollNames(domNode, names) {
        const animatedName = {value: 0};
        let name;
        if (domNode) {
            anime({
                targets: [animatedName, domNode],
                value: names.length - 1,
                round: 1,
                easing: 'easeInOutCirc',
                duration: 5000,
                update: function(a) {
                    if(name != names[animatedName.value].name) {
                        a.animatables[1].target.style.opacity = 0;
                    }else{
                        a.animatables[1].target.style.opacity = 1;
                    }

                    domNode.innerText = names[animatedName.value].name;
                    name = names[animatedName.value].name;
                }
            });

          
            //return anime.finished;
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

<div class="test">
    <div class="name">
        Hello!
    </div>
</div>

<button id="start">Start roll</button>

您可以看到，名称随Flash更改了，我希望每个名称的Flash都可以顺利更改。

也许我应该采取回调或时间表，但是我的所有尝试都没有成功。

我该怎么做？

Answer 1

这花了我一段时间，但我想我终于有了您想要的东西。为了使其完美，您将不得不多花一点时间，但我认为它与您的要求非常接近。我更改的几件事是放宽为线性，持续时间为14000（14个名称，每秒1个名称）。然后，我使用jquery的动画来为每个名称进行某种淡入/淡出。您将需要稍微调整一下时间，但我认为基本上这是您所要询问的一个很好的例子（我希望如此）。另外，这是修改后的代码笔：https://codepen.io/anon/pen/ZjZYWM

 const members = [{
        name: "Вася Пупки"
    }, {
        name: "Дмитрий Васильев"
    }, {
        name: "Анатолий Вассерман"
    }, {
        name: "Петросян Вазгенович"
    }, {
        name: "Гоша Вазгенович"
    }, {
        name: "Миша Вазгенович"
    }, {
        name: "Саша Вазгенович"
    }, {
        name: "Анатолий Вазгенович"
    }, {
        name: "Энакентий Вазгенович"
    }, {
        name: "Динис Вазгенович"
    }, {
        name: "Иван Вазгенович"
    }, {
        name: "Руслан Вазгенович"
    }, {
        name: "Богдан Вазгенович"
    }, {
        name: "Костян Вазгенович"
    }];
window.onload = function() {
    const button = document.getElementById('start');

    if(button){
        button.addEventListener('click', () => rollNames(document.querySelector('.name'), members));
    }
    function rollNames(domNode, names) {
        const animatedName = {value: 0};
        let name;
        if (domNode) {
            anime({
                targets: [animatedName, domNode],
                value: names.length - 1,
                round: 1,
                easing: 'linear',
                duration: 14000,
                update: function(a) {
                   if(name != names[animatedName.value].name) {
                    $(a.animatables[1].target).animate({opacity:'+=1'}, 500)
                      if(a.animatables[1].target.style.opacity > 0 ){  
                      $(a.animatables[1].target).animate({opacity:'-=1'}, 500) //fades out
                      }
                      else{
                         $(a.animatables[1].target).animate({opacity:'+=1'}, 500)//fades in
                         $(a.animatables[1].target).animate({opacity:'-=1'}, 500)//fades out
                      }
                    }
                    else{
    
                    }

                    domNode.innerText = names[animatedName.value].name;
                    name = names[animatedName.value].name;
                }
            });

          
            //return anime.finished;
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="test">
    <div class="name">
    </div>
</div>
<button id="start">Start roll</button>