红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

在 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:251169

评论

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

领先企业的数智化进入2.0阶段,需要升级数智底座

用友BIP

ChatGPT安全受质疑 网信办发布生成式人工智能服务管理办法意见稿

郑州埃文科技

【Python实战】XPath采集数据

BROKEN

三周年连更

ES开发指南|如何快速上手ElasticSearch

浅羽技术

全文检索 搜索 Lucence Elastic Search 三周年连更

什么叫函数的注册,用c++举个例子

linux大本营

c++ 函数

delphi中TServerSocker使用stThreadBlocking模式的例子

linux大本营

@PathVariable 和 @RequestParam 的区别

linux大本营

koal_dm8_crypto.so.1.0.9.x86.b6f523 怎么安装

linux大本营

Linux linux文件

跨平台应用开发进阶(五十三):uni-app 通过webview方式嵌套H5实现图片点击下载

No Silver Bullet

uni-app 跨平台应用开发 三周年连更 web-view

强大的音频分析编辑工具:Amadeus Pro 汉化激活版

真大的脸盆

Mac Mac 软件 音频编辑 音频处理工具 编辑音频

Gradle工程适配为Hvigor工程

坚果

OpenHarmony 三周年连更

创建和管理复杂的项目:OmniPlan Pro 4 mac中文版

真大的脸盆

Mac Mac 软件 项目管理工具 项目流程软件

Spring中事务嵌套这么用一定得注意了!!

JAVA旭阳

Java spring

SpringBoot之Tomcat与Undertow容器性能对比 | 超级详细,建议收藏

bug菌

tomcat 三周年连更 Undertow

uniapp配置基本的tabbar和动态修改内容

格斗家不爱在外太空沉思

uni-app 三周年连更

AI大模型加速RPAxAI时代到来,谁会是RPA领域的杀手级应用?

王吉伟频道

RPA AI大模型 ChatGPT RPAxAI 企业级RPA

/sbin/kexec参数说明

linux大本营

Linux 镜像 Linux内核

想转行计算机但不知道转哪个方面比较好?

linux大本营

软件开发 计算机

算法题每日一练:组合总和 Ⅳ

知心宝贝

数据结构 算法 前端 后端 三周年连更

创新引领・数创未来 | 数据流通与治理专题论坛交流会顺利召开

郑州埃文科技

火山引擎云原生数据仓库ByteHouse技术白皮书V1.0 (Ⅴ)

字节跳动数据平台

数据仓库 云原生 白皮书 企业号 4 月 PK 榜

C++grpc 服务器接收到请求后如何处理

linux大本营

gRPC 序列化 protobuf C++

leaflet加载聚合

linux大本营

Qz学算法-数据结构篇(链表、栈)

浅辄

数据结构 链表 三周年连更

基于Java+Dubbo设计的智能公交查询系统

DS小龙哥

三周年连更

缓解过拟合方法

linux大本营

winDbg 提示 Unable to verify checksum for IOCommModel.exe

linux大本营

网络安全 数字证书

arm m4 xpsr每一位的作用

linux大本营

寄存器 arm

Go 语言中的 Slice 陷阱:如何避免常见错误

陈明勇

Go golang 切片 三周年连更 切片陷阱

面试必考: 手撕代码系列(一)

控心つcrazy

JavaScript 手写代码 前端面试 手撕代码 超全前端面试题

【Linux】iptables之防火墙概述及规则匹配+实例(1)

A-刘晨阳

Linux iptables 防火墙规则 三周年连更

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