AS3 3D画廊-屏幕到屏幕效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AS3 3D画廊-屏幕到屏幕效果相关的知识,希望对你有一定的参考价值。

demo and FLA file at http://www.adamcoulombe.info/lab/as3/screen-to-screen.html
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3. var lastRotX = 0;
  4. var lastRotY = 0;
  5.  
  6. for(var i=0; i<gal.numChildren; i++){
  7. var self = gal.getChildAt(i);
  8. self.addEventListener(MouseEvent.CLICK,windowClicked);
  9. }
  10.  
  11. addEventListener(Event.ENTER_FRAME,loop);
  12. function windowClicked(e){
  13. var self = e.currentTarget;
  14. removeEventListener(Event.ENTER_FRAME,loop);
  15. var timeline = new TimelineLite();
  16. var transition = new TimelineLite();
  17. timeline.insert(TweenLite.to(gal,1,{x:(self.x)*-1,y:(self.y)*-1, z:-1210, ease: Sine.easeInOut}));
  18. timeline.insert(transition);
  19. lastRotX = gal.rotationX;
  20. lastRotY = gal.rotationY;
  21. var oppRotX = gal.rotationX*-1;
  22. var oppRotY = gal.rotationY*-1;
  23. transition.append(TweenLite.to(gal,0.5,{rotationX:oppRotX*7,rotationY:oppRotY*7, ease: Sine.easeOut}));
  24. transition.append(TweenLite.to(gal,0.5,{rotationX:0,rotationY:0, ease: Sine.easeIn}));
  25. self.removeEventListener(MouseEvent.CLICK,windowClicked);
  26. self.addEventListener(MouseEvent.CLICK,zoomOut);
  27. }
  28. function zoomOut(e){
  29. var self = e.currentTarget;
  30.  
  31. self.addEventListener(MouseEvent.CLICK,windowClicked);
  32. var timeline = new TimelineLite();
  33. var transition = new TimelineLite({onComplete:function(){ addEventListener(Event.ENTER_FRAME,loop) }});
  34. timeline.insert(TweenLite.to(gal,1,{x:573,y:422, z:0, ease: Sine.easeOut}));
  35. timeline.insert(transition);
  36. transition.append(TweenLite.to(gal,0.5,{rotationX:lastRotX*7,rotationY:lastRotY*7, ease: Sine.easeOut}));
  37. transition.append(TweenLite.to(gal,0.5,{rotationX:0,rotationY:0, ease:Sine.easeInOut}));
  38.  
  39. }
  40. function loop(e){
  41. var distx:Number = mouseX / 650;
  42. var disty:Number = mouseY / 450;
  43. TweenLite.to(gal, 2, {
  44. rotationY:(-70 + (140*distx))*0.06,
  45. rotationX:(70 - (140*disty))*0.06,
  46. ease:Expo.easeOut
  47. });
  48. }

以上是关于AS3 3D画廊-屏幕到屏幕效果的主要内容,如果未能解决你的问题,请参考以下文章

ActionScript 3 Flash画廊效果中的AS3 3D旋转螺旋

Swift - 使用CollectionView实现图片Gallery画廊效果(左右滑动浏览图片)

Cordova如何翻转整个屏幕正面到背面的3D效果

在闪光画廊效果AS3三维旋转螺旋

iOS 7 3D画廊过渡效果

渲染管道光栅阶段一“总览”