ExtJs 使用动画闪烁 DisplayField

Question

大家下午好，

我有一个显示域，我想为它实现一个持续闪烁的动画。我仍然是 ExtJs 的新手，也是动画的新手。我整理了一些我在互联网上找到的代码。我猜它正在做某事，因为文本不再可见。我只需要帮助调整它来制作闪烁的动画。谢谢

{ xtype: 'displayfield', itemId:'txtTest', width:165, value:'Test' }

var p = sender.down('#txtTest');
p.animate({
   duration: 100,
    to: {
        opacity: 0
    }
});

Answer 1

你需要一个能自我调用的动画函数

示例：https://fiddle.sencha.com/#fiddle/lsl

function animate(target, opacityFrom, opacityTo) {
    var anim = Ext.create('Ext.fx.Anim', {
        target: target,
        duration: 1000,
        from: {
            opacity : opacityFrom
        },
        to: {    
            opacity : opacityTo
        }
    });
    anim.on("afteranimate", function() {
        if(opacityFrom == 1) {
            animate(target, 0, 1);             
        } else {
            animate(target, 1, 0);
        }

    }, this, {
        single : true
    });
}

ExtJs 使用动画闪烁 DisplayField

ExtJs Blinking DisplayField using animate

animation

extjs

extjs-mvc