交互式3D旋转动画效果(AS3代码)

驰骋的风 3D打印店铺

【本教程是3D旋转的升级版，添加交互性】



使图标具有交互性：
当鼠标单击某个图标时使之旋转，并让图标显示在屏幕的最前面。
//定义旋转的最终角度

var endAngle:Number = 90;

//保存已经旋转的角度

var tempAngle:Number = 0;

//保存旋转的状态

var isRotating:Boolean = ***e;

//注册图标的单击事件

mc.addEventListener(MouseEvent.MOUSE_DOWN,startRotation);

//定义侦听器函数

function startRotation(e:MouseEvent):void

{

//得到图标

var currentIcon::MovieClip = e.target;

//得到图标的角度

enaAngle = atan2D(currentIcon.y,cosD(currentIcon.angle) * disy);

//计算旋转的度数

endAngle = (endAngle > -180&&endAngle < -90) ? - 270 - endAngle:90 - endAngle;

//单击后旋转，需要注册enterFrame事件侦听器

menu.addEventListener(Event.ENTER_FRAME,moveMenu);

}



每次旋转前要重新初始化旋转角度

function initAngle(b:Boolean)

{

//如果处于旋转状态保存角度

if (isRotating)

//保存图标角度

tempAngle += speed;

//旋转速度重新设置为0

speed = 0;

//设置旋转状态

isRotating = b;

}
修改函数moveMenu():
function moveMenu(e:Event):void

{

var iconCount:int = menu,numChildren;

var depthArrat:Array = new Array();

var angle:Number = 360 / iconCount;

for (var z:int; z < iconCount; z++)

{

var mc:MovieClip = menu.getChildAt(z);

mc.gotoAndStop(z + 1);

//把图标角度保存在mc的动态属性中

mc.angle = tempAngle + speed + angle * z;

mc.x = cosD(mc.angle) * disy;

mc.y = sinD(mc.angle) * disy;

depthArray[z] = mc;

setProp(mc, "alpha");

setProp(mc, "scaleX", .2, .7);

setProp(mc, "scaleY", .2, .7);

}

arrange(depthArray);

//利用缓冲公式把图标旋转到endAngle角度

speed += (endAngle - speed) * .2;

if (Math.abs(speed - endAngle) < 1)

{

//移除事件侦听器

menu.removeEventListener(Event.ENTER_FRAME,moveMenu);

initAngle(false);

}

}
下面给出完整代码：
1. include "Math2.as"  

2. stage.frameRate = 30；  

3.  



4. var disx:Number = 200;  

5. var disy:Number = 10;  

6. var speed:Number = 0;  

7.  



8. var endAngle:Number = 90;  

9. var tempAngle:Number = 0;  

10. var isRotating:Boolean = ***e;  

11.  



12. var menu:Sprite = new Sprite();  

13. menu.x = 300;  

14. menu.y = 200;  

15. menu.addEventListener(Event.ENTER_FRAME,moveMenu);  

16. this.addChild(menu);  

17.  



18. initMenu(5);  

19. function initMenu(n:int) {  

20. for (var i:int; i<n; i++) {  

21. var mc:MovieClip = new IconMenu();  

22. mc.scaleX = mc.scaleY = .5;  

23. mc.addEventListener(MouseEvent.MOUSE_DOWN,startRotation);  

24. menu.addChild(mc);  

25. }  

26. }  

27. function initAngle(b:Boolean) {  

28. if (isRotating) {  

29. tempAngle += speed;  

30. }  

31. speed = 0;  

32. isRotating = b;  

33. }  

34. function startRotation(e:MouseEvent):void {  

35. var currentIcon:MovieClip = e.target;  

36. endAngle = atan2D(currentIcon.y,cosD(currentIcon.angle)*disy)；  

37. endAngle = (endAngle> -180&&endAngle < -90)? -270 - endAngle:90 - endAngle;  

38. initAngle(***e);  

39. menu.addEventListener(Event.ENTER_FRAME,moveMenu)；  

40. }  

41. function moveMenu(e:Event):void {  

42. var iconCount:int = menu.numChildren;  

43. var depthArray:Array = new Array();  

44. var angle:Number = 360 / iconCount;  

45. for (var z:int; z<iconCount; z++) {  

46. var mc:MovieClip = menu.getChildAt(z);  

47. mc.gotoAndStop(z + 1);  

48. mc.angle = tempAngle + speed+angle * z;  

49. mc.x = cosD(mc.angle) * disx;  

50. mc.y = sinD(mc.angle) * disy;  

51. depthArray[z] = mc;  

52. setProp(mc,"alpha");  

53. setProp(mc,"scaleX",.2,.7);  

54. setProp(mc,"scaleY",.2,.7);  

55. }  

56. arrange(depthArray);  

57. speed += (endAngle-speed) * .2;  

58. if (Math.abs(speed - endAngle) < 1) {  

59. menu.removeEventListener(Event.ENTER_FRAME,moveMenu);  

60. initAngle(false);  

61. }  

62. }  

63. function arrange(depthArray:Array):void {  

64. depthArray.sortOn("y", Array.NUMERIC);  

65. var i:int = depthArray.length;  

66. while (i--) {  

67. menu.setChildIndex(depthArray, i);  

68. }  

69. }  

70.  



71. function setProp(mc:MovieClip,prop:String,n1:Number = .5, n2:Number = 1):void {  

72. mc[prop] = ((mc.y + 2 * disy) / disy - 1) / 2 * (n2 - n1) + n1；  

73. }




大家都很聪明，我就不分享视频了，看看代码都能知道效果怎样。更多教程分享还在web3D纳金网www.narkii.com，大家关注驰骋的风哈~

老人与海

这个看来挺好看的呢。。

kikkik7000

THanks for sharing !

lyiaanng

楼主威武，支持一下