沿正弦波移动和旋转物体

Question

我遇到了一些问题 - 第一个是如何找出每条正弦曲线的尖端（即频率）和第二个是要解决如何使之沿正弦波横着滑出旋转每个对象

（记事本文件是800×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; 
     } 
    } 
} 

希望你能帮助 奥比

Answer 1

我以为你要动画有点像滑板上滚动山（或乘船在海上，或一些类似的运动）。

你需要知道的这个问题的所有触发/演算：以你想要的方式坐在曲线上的线是切线。它由曲线的导数描述。正弦曲线的导数是余弦。微积分魔术：如果曲线是* sin（b * x），则切线是a * b * cos（b * x）。这给你（上升/跑步）。如果你想以角度来表达，你需要atan（或atan2）。请注意，您需要与角度单位保持一致。最有可能atan给你弧度，你想要度。