• as3绘制抛物线


    一般做页游的过程中,特效的释放可能是不是固定位置的播放,是需要进行“运动的”(其实就是移动特效这个影响剪辑)。举个例子:步兵射箭,不确定箭发射的方向,事先也不确定发射点和动画的结束点位置,只知道攻击方与被攻击方的位置。一般特效是没有方向性的,特效只是一个在特定位置播放效果的影响剪辑而已,表现上要突出的是从攻击方到被攻击方的一段运动轨迹,之后播放被攻击方的受伤或是防御动作。

    从上面的描述中可以确定二点信息:

    1、曲线开始的起点和结束的终点位置,可根据攻击方、被攻击方确定下来;

    2、特效播放完毕后,需要知道它的结束时刻,以便回调函数里响应被攻击方的动作;

    特效的播放,建议是采用监听Event.ENTER_FRAME来进行响应,不要根据特效播放的时长来处理。

    以抛物线运动为例,根据公式 y = a * x * x + b * x + c;已知曲线公通过两个点,起始点--攻击方的位置,结束点--被攻击方的位置,还要知道一个中点,就可以确定这个公式中的参数a、b、c的值了,选取中间点为例。它的位置(Point)为x:(startPoint.x + (startPointx + endPoint.x) / 2),而y则等于抛物线的“幅度”。

    现在就三个等式:

    y1 = a * x1 * x1 + b * x1 + c;

    y2 = a * x2 * x2 + b * x2 + c;

    y3 = a * x3 * x3 + b * x3 + c;

    解这三个方程,可得到a、b、c分别为:

    b = ((y1 - y3) * (x1 * x1 - x2 * x2) - (y1 - y2) * (x1 * x1 - x3 * x3)) / ((x1 - x3) * (x1 * x1 - x2 * x2) - (x1 - x2) * (x1 * x1 - x3 * x3));
    a = ((y1 - y2) - b * (x1 - x2)) / (x1 * x1 - x2 * x2);
    c = y1 - a * x1 * x1 - b * x1;

    其中(x1, y1)、(x2, y2)、(x3, y3)为已知的点--起始点、结束点、顶点。最终的效果如下图所示:

    示例代码:

       1: package  
       2: {
       3:     import flash.geom.Point;
       4:     /**
       5:      * ...
       6:      * @author Meteoric
       7:      */
       8:     public class Parabola
       9:     {
      10:         private var startPt:Point;
      11:         private var endPt:Point;
      12:         private var vertexPt:Point;
      13:         
      14:         private var a:Number;
      15:         private var b:Number;
      16:         private var c:Number;
      17:         
      18:         public function Parabola(pt1:Point, pt2:Point) 
      19:         {
      20:             startPt = pt1;
      21:             endPt = pt2;
      22:             
      23:             parse();
      24:         }
      25:         
      26:         public function parse(waveHeight:Number=140):void
      27:         {
      28:             vertexPt = new Point(startPt.x + (endPt.x - startPt.x) / 2, endPt.y - waveHeight);
      29:             
      30:             var x1:Number = startPt.x;
      31:             var x2:Number = endPt.x;
      32:             var x3:Number = vertexPt.x;
      33:             
      34:             var y1:Number = startPt.y;
      35:             var y2:Number = endPt.y;
      36:             var y3:Number = vertexPt.y;
      37:             
      38:             b = ((y1 - y3) * (x1 * x1 - x2 * x2) - (y1 - y2) * (x1 * x1 - x3 * x3)) / ((x1 - x3) * (x1 * x1 - x2 * x2) - (x1 - x2) * (x1 * x1 - x3 * x3));
      39:             a = ((y1 - y2) - b * (x1 - x2)) / (x1 * x1 - x2 * x2);
      40:             c = y1 - a * x1 * x1 - b * x1;
      41:             
      42:             trace(a, b, c);
      43:         }
      44:         
      45:         public function getY(posX:Number):Number
      46:         {
      47:             var posY:Number = a * posX * posX + b * posX + c;
      48:             
      49:             return posY;
      50:         }
      51:         
      52:     }
      53:  
      54: }
  • 相关阅读:
    使用echarts插件做图表常见的几个问题(五)——图形的两种渲染方式
    数组对象如何根据对象中某个字段分组
    JS监听浏览器后退事件
    使用echarts插件做图表常见的几个问题(四)—— 柱状图中以虚线展示重合的柱子
    使用echarts插件做图表常见的几个问题(三)—— 图表标线的使用
    使用echarts插件做图表常见的几个问题(二)—— 实现多Y轴
    使用echarts插件做图表常见的几个问题(一)—— 折线图局部虚线
    如何判断touch事件滑动的方向?
    解决session共享方案
    设计模式总结
  • 原文地址:https://www.cnblogs.com/meteoric_cry/p/2452925.html
Copyright © 2020-2023  润新知