沿着正弦波移动和旋转物体

时间:2011-05-27 10:42:06

标签: flash actionscript-3 math tween tweenlite

我遇到了一些问题 - 第一个问题是如何找出每个正弦曲线的尖端(即频率)的位置,第二个是如何找出每个正弦曲线的旋转方向物体,使其沿着正弦波侧向滑动

(注意文件是800 x 600)

这是我的代码: CarouselTest.as:

package  
{
    import com.greensock.easing.Sine;
    import com.greensock.TweenMax;
    import com.components.CarouselItem;
    import com.theflashblog.fp10.SimpleZSorter;
    import flash.display.Sprite;
    import flash.events.Event;
    import uk.co.thereceptacle.utils.Trig;

    public class CarouselTest extends Sprite 
    {
        public static const SPACING : int = 20;
        public static const XSPACING: int = SPACING * 5;
        public static const SPEED   : Number = .05;
        public static const XSPEED  : Number = 800 / 360 * 2;
        public static const RADIUS  : int = 400;

        private var _items:Array;
        private var _container:Sprite;
        private var _movePerItem:Number;
        private var _noOfItems:int;

        public function CarouselTest() 
        {
            _items = new Array();
            _noOfItems = 200;
            _movePerItem = 360 / _noOfItems; // my attempt at finding how much each item must move in order to bring it to the front

            _container = new Sprite();
            _container.x = 400;
            _container.y = 300;
            _container.z = 200;
            addChild(_container);

            var item:CarouselItem = new CarouselItem();
            for (var i:int = 0; i < _noOfItems; i++)
            {
                item = new CarouselItem();
                item.radius = RADIUS;
                item.angle = (i * SPACING) % 360;
                item.x = i * XSPACING - 300;
                item.speed = SPEED;
                _container.addChild(item);
                _items.push(item);
            }

            moveItems(-1 * _movePerItem);
        }

        private function moveItems(direction:int):void
        {
            TweenMax.allTo(_items, 5, { angle:direction.toString(), x:(direction * XSPACING).toString(), ease:Sine.easeInOut } );
            TweenMax.to(this, 5, { onUpdate:SimpleZSorter.sortClips, onUpdateParams:[_container] } );
        }
    }
}

CarouselItem.as

package com.components 
{
    import flash.display.Sprite;
    import flash.text.TextField;
    import uk.co.thereceptacle.components.HTMLTextField;
    import uk.co.thereceptacle.utils.Trig;

    public class CarouselItem extends Sprite
    {
        private var _angle  : Number;
        private var _prevX  : Number;
        private var _prevZ  : Number;

        public var speed    : int;
        public var radius   : Number;

        public function CarouselItem() 
        {
            graphics.beginFill(0x99ff00);
            graphics.lineStyle(1);
            graphics.drawRect( -100, -150, 200, 300);

            var tf:TextField = new HTMLTextField();
            tf.embedFonts = false;
            tf.wordWrap = false;
            tf.htmlText = "<p>THIS IS A TEST</p>";
            tf.x = -100;
            tf.y = -tf.textHeight / 2;
            addChild(tf);
        }

        public function get angle():Number { return _angle; }
        public function set angle(value:Number):void 
        {
            _angle = value;

            z = Math.sin(angle) * radius;

            var deltaX:Number = x - _prevX;
            var deltaZ:Number = z - _prevZ;
            var rotate:Number = Trig.radiansToDegrees(Math.atan2(deltaZ, deltaX));
            rotationY = rotate; <strike>// this is getting close but always rotates the item away from the center and i need it to rotate towards the center on the positive side of the sine wave</strike>
// edit: i've updated this as it's much closer but still flaky - it feels like i haven't done it right

        }

        override public function set x(value:Number):void 
        {
            _prevX = x;
            super.x = value;
        }

        override public function set z(value:Number):void 
        {
            _prevZ = z;
            super.z = value;
        }
    }
}
希望你能提供帮助 奥比

1 个答案:

答案 0 :(得分:0)

我认为你想在滚动的山丘(或海上的船,或类似运动的东西)上制作类似滑板的动画。

此问题需要知道的所有三角形/微积分:以您想要的方式坐在曲线上的直线是切线。它由曲线的导数描述。正弦曲线的导数是余弦。微积分魔法:如果你的曲线是* sin(b * x),则正切是a * b * cos(b * x)。这会给你(上升/下降)。如果你想将它表示为一个角度,你将需要atan(或atan2)。请注意,您需要与角度单位保持一致。很可能atan给你弧度,你想要学位。