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: }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏walterlv - 吕毅的博客

用动画的方式画出任意的路径(直线、曲线、折现)

发布于 2017-11-20 00:49 更新于 2017-11...

952
来自专栏JarvanMo的IT专栏

浅扒Android动态设置字体大小

Android开发中,TextView类的控件应该说是很常用了。一般来说我们是通过android:textSize="20sp" 来设置字体大小,但是很多时候...

1443
来自专栏林德熙的博客

win10 uwp win2d 使用 Path 绘制界面

在 win2d ,可以使用 DrawGeometry 的方式画出几何。而路径 Path 就是一种 Geometry 。传入的 CanvasGeometry 参数...

1231
来自专栏数据科学学习手札

(数据科学学习手札42)folium进阶内容介绍

  在上一篇(数据科学学习手札41)中我们了解了folium的基础内容,实际上folium在地理信息可视化上的真正过人之处在于其绘制图像的高度可定制化上,本文就...

3034
来自专栏hightopo

基于HTML5的3D网络拓扑树呈现

1482
来自专栏阿凯的Excel

自定义单元格格式介绍(第二期 文本版)

上期和大家分享了自定义条件格式的数字版。本期继续和大家分享文本的自定义单元格格式! 继续强调啰嗦两件事情!!! 1、自定义单元格格式只改变显示内容,不改变实...

2906
来自专栏HT

基于HT for Web的3D拓扑树的实现

在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到...

2315
来自专栏deepcc

emmet(Zen coding)前端写代码神器

3827
来自专栏菩提树下的杨过

Metaball(元球)效果学习

几年前就在网上曾看见过这种效果,但一直不知道叫什么名字 ? 前一阵无意在9ria(天地会)论坛上看到了一篇专门讲这个的文章:AS3 元球(Metaball),不...

27010
来自专栏向治洪

android动画之interpolator和typeEvaluator用法详解

Interpolator (插值器) 我们在写动画的时候为了达到某种效果往往需要设置插值器,用来真实的模拟生活中的场景。  Interpolator (插值器)...

2159

扫码关注云+社区

领取腾讯云代金券