写点什么

在 Flash Pro 的舞台上直接配置运动对象的属性以及加减速运动算法的研究

  • 2011-08-05
  • 本文字数:1673 字

    阅读完需:约 5 分钟

有一段时间没有写技术文章了,今天我要介绍两个技巧。一个是如何利用 Flash Pro 的舞台直接配置运动对象的属性,这个技巧在我多年的工作中经常用到,可以非常的方便直观地定义元件在舞台上的运动效果;另一个是如何用三角函数来自定义一个先加速后减速的运动轨迹算法。

有关 Flash 舞台

Flash 里的舞台是一个平面直角坐标系,每一个显示对象(如 MovieClip)内部都有一个舞台,容纳着这个对象的所有子显示对象。子对象在舞台上的位置、缩放、旋转度等属性可以直接用鼠标拖拽定义,其定义的结果会给显示对象的类属性赋值(如 x,y,scaleX, scaleY, rotation)。但是,我们在做开发的时候往往不会将需要控制的对象直接放在舞台上,取而代之的是根据应用程序的需要,在适当的时机使用构造函数创建一个对象,再通过代码来初始化这个对象的属性并把它加载到舞台上。这样创建的对象,它的一切行为都要通过代码来实现,其属性和运动数据也都要从配置文件中来解析获得。我今天介绍的就是如何通过 Flash 舞台来代替配置文件,为动态创建的显示对象提供显示属性的方法。

Reference 对象

如上图的三个小人,“影子”、“参照物”、“傀儡”…用很多词可以形容这样一个对象,它被直接放在舞台上,但是最终不会被显示出来,它的使命就是给最终需要显示的对象提供位置、缩放和旋转度等属性数据。嗯,我更多的时候叫它 Mapping 或者 Reference 对象。总之,我们可以直接通过鼠标来拖拽修改它的属性,然后在代码中把它们的位置、缩放和旋转度动态解析出来,赋给一个会在舞台上呈现的显示对象。既直观又方便。

上面的这个小人,她在三点间来回做先加后减的变速运动,下面来介绍一下相关的算法原理。

三角函数加速减速运动算法

写过运动轨迹的朋友都知道,缓动运动中最简单的是减速运动,可以用下面的代码来实现:

复制代码
x += (targetX - x)/5;
y += (targetY - y)/5;

在每一帧中调用一遍上面的代码,可以让 x 和 y 的值无限接近于 targetX 和 targetY,而且接近的速度越来越慢。这种算法比较适合周期比较短的切换效果。

对于更流畅的运动,比如先加速后减速运动,也可以通过设定瞬时速度和加速度的方式来实现,但是这样做的一个弊端是很难精准的控制运动物体的运动轨迹,无法实现在希望的时间内让物体从点 A 运动到点 B。很多朋友用过 Tweener,TweenLite 或者 TweenMax,这类运动渲染器可以创建一个非常精准的变速运动效果,可以对运动轨迹更好的控制。但是,对于移动开发来说,使用 Tweener 就意味着增加了一条渲染线程,不利于我们对 Timer 和 EnterFrame 的集中渲染。今天我要介绍一个自定义的先加速后直线减速运动算法,并且实现对运动时间和轨迹的精准控制。

在下面这个直角坐标系里,横轴表示时间,纵轴表示位移改变量,曲线上任意点的斜率与速度成正比。在定义域为 0 到 90 的范围内,曲线方程为 f(x) = (1-cos(x))/2,速率方程也就是导数方程是 f’(x) = sin(x)/2,这是一个增函数,说明运动物体在做加速运动;在定义域为 90 到 180 的范围内,曲线方程为 f(x) = (1+ sin(x+90))/2,速率方程也就是导数方程是 f’(x) = -sin(x)/2,这是一个减函数,说明运动物体在做减速运动。从两个部分的导数方程可以看出速率的曲线符合三角函数曲线特征,而且在加速和减速阶段的增量相互对称。

图 2.先加速后减速运动的位移增量曲线方程(自变量为时间)

这样,一个变速运动的方程就可以分解为两个部分,用 ActionScript 代码实现就是这样的:

复制代码
// 改变时间增量
moveProgress += 2;
var pos:Number;
if(moveProgress<90){
// 定义常量 CONVERT 为 Math.PI/180,减小计算量
pos = (1 - Math.cos(moveProgress * CONVERT))/2;
}else{
pos = (1 + Math.sin((moveProgress-90) * CONVERT))/2;
}
//orx 为运动起点的 x 值,dx 为运动终点的 x 值与起点 x 值的差。pos 为单位时间内的运动增量
act.x = orx + dx * pos;
act.y = ory + dy * pos;
act.scaleX = orsx + dsx * pos;
act.scaleY = orsy + dsy * pos;
if(moveProgress >=180){
/* 运动停止 */
}

源文件下载

actress.zip (600kb)

查看原文:在 Flash Pro 的舞台上直接配置运动对象的属性以及加减速运动算法的研究

2011-08-05 05:251537

评论

发布
暂无评论
发现更多内容

防城港等保测评机构有哪些?在哪里?

行云管家

等保 等级保护 防城港

公开课 | 金九银十,测试开发面试秘籍大公开!

测吧(北京)科技有限公司

测试

性能测试 | JMeter 介绍与安装

测试人

软件测试

IP纯净度对跨境电商有哪些影响

IPIDEA全球HTTP

KaiwuDB X 临沂大数据局 | 重点车辆一体化监管,助力你我的安全出行 🤝

KaiwuDB

KaiwuDB 分布式多模数据库 重车辆监管平台

JMeter 介绍与安装

霍格沃兹测试开发学社

性能测试 | JMeter 介绍与安装

测吧(北京)科技有限公司

测试

Invicti v24.9.0 发布下载,新增功能概览

sysin

invicti

Java 中堆内存和栈内存上的数据分布和特点

emanjusaka

Java stack heap

曝字节 AI 硬件团队首款自研产品为智能耳机,与豆包联动;OpenAI 神秘新模型或将在两周内发布丨 RTE 开发者日报

声网

PoS 和 PoW 矿机系统区块链公链开发成本分析

区块链软件开发推广运营

dapp开发 链游开发 NFT开发 公链开发 代币开发

StarRocks 培训课程重磅上线!专家出品,助你升级打怪不走弯路!

StarRocks

健康产业怎么定义?需要用到堡垒机吗?

行云管家

网络安全 数据安全 堡垒机 健康产业

Cisco Catalyst 9100 无线接入点 IOS XE 17.15.1 发布下载,新增功能概览

sysin

Cisco ap 思科 IOS XE 9100

《黑神话:悟空》下的科技众生相

脑极体

AI

数据飞轮转进快递行业 能够为企业带来哪些新想象

字节跳动数据平台

数字化转型 云服务 数据平台 火山引擎 数据飞轮

Spring webflux注解:提供全面的JPA注解应用案例(必须收藏)

肖哥弹架构

spring spring webflux

nodejs中路径相关api

秃头小帅oi

人事管理这些“坑”,你有没有踩过?

天津汇柏科技有限公司

人工智能 低代码开发 人事管理系统

直播预约丨《袋鼠云大数据实操指南》No.6:建设指标管理平台 解锁企业数据价值

袋鼠云数栈

大数据

Qt使用kingbase数据库存储数据(完成考勤系统数据增删改查)

DS小龙哥

9月日更

报名啦|PolarDB数据库创新设计赛(天池杯)等你来战

阿里云数据库开源

数据库大赛 国赛 阿里云PolarDB

从数据洞察到智能决策:合合信息&infiniflow RAG技术的实战案例分享

汀丶人工智能

rag

什么是APT攻击,如何处理

德迅云安全杨德俊

KaiwuDB 受邀亮相 2024 数博会

KaiwuDB

数博会 KaiwuDB

电脑越用越慢,有什么好的解决方案?

上海锐起科技

Cisco Modeling Labs (CML) 2.7.2 发布下载,新增功能概览

sysin

Cisco CML

Parallels Desktop 20 发布下载,macOS Sequoia 和 Windows 11 24H2 支持准备就绪

sysin

macos Parallels Desktop

亚信安慧AntDB-M 只读事务提交优化

亚信AntDB数据库

AntDB

Meme“淘金”热潮下:Meme发射平台的安全风险分析

区块链软件开发推广运营

交易所开发 dapp开发 区块链开发 链游开发 NFT开发

在Flash Pro的舞台上直接配置运动对象的属性以及加减速运动算法的研究_Java_James Li_InfoQ精选文章