<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:components="skin.*"
backgroundColor="#B9B9B9"
viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[
import skin.ThemedButtonForward;
]]>
</fx:Script>
<components:Bbuttonskin label="▄︻┳一 · · · · · ·"
x="100" y="50" xDist="2000" yDist="2000"/>
</s:Application>
package skin
{
import flash.events.MouseEvent;
import flash.ui.Mouse;
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
import mx.events.MoveEvent;
import spark.components.Button;
import spark.effects.Move;
import spark.effects.easing.Elastic;
public class Bbuttonskin extends Button
{
// xAncor and yAncor determine the point to which
// the button returns when mouse cursor is too far away
[Bindable] public var xAncor:Number = 0;
[Bindable] public var yAncor:Number = 0;
// Distance on x axis which determine maximum
// distance from xAncor in one direction
[Bindable] public var xDist:Number = 100;
// Distance on y axis which determine maximum
// distance from yAncor in one direction
[Bindable] public var yDist:Number = 50;
// Property that makes transitions between different positions
private var _move:Move = new Move(this);
public function Bbuttonskin()
{
super();
/**
* Tries to add event listener for mouse move event to stage.
* If stage is null than adds event listener for application
* complete and than adds event listener for mouse move
*/
try
{
_move.easer = new Elastic();
_move.duration = 1500;
xAncor = this.x;
yAncor = this.y;
FlexGlobals.topLevelApplication.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouse_move);
}
catch(e:Error)
{
FlexGlobals.topLevelApplication.addEventListener(FlexEvent.APPLICATION_COMPLETE, app_complete);
}
}
/**
* Function that is called when Main application is complete.
* It sets easer property and duration property for _move, set ancor
* of the button to the buttens current x and y position and as
* mentioned above adds an event listener for mouse move
*/
private function app_complete(e:FlexEvent):void
{
_move.easer = new Elastic();
_move.duration = 1500;
xAncor = this.x;
yAncor = this.y;
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouse_move);
}
/**
* Sets the ancor of the button and also move it to that position.
*/
public function setAncor(_x:Number,_y:Number):void
{
xAncor = _x;
yAncor = _y;
_move.xTo = _x;
_move.yTo = _y;
_move.play();
}
/**
* Function that actually calculates and moves the button to the right position.
*/
private function mouse_move(e:MouseEvent):void
{
// Some basic math logic to calculate if mouse cursor
// is close enough to move the button to that location
if ( Math.abs((xAncor + this.width/2) - stage.mouseX) < 2*xDist &&
Math.abs((yAncor + this.height/2) - stage.mouseY) < 2*yDist )
{
_move.xTo = stage.mouseX - this.width/2;
_move.yTo = stage.mouseY - this.height/2;
}
else
{
_move.xTo = xAncor;
_move.yTo = yAncor;
}
_move.play();
}
}
}
分享到:
相关推荐
Flash游来游去的鱼,Flash制作跟随鼠标游动的金鱼动画,非常逼真的金鱼动画效果,并且跟随鼠标游动,Flash源文件没有细看,或许里面用了比较多的ActionScript动作脚本。
js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母...
在这个“HTML5实现鲸鱼游动特效”的项目中,我们将探讨如何利用HTML5的特性,结合JavaScript和CSS来创建一个跟随鼠标移动的动态鲸鱼动画。 首先,`index.html`是网页的主文件,它包含了整个页面的结构。在HTML5中,...
3. **JavaScript事件监听**:为了让大白鲨跟随鼠标游动,需要使用JavaScript来监听鼠标的移动事件(`mousemove`)。当鼠标位置改变时,JavaScript会更新大白鲨元素的位置。 4. **坐标转换**:JavaScript的事件对象...
为了实现鲸鱼跟随鼠标移动的效果,我们需要监听鼠标的移动事件,获取鼠标的坐标,并更新鲸鱼的位置。在JavaScript中,可以使用`addEventListener`来添加事件监听器: ```javascript canvas.addEventListener('...
开发者需要监听WM_MOUSEMOVE消息,当鼠标移动时,根据鼠标的当前位置更新金鱼的坐标,使金鱼跟随鼠标游动。 其次,图形用户界面(GUI)的创建也是关键。在C#中,可以使用Windows Forms或WPF(Windows Presentation ...
`animation`和`transition`则用于创建和控制动画,比如在鼠标移动时让"鱼"开始游动,鼠标停止时"鱼"也静止。 然而,描述中提到这个特效"很占资源",这可能是因为实时计算鼠标的运动并更新"鱼"的位置和动画状态需要...
之前看到过同样效果的一款鲸鱼鼠标跟随动画特效,不过可惜的是那个动画是用flash制作的。今天介绍的这款源码是基于HTML5的鲸鱼动画,鲸鱼会随着鼠标的移动而游动,画面非常立体,鲸鱼也超级逼真。真的,HTML5确实很...
之前看到过同样效果的一款鲸鱼鼠标跟随动画特效,不过可惜的是那个动画是用flash制作的。今天介绍的这款源码是基于HTML5的鲸鱼动画,鲸鱼会随着鼠标的移动而游动,画面非常立体,鲸鱼也超级逼真。真的,HTML5确实很...
本文实例为大家分享了js实现跟随鼠标移动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>follow mouse</title> </head> <style type=text/css&...
开发者可以通过监听这个事件,获取鼠标的当前位置(x坐标和y坐标),然后用这些信息来改变小鱼的位置,让它仿佛在跟随鼠标游动。 实现这样的效果通常涉及以下步骤: 1. **创建小鱼元素**:在HTML中,我们可以创建...
在水母动画特效中,Canvas被用来绘制每一个水母及其运动轨迹,以及实现灯光效果跟随鼠标指针的变化。 水母动画的实现通常会涉及以下几个关键步骤: 1. **初始化Canvas**:在HTML中创建`<canvas>`元素,并在...
这需要开发者在程序中实现鼠标事件的捕获和处理,当检测到鼠标拖动时,调整金鱼的坐标,使其跟随鼠标移动。 在MFC中,这样的功能可能通过`CWnd`类或其子类实现,`CWnd`是所有窗口对象的基础类,它包含了处理窗口...
例如,当鼠标移动时,图形可能会跟随鼠标的移动轨迹游动,或者根据鼠标的点击位置进行某些特定的动作。 在实际开发中,为了优化性能,开发者还需要考虑内存管理和渲染效率。例如,使用`clearRect()`清除画布的特定...
这段代码将小鱼的位置与鼠标的位置关联起来,使得鼠标移动时,小鱼会跟随移动。然而,为了让小鱼看起来像是在游动,我们需要加入一些动画效果。这可以通过CSS3的`transition`属性或者使用JavaScript来实现帧动画。 ...
这表明该程序不仅能够响应用户的鼠标点击操作,而且具备目标追踪能力,即游泳者可以跟随鼠标点击的位置移动,仿佛是在追踪一个目标,这样的功能在模拟搜索、导航或者路径规划等场景中很有用。 在这个压缩包"swimmer...
在鲨鱼跟随鼠标移动时,可以通过调整`transform: translate(x, y)`来改变元素的横纵坐标,模拟出鲨鱼游动的效果。 在标签中提到的“Java”,虽然与HTML和CSS3主要关联的前端技术不同,但可能意味着后端与前端的交互...
当用户移动鼠标时,JavaScript会捕获鼠标的位置信息,然后根据这些信息更新鲸鱼的坐标,使其仿佛在跟随鼠标游动。这通常涉及到`addEventListener()`函数来添加事件监听器,以及`onmousemove`事件处理程序来处理鼠标...
关键规则包括:保持距离(避免碰撞)、对齐(朝相同方向游动)、和深度(跟随群体)。在代码中,每个鱼都是一个独立的对象,具有位置、速度和方向等属性,通过更新这些属性来模拟游动。 4. 动画原理: 动画效果是...