ExtJs动画 - 显示/淡入淡出元素无限 [英] ExtJs Animation - Show/Fade elements ad infinitum
问题描述
//'divArray' - 一个包含要循环的div的ID的字符串数组。
function cycleDivs（divArray）{
var len，i，el;
//健康检查。
if（divArray === null ||！Ext.isArray（divArray）|| divArray.length === 0）{
return;
}
//获取数组的长度;我们需要这个循环动画。
len = divArray.length; （i = 0; i< len; i ++）
{
//获取元素。
el = Ext.fly（divArray [i]）;
//健康检查。
if（el）{
el.sequenceFx（）;
el.fadeIn（{
endOpacity：1，
easing：'easeOut'，
duration：3
}）;
el.pause（2）
el.fadeOut（{
endOpacity：0，
easing：'easeOut'，
duration：3
}） ;
if（i === len - 1）{
//如果这是数组中的最后一个元素，则递归调用。
el.callback = cycleDivs（divArray）;
}
}
}
}
警告：我已经用jQuery和各种各样的插件实现了这种效果，但是作为一个工作项目，我只能使用我已经拥有的库，这是ExtJs。
提前感谢任何指针。
我最终将jquery.slideShow的部分移植到 Marcel Eichner ，以及根据我的要求，对window.setInterval 的现有对象执行一个方法。下面的代码为任何可能找到用途的人。我现在也将要动画的元素传递给构造函数，而不仅仅是它们的ID。
//构造函数。
MyNamepsace.Slideshow = function（divArray）{
//保持div数组。
this.divArray = divArray;
//内部vars
this.numSlides = this.divArray.length;
this.current = 0;
if（this.current> = this.numSlides）{
this.current = this.numSlides - 1;
}
this.last = false;
this.interval = false;
};
Ext.apply（MyNamespace.Slideshow.prototype，{
//初始化方法
init：function（）{
this.gotoSlide
this.auto（）;
}，
//这是一个玩具版本的绑定
bind：function （object，method）{
return function（）{
method.call（object）;
};
}，
//设置自动幻灯片
auto：function（）{
this.interval = window.setInterval（this.bind（this，this.next），3000）;
}，
//停止自动幻灯片
stopAuto：function（）{
if（this.interval）{
window.clearInterval（this.interval）;
this.interval = false;
}
}，
//转到下一张幻灯片
next：function（）{
this.gotoSlide（this.current + 1）;
}，
//转到特定的幻灯片
gotoSlide： function（index）{
var oldSlide，newSlide;
if（index< 0）{
index = this.numSlides - 1;
}
if（index> = this.numSlides）{
index = 0;
}
if（index === this.current）{
return;
}
//获取幻灯片元素
oldSlide = this.divArray [this.current];
newSlide = this.divArray [index];
this.stopAuto（）;
//开始转换
oldSlide.fadeOut（{
缓动：'easeOut'，
持续时间：3，
回调：this.auto，
useDisplay：true，
scope：this
}）;
newSlide.fadeIn（{
easing：'easeIn'，
duration：3
}）;
this.last = this.current;
this.current = index;
}
}）;
I'm trying to create a never-ending looping animation using ExtJs, but am hitting the obvious barrier - calling a function recursively that potentially never ends tends to fill the stack pretty quickly. My (non-functioning) code is below; this function gets passed an array of strings which correspond to the divs to be shown and hidden. Without the callback, the code produces the desired show/fade effect, but obviously only the once.
// 'divArray' - a string array containing the IDs of the divs to cycle.
function cycleDivs (divArray) {
var len, i, el;
// Sanity check.
if (divArray === null || !Ext.isArray(divArray) || divArray.length === 0) {
return;
}
// Get the length of the array; we'll need this to loop the animation.
len = divArray.length;
for (i = 0; i < len; i++) {
// Get the element.
el = Ext.fly(divArray[i]);
// Sanity check.
if (el) {
el.sequenceFx();
el.fadeIn({
endOpacity: 1,
easing: 'easeOut',
duration: 3
});
el.pause(2)
el.fadeOut({
endOpacity: 0,
easing: 'easeOut',
duration: 3
});
if (i === len - 1) {
// Recursive call if this is the last element in the array.
el.callback = cycleDivs(divArray);
}
}
}
}
Caveat: I've achieved this sort of effect before with jQuery and its wide variety of plugins, but as it's a work project I can only use the library I've got, which is ExtJs.
Thanks in advance for any pointers.
I ended up porting parts of jquery.slideShow by Marcel Eichner, and the SO answer for execute a method on an existing object with window.setInterval for my requirements. Code below for any who might find a use for it. I also now pass the elements to be animated into the constructor, rather than just their IDs.
// Constructor function.
MyNamepsace.Slideshow = function (divArray) {
// Persist the div array.
this.divArray = divArray;
// Internal vars
this.numSlides = this.divArray.length;
this.current = 0;
if (this.current >= this.numSlides) {
this.current = this.numSlides - 1;
}
this.last = false;
this.interval = false;
};
Ext.apply(MyNamespace.Slideshow.prototype, {
// Initialisation method.
init: function() {
this.gotoSlide(this.current);
this.auto();
},
// This is a "toy" version of "bind".
bind: function(object, method) {
return function() {
method.call(object);
};
},
// Set up automatic slideshow.
auto: function() {
this.interval = window.setInterval(this.bind(this, this.next), 3000);
},
// Stop automatic slideshow.
stopAuto: function() {
if (this.interval) {
window.clearInterval(this.interval);
this.interval = false;
}
},
// Go to next slide.
next: function() {
this.gotoSlide(this.current + 1);
},
// Go to specific slide.
gotoSlide: function(index) {
var oldSlide, newSlide;
if (index < 0) {
index = this.numSlides - 1;
}
if (index >= this.numSlides) {
index = 0;
}
if (index === this.current) {
return;
}
// get slide elements
oldSlide = this.divArray[this.current];
newSlide = this.divArray[index];
this.stopAuto();
// Start transition
oldSlide.fadeOut({
easing: 'easeOut',
duration: 3,
callback: this.auto,
useDisplay: true,
scope: this
});
newSlide.fadeIn({
easing: 'easeIn',
duration: 3
});
this.last = this.current;
this.current = index;
}
});
这篇关于ExtJs动画 - 显示/淡入淡出元素无限的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
