写点什么

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

评论

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

架构师训练营 - 第八周

石子头

架构师训练营 - 第十三周

石子头

让机器有温度:带你了解文本情感分析的两种模型

华为云开发者联盟

自然语言处理 神经网络 机器学习 深度学习

从标准到开发,解读基于MOF的应用模型管理

华为云开发者联盟

模型 ROMA 应用模型 mof

springboot多模块配置问题

原来不悔

springboot Spring Frame

人脸识别门禁系统搭建,智慧小区实施方案

t13823115967

智慧平安小区平台开发

IndexedDB详解

程序那些事

大前端 程序那些事 indexedDB webtech 浏览器技术

第十二周课后练习

dll

如何轻松简便地在电脑上制作视频&数据更新 | 视频号 28 天 (04)

赵新龙

28天写作

开发效率提升15倍!批流融合实时平台在好未来的应用实践

Apache Flink

流计算 fink

同程快递方案初稿

dll

第十三周课后作业

dll

你真的会正确使用日志吗?

xcbeyond

Java 代码规范 28天写作 日志级别

十八般武艺玩转GaussDB(DWS)性能调优:SQL改写

华为云开发者联盟

数据库 sql 性能优化 GaussDB 算子

架构师训练营 - 第九周

石子头

SpringCloud 微服务实现数据权限控制

Barry的异想世界

SpringCloud SpringBoot 2 权限认证 数据权限

人与人需要保持边界

熊斌

读书笔记 成长笔记 28天写作

架构师训练营 - 第十一周

石子头

HDFS SHELL详解(4)

罗小龙

hadoop 28天写作 hdfs shell

握草,这些研发事故30%我都干过!

小傅哥

Java 小傅哥 28天写作 线上事故 系统秒杀

智能停车管理系统搭建,智慧小区智能化解决方案

t13823115967

智慧小区

架构师训练营 - 第十周

石子头

探索 Vue.js 响应式原理

Geek_z9ygea

vue.js Vue 响应式 大前端 28天写作

Java 并发编程之 JMM & volatile 详解

vivo互联网技术

Java volatile JMM 指令重排序

架构师训练营 - 第十二周

石子头

8. 格式化器大一统 -- Spring的Formatter抽象

YourBatman

Spring Framework Converter Formatter

《破壁MySQL》 - MySQL概述

haxianhe

MySQL 破壁MySQL 破壁

Elasticsearch 的正式介绍

escray

elasticsearch elastic 28天写作 死磕Elasticsearch 60天通过Elastic认证考试

【JS】防止浏览器控制台被直接查看(1)

德育处主任

JavaScript 大前端 js 28天写作

拍乐云语音聊天室SDK,助力非洲版陌陌“Mochat”打造粉丝经济

拍乐云Pano

音视频 RTC 语音聊天室 出海社交 社交泛娱乐

DAPP软件开发|DAPP系统APP开发

系统开发

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