纳金网

标题: 交互式3D旋转动画效果(AS3代码) [打印本页]

作者: 驰骋的风 时间: 2012-9-8 09:09
标题: 交互式3D旋转动画效果(AS3代码)
【本教程是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，大家关注驰骋的风哈~
作者: 老人与海 时间: 2012-9-9 16:10
这个看来挺好看的呢。。
作者: kikkik7000 时间: 2014-8-4 12:57
THanks for sharing !
作者: lyiaanng 时间: 2014-8-14 17:44
楼主威武，支持一下

欢迎光临纳金网 (http://c-www.narkii.com/club/) Powered by Discuz! X2.5