MTM动画教程学习笔记1【第三章动画中的三角学】

最新推荐文章于 2019-05-07 17:15:03 发布

原创最新推荐文章于 2019-05-07 17:15:03 发布 · 647 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

as3

本文探讨了三角学编程的基础应用，包括位置、角度和距离的处理，重点介绍了使用Math.sin, Math.cos, Math.atan2等函数进行计算。文章还详细解释了度和弧度的换算方法，并提供了箭头转向鼠标、正弦波运动、圆形和椭圆运动的实践案例。通过代码示例，展示了如何在不同场景下灵活运用三角函数和角度转换技巧。

1.三角学编程大部分处理关于位置、角度和距离的问题。

基础的处理中，大部分用到的公式 Math.sin,Math.cos,当然，Math.atan2(dy,dx)也挺好用，计算结果用作rotation的话一定要转为角度。

2.测量角度的两个系统：度和弧度。 360° = 2 π

a.参与计算用弧度，并返回-1~1之间的值，

b.旋转、转向等行为用角度。 rotation

c.滤镜的应用，角度。

换算：radians = degrees * Math.PI / 180;

degrees = radians * 180 / Math.PI; 即Math.PI / 180 = 弧度 ./ 角度

3.几个练习

箭头转向鼠标，正弦波运动，圆形运动和椭圆运动

// arrow 为新建影片剪辑

addEventListener('enterFrame',onFrame);

function onFrame(e:Event):void
{
	var dstX:int = mouseX - arrow.x;
	var dstY:int = mouseY - arrow.y;
	var rotation:int = Math.atan2(dstY,dstX) * 180 / Math.PI;
	arrow.rotation = rotation;
}

// ------

var angle:Number = 0;
var cx:int = 50;
var centerY:int = 200;

var circleX:int = 100;
var circleY:int = 100;

addEventListener(Event.ENTER_FRAME,onFrame);
graphics.lineStyle(1);

function onFrame(e:Event):void
{
	// 正弦
	ball.x += 1;
	ball.y = cx * Math.sin(angle) + centerY;
	graphics.lineTo(ball.x,ball.y);
	if(ball.x > stage.stageWidth)
	{
		graphics.clear();
		graphics.lineStyle(1);
		ball.x = 0;
	}
	// 圆形运动
	ball2.x =100 + Math.sin(angle) * circleX;
	ball2.y = 100 + Math.cos(angle) * circleY;
	
	// 椭圆运动
	ball3.x =200 + Math.sin(angle) * 2 * circleX;
	ball3.y = 300 + Math.cos(angle) * circleY;
	
	angle += 0.1;
}