收藏本站 | 站点地图 | 繁體中文
沭阳乐园
您现在的位置: 沐阳乐园 >> 文章中心 >> 网络教程 >> 动画实例 >> 正文
交互式3D旋转动画效果(AS3代码)         
交互式3D旋转动画效果(AS3代码)
作者:佚名 文章来源:中国教程网论坛 点击数:1484 更新时间:2010-12-26 22:53:24

本例教程讲解了运用AS3代码制作交互式3D旋转动画效果,希望通过本教程的学习,能给朋友们带来帮助~~

效果演示

〖本教程是3D旋转的升级版,添加交互性〗

使图标具有交互性:

当鼠标单击某个图标时使之旋转,并让图标显示在屏幕的最前面。

//定义旋转的最终角度

var endAngle:Number = 90;

//保存已经旋转的角度

var tempAngle:Number = 0;

//保存旋转的状态

var isRotating:Boolean = true;

//注册图标的单击事件

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 = true; 

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(true); 

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], 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. }

文章录入:晴天    责任编辑:清水洗尘 
  • 上一篇文章:
  • 下一篇文章:
  • 【字体: 】 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    广告招商
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    ::发表评论::
     姓 名:
     评 分: 1分 2分 3分 4分 5分
     评论内容:
  • 严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
  • 用户需对自己在使用本网服务过程中的行为承担法律责任。
  • 本站管理员有权保留或删除评论内容。
  • 评论内容只代表网友个人观点,与本网站立场无关。
  • 广告招商
    文章 下载 图片 文字广告
    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告 | 管理登陆

    备案/许可证编号: 闽ICP备16020960号-1号 域名创建于2016年8月
    版权: 沐阳乐园 All Rights Reserved 站长:张萍 邮箱:381415887@qq.com 联系QQ:联系站长