一款增强的3D carousel控件

3D carousel控件一览

3d carousel是常用于slide图文展示的效果，通过css transform修饰相邻的几张图文，用简单的代价呈现3d场景效果。

  经过比较，收费控件中我比较欣赏的是：royal-3d-carousel

  截图如下：

 

 

而开源的控件，我选中的是：Cloud 9 Carousel

  该控件采用MIT license。

截图如下：

 

 

聊聊过渡帧

为什么相中他两呢？最重要的一点，是它们都应用了requestAnimationFrame。

  虽然只是一个简单的甚至可以用 setInternal代替的API，但我认为它却是传统pc界面与移动终端界面的分水岭。为什么大家总感觉pc界面呆滞无趣，而移动终端的界面却让人爱不释手呢？

 我认为ios开创的移动界面其中一个重大的革新就是在界面的交互中采用了过渡帧动画，界面的切换过程从而变得平滑有趣，即使响应时间慢一点，人们也愿意等待这个切换的过程。

  过渡帧动画再与物理引擎结合的话，比如：手指滑动越快，界面的滑动响应就越长。这会让人们在现实世界中形成的经验在移动终端的交互中得到验证，符合他们的操作预期。当然就受人喜爱了。

对requestAnimationFrame有兴趣的朋友，可以移步这篇文章。

 

对Cloud9 Carsousel的增强

要用这个carsousel控件来进行抽奖的话，需要解决的关键问题是：如何将控件只能加载几张图，扩展到加载几百上千张图？

我的策略是：

  1. 图标滚动到最近处，认为获得过中奖几率一次，打标记；

  2. 该图标继滚动到最远处时，检查图标的标记，如果已经打过标记，则将其移除滚动池，将下一个图标移入滚动池。

  3. 对每一次rendered最近图标重复上述逻辑。

 

 关键代码如下：

  对carsousel 增加方法，用于移除图标和加入新图标：

//c4w add
    this.replaceItem = function(item_index,attr) {
      var item= this.items[item_index];
      item.rendered=false;
      
      $(item.element).remove();
      var img =  new Image();
      $(img).attr(attr).css( "opacity", 0 );
      $container.append(img);
      var me=this;
      img.onload=function(){
    	  me.items[item_index] = new Item(img,me.itemOptions);
    	  //$(this).css( "opacity", 1 );
    	  $(this).parent().css( "opacity", 1 );
      }
    };

 

响应最近图标的rendered事件，并进行上述处理：

     function rendered( carousel ) {
    	var item =  carousel.nearestItem();
    	var it_near = carousel.nearestIndex();
    	var len = carousel.items.length;
    	for(var i=0; i<2; i++){
        	var it_far = it_near+4+i;
        	if(it_far>=len)
        		it_far-=len;
        	var item_far = carousel.items[it_far];
        	//rendered item, repalce it with another img el
        	if(item_far.rendered){
        		carousel.pos++;
        		if(carousel.pos>=img_total)
        			carousel.pos=1;
        		
        		carousel.replaceItem(it_far,{
        			src:"images/png/"+carousel.pos+".png",
        			alt:"Title "+carousel.pos
        		});
        	}
    	}
    	
    	item.rendered=true;
        title.text( item.element.alt )

        // Fade in based on proximity of the item
        var c = Math.cos((carousel.floatIndex() % 1) * 2 * Math.PI)
        title.css('opacity', 0.5 + (0.5 * c))
      }

 

图片下载自：http://www.haotu.net/pack/3406/my-senven-icons 

请自行下载，控件使用请尊重原作者license声明。

最终效果

 

http://v.youku.com/v_show/id_XMTQwMzQ5MDcxMg==.html