- 浏览: 119349 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
zhouhaiyang88:
huang-tao 写道你好,在吗?请问,我启动Tomcat时 ...
ActiveMq-JMS简单实例使用tomcat -
xurichusheng:
huang-tao 写道你好,在吗?请问,我启动Tomcat时 ...
ActiveMq-JMS简单实例使用tomcat -
wgcooo:
javax.naming.NameNotFoundExcept ...
ActiveMq-JMS简单实例使用tomcat -
huang-tao:
你好,在吗?请问,我启动Tomcat时报如下错,是什么原因?= ...
ActiveMq-JMS简单实例使用tomcat -
Eric.Yan:
好文章,明天试一试
ActiveMq-JMS简单实例使用tomcat
缓动 与 匀变速 看上去很类似,但其实有区别:
匀变速的公式为 V = V0 + at --速度v与时间t是线性(正比)关系,而且这种运动不需要确定目标点,速度可以按照这种规律一直变下去
而缓动指的是物体越接近目标时速度越慢,速度跟距离成反比关系,用公式描述为 V = k S (0<k<1),这种运动需要先确定一个目标点,比如车辆定点停车:先指定一个位置,然后汽车从远处开过来,快到停车点时,逐渐慢下来,直到准确停在指定位置。
先看个演示:
代码:
package
{
import
flash.display.Sprite;
import
flash.events.Event;
import
flash.events.MouseEvent;
import
flash.ui.Mouse;
import
flash.ui.MouseCursor;
public
class
Easing1
extends
Sprite {
private
var
ball:Ball;
private
var
easing:
Number
=
0.15
;
private
var
targetX:
Number
=stage.stageWidth/
2
;
private
var
targetY:
Number
=stage.stageHeight/
2
;
public
function
Easing1() {
trace
(targetX,targetY);
init();
}
private
function
init():
void
{
ball=
new
Ball(
10
) ;
ball.x = Math.random() * stage.stageWidth;
ball.y = Math.random() * stage.stageHeight;
addChild(ball);
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
ball.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);
ball.addEventListener(MouseEvent.MOUSE_OVER,
function
(){ Mouse.cursor = MouseCursor.HAND;});
//在中心画个十字架
graphics.lineStyle(
1
);
graphics.moveTo(targetX-
15
,targetY);
graphics.lineTo(targetX+
15
,targetY);
graphics.moveTo(targetX,targetY -
15
);
graphics.lineTo(targetX,targetY +
15
);
}
private
function
EnterFrameHandler(e:Event):
void
{
var
vx:
Number
= (targetX - ball.x) * easing;
//x轴速度与距离成正比缩小
var
vy:
Number
= (targetY - ball.y) * easing;
//y轴速度与距离成正比缩小
ball.x += vx;
ball.y += vy;
var
dx = ball.x - targetX;
var
dy = ball.y - targetY;
var
dist = Math.sqrt(dx*dx + dy*dy);
//当物体达到目标点时,停止处理,以节省CPU资源
if
(dist<=
1
){
removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}
}
//开始拖动
private
function
MouseDownHandler(e:MouseEvent):
void
{
ball.startDrag();
removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}
//停止拖动
private
function
MouseUpHandler(e:MouseEvent):
void
{
ball.stopDrag();
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
Mouse.cursor = MouseCursor.AUTO;
}
}
}
特别要注意的问题:
先来了解一下著名的"Xeno悖论",假如一个物体要从A点移动到B点,可以这样处理:每次将物体移动一半的距离,然后再以物体所在新位置为A点,继续前面的处理... 这样物体会不断向B点靠近,直到移动到B点;但从另一角度考虑,因为每次只移动一半的距离,所以永远也不可能真正达到B点。
如果我们把上面代码中的比例因子private var easing:Number=0.15;改成0.5,就形成了该悖论。同时再考虑另一个因素,Flash每次能将物体移动的最小距离为0.05象素(即1/20象素),比这个值再小的距离,Flash将不会处理。
这样的话,假设物体要移动到 100的x坐标位置,当前已经到了99.95,根据比例因子0.5的设置,下一次应该移动 (100 - 99.95)/2 = 0.025,这个值已经超出了Flash的处理能力,系统会把0.025当成0来处理,即不移动。
所以再回头看上面的代码,我们在判断物体是否到达目标点时,不能用 ball.x == targetX 来精确判断,因为这样的条件也许永远不会成立,从而导致后面的removeEventListener也永远不会被执行到,合理的做法是达到一定的精度值时,就可以认为已经移动完成,从而做出相应的处理.
缓动鼠标跟随
相信大多数人都玩过“星际”,我最喜欢神族的航母舰队:浩浩荡荡很是壮观。这里面有一个细节,我们可以在一队航母中,指定一个为领队,其它随便挑一个跟着它,然后后面的再跟着第二个,第三个跟着第二个...,这样出发时,其实就很接近下面要演示的缓动鼠标跟随
代码:
package
{
import
flash.display.Sprite;
import
flash.events.MouseEvent;
import
flash.events.Event;
public
class
Easing3
extends
Sprite {
var
arrBall:
Array
;
var
targetX:
Number
;
var
targetY:
Number
;
var
easing:
Number
=
0.3
;
var
firstBall:Ball;
public
function
Easing3():
void
{
init();
}
private
function
init():
void
{
arrBall =
new
Array
(
30
);
for
(
var
i:
uint
=
0
,j:
uint
=arrBall.length;i<j;i++){
arrBall[i] =
new
Ball(
10
,Math.random() *
0xffffff
);
addChild(arrBall[i]);
}
firstBall = arrBall[
0
];
firstBall.x = Math.random() * stage.stageWidth;
firstBall.y = Math.random() * stage.stageHeight;
targetX = stage.stageWidth/
2
;
targetY = stage.stageHeight/
2
;
stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}
private
function
MouseDownHandler(e:MouseEvent):
void
{
targetX = mouseX;
targetY = mouseY;
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}
private
function
EnterFrameHandler(e:Event):
void
{
firstBall.vx = (targetX - firstBall.x) * easing;
firstBall.vy = (targetY - firstBall.y) * easing;
firstBall.x += firstBall.vx;
firstBall.y += firstBall.vy;
for
(
var
i=
1
,j=arrBall.length;i<j;i++){
var
ball:Ball = arrBall[i];
ball.vx = (arrBall[i-
1
].x-ball.x)*easing;
ball.vy = (arrBall[i-
1
].y-ball.y)*easing;
ball.x += ball.vx;
ball.y += ball.vy;
}
var
lastBall:Ball = arrBall[arrBall.length-
1
];
var
dx = lastBall.x - targetX;
var
dy = lastBall.y - targetY;
var
dist = Math.sqrt(dx*dx + dy*dy);
trace
(dist);
if
(dist<=
10
){
removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}
}
}
}
如果把这个例子稍加改造,可能效果更cool:
最后:本文所提到的缓动均指越来越慢,实际上Flash/Silverlight的IDE界面提供的缓动类型更多(比如先慢慢启动,再慢慢停止--即淡入淡出之类),对应的公式也有不少,www.robertpenner.com 大家可以到这上面找找,一定会发现不好好东西
发表评论
-
Flash/Flex学习笔记(50):矩阵变换
2011-04-24 13:52 1136先回顾一下Silvelright中的矩阵变换[转]WPF中的M ... -
Flash/Flex学习笔记(49):背面剔除与 3D 灯光
2011-04-24 13:50 957今天继续:上一回Flash/Flex学习笔记(50):3D线条 ... -
Flash/Flex学习笔记(48):迷你滚动条ScrollBar
2011-04-24 13:46 1033先看最终效果: 整个swf最终不到4k, ... -
Flash/Flex学习笔记(47):利用FMS快速创建一个文本聊天室
2011-04-24 13:45 959先来看客户端fla的构成: 第一帧:登录界面 第一帧的 ... -
Flash/Flex学习笔记(46):使用TweenLite
2011-04-24 13:43 1646TweenLite是第三方出品的专用于各种缓动动画的类库,其性 ... -
Flash/Flex学习笔记(45):3维旋转与透视变换(PerspectiveProjection)
2011-04-24 13:41 1182Flash/Flex学习笔记:3D基础 里已经介绍了3D透 ... -
Flash/Flex学习笔记(44):3D线条与填充
2011-04-24 13:39 10713D线条:把上一篇中的3D坐标旋转示例稍做修改,用线把各个 ... -
Flash/Flex学习笔记(43):3D基础
2011-04-24 13:34 1112之前我们所做的动画都 ... -
Flash/Flex学习笔记(42):反向运动学(下)
2011-04-24 13:30 896先要复习一下三角函数与余弦定理: 对于直角三角形,三边长 ... -
Flash/Flex学习笔记(41):反向运动学(上)
2011-04-24 13:29 911先回顾上篇所说的"正向运动学":以人行 ... -
Flash/Flex学习笔记(40):正向运动学
2011-04-24 13:27 855所谓"正向运动学"通俗点讲就是把几个连接部 ... -
Flash/Flex学习笔记(39):万有引力与粒子系统
2011-04-24 13:26 702万有引用公式: 其中G为万有引力常数 var numP ... -
Flash/Flex学习笔记(38):动量守恒与能量守恒
2011-04-24 13:24 913动能公式: 动量公式: 动量守恒: 能量守恒: ... -
Flash/Flex学习笔记(37):坐标旋转
2011-04-24 13:23 993坐标旋转是个啥概念呢? 如上图,(蓝色)小球 绕某一 ... -
Flash/Flex学习笔记(36):碰撞检测
2011-04-24 13:22 583碰撞检测基本上可能分为二类:对象与对象的碰撞检测、对象与点 ... -
Flash/Flex学习笔记(35):弹性运动续--弹簧
2011-04-24 13:21 733上一篇里演示的弹性运动加上摩擦力因素后,物体最终基本上都会比较 ... -
Flash/Flex学习笔记(34):弹性运动
2011-04-24 13:20 744动画中的弹性运动 从视觉效果上接近 物理经典力学中的单摆运 ... -
Flash/Flex学习笔记(32):不用系统组件(纯AS3)的视频播放器--只有8.82K
2011-04-24 13:17 1243以前为了赶项目,利用系统组件制作过一款视频播放器(见Fla ... -
Flash/Flex学习笔记(31):自己动手实现一个滑块控件(JimmySilder)
2011-04-24 13:15 937先看最终的演示: 滑块条的应用实在太广泛了:mp3播放器中声 ... -
Flash/Flex学习笔记(30):如何正确监听Stage对象的事件
2011-04-24 13:13 1265如果想在一个自定义类中注册对stage对象的监听事件,然后在另 ...
相关推荐
附件是关于 Flash/Flex 几个重要框架 Cairngorm、Mate、PureMVC以及Swiz 的典型例子,由 Tony Hillerson 提供 Homepage: http://insideria.com
flex/Flash开发系列书籍:基于FLASH的WEB3D应用研究
Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记
flash/flex画曲线,绘图板,用代码实现的个画曲线功能,类绘图板,可下载看看,不错的学习案例。
语言:C ++许可证:BSD-3代码质量:A + https://lgtm.com/projects/g/Genivia/RE-flex/context:cpp文档:https://www.genivia.com/doc/reflex/html /index.html存储库:https://github.com/Genivia/RE-flex更改日志...
flash/flex 的aqua皮肤.类似苹果系统
FDT-flash/flex devtoolkit for eclipse. for最新版的 FDT 3.5 beta2
来自《潮汕IT男》网站的文章《解决flash/flex/as3 访问中文域名时的流错误》代码示例,地址:http://chenlinsheng.com/?p=990
动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色flex源码动画颜色...
NULL 博文链接:https://summerbell.iteye.com/blog/359226
flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记
第一阶段(2周左右每天至少4个小时):入门 目标是:做简单的demo....参考书:Flex 入门教程http://www.5uflash.com/Flex-AIR/Flexziliao/17.html flex入门介绍:http://download.csdn.net/source/452847
最近开始学习Flex,其中用到了AS,AS2到AS3发生了很大的变化,完全的面向对象,知道这个特点以后我也一直没有特意的好好去学学AS3,但是随着最近学习的深入,还是有必要学习一下
NULL 博文链接:https://as3.iteye.com/blog/1134453
总共有4个例子: 1.http://127.0.0.1:8080/flexDemo/HelloWorld/HelloWorld.html ...如果你的数据库配置和我的不一样,请修改flexDemo\WEB-INF\classes\下的DBSetting.properties文件,数据库建表的sql语句是user.sql
一.flex2的全屏代码 在仅仅使用Flex Builder2(我下载的是FLXB_2.0_Win_WWE.exe)的时候,写全屏代码竟然找不到flash.display.StageDisplayState,于是下载了Flex 2.0.1升级包(官方地址:...(参考:...
这是作者自己亲自编写的教程,里面包含的有图解教程,各式jar,及配置文件,全部包含在内,如果你是一个决定学习flex初学者,我敢保证它肯定适合你!带上你走上flex开发旅途!
本人用FLEX写的直播播放器,基于RTMP协议。代码要放入tomcat等容器里运行,打开play.html即可看到例子效果,含有源代码,希望能帮助到需要的人。
Flex 动画效果 Flex教程 Flex特效 全面讲解flex特效制作,特别是自定义特效
Flex学习笔记1