package common{
import core.App;
import core.Clip;
import core.UIElement;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.utils.getDefinitionByName;
public class Index extends UIElement{
private var butterNum:Number=2;//动画的个数
private var butterArr:Array;//动画数组***************
private var easingArr:Array;//缓动系数
private var vxArr:Array;//X轴速度
private var vyArr:Array;//Y轴速度
private var left:Number=0;//动画运动的范围,左
private var right:Number=App.width;//右
private var top:Number=0;//上
private var bottom:Number=App.height;//下
//以下参数关于速度变换
private var myDate:Date;
private var preTimeArr:Array;//上次变换速度的时间
private var changeSpeedArr:Array;//间隔多少毫秒换所有的速度
//以下参数控制是否自动播放还是鼠标控制
private var inMouseContral:Array;//动画移动是否受鼠标控制
private var targetBX:Number=0;//鼠标控制动画移动时所要达到的目标点位置
private var targetBY:Number=0;
//下面的参数是其中一只动画根据用户画的轨迹而飞。
private var mouseTracks:Array;//鼠标画的轨迹。
private var justPress:Boolean=true;//是否只是单击,如果为否,则是依轨迹飞行,如果为true,则表示只是飞到鼠标点击到的位置。
private var spriteA:Sprite;//画轨迹线
public function Index(){
init();
}
private function init():void{
myDate=new Date();//速度变换
butterArr=new Array();//动画数组
vxArr=new Array();//X轴速度
vyArr=new Array();//Y轴速度
easingArr=new Array();//缓动系数
preTimeArr=new Array();//上次变换速度的时间
changeSpeedArr=new Array();//间隔多少毫秒换所有的速度
inMouseContral=new Array();//动画移动是否受鼠标控制
mouseTracks=new Array();//鼠标画的轨迹
this.spriteA=new Sprite();//画轨迹线
this.spriteA.x=this.spriteA.y=0;
addChild(this.spriteA);
for(var i:int=0;i<butterNum;i++){
butterInit(i);
}
App.stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouse_Down);
App.stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouse_Move);
App.stage.addEventListener(MouseEvent.MOUSE_UP,onMouse_Up);
App.doInterval(this.doPageTime);
}
//动画初始化
private function butterInit(num:Number):void{
var myMovie:Clip=new Clip("effect.Clip_2068");
myMovie.loop=true;
myMovie.play();
myMovie.x=Math.random()*App.width;
myMovie.y=Math.random()*App.height;
addChild(myMovie);
butterArr.push(myMovie);
vxArr[num]=-Math.random()*3;//速度赋值(最大-3像素)
vyArr[num]=Math.random()*6-3;//区别于X速度(最大3像素)
easingArr[num]=Math.round(Math.random()*3+1)*0.1;//缓动系数
myDate=new Date();
preTimeArr[num]=myDate.getTime();//前一时间
changeSpeedArr[num]=Math.round(Math.random()*5+5)*1000;//间隔多少毫秒换所有的速度(5-10秒)
inMouseContral[num]=false;//是否鼠标控制
}
private function onMouse_Down(evt:MouseEvent):void{
inMouseContral[0]=false;//不是鼠标控制,可以自主飞行***********************
mouseTracks.splice(0);//删除路径数组中的所有值
this.spriteA.graphics.clear();
this.spriteA.graphics.lineStyle(2,0x00ff00);
this.spriteA.graphics.moveTo(mouseX,mouseY);
}
private function onMouse_Move(evt:MouseEvent):void{
if(evt.buttonDown){
var thisArr:Array=new Array();//当前的点坐标的数据
if(mouseTracks.length>=1){
//平滑处理第一步(简单的除2)
thisArr[0]=(mouseX+mouseTracks[mouseTracks.length-1][0])/2;
thisArr[1]=(mouseY+mouseTracks[mouseTracks.length-1][1])/2;
//平滑处理第二步(倒数第二点、当前点,修正最后一点)
if(mouseTracks.length>=2){
var leftP:int=mouseTracks.length-2;
var centerP:int=mouseTracks.length-1;
mouseTracks[centerP][0]=(mouseTracks[leftP][0]+thisArr[0])/2;
mouseTracks[centerP][1]=(mouseTracks[leftP][1]+thisArr[1])/2;
}
}
else{
thisArr[0]=mouseX;
thisArr[1]=mouseY;
}
mouseTracks.push(thisArr);
this.spriteA.graphics.lineTo(thisArr[0],thisArr[1]);
}
}
private function onMouse_Up(evt:MouseEvent):void{
//如果路径里没有数据,则没有画轨迹
inMouseContral[0]=true;//仅控制下标为0的一个动画跟随鼠标移动
this.justPress=mouseTracks.length==0;//判断是否是仅仅点击一下
if(this.justPress){
this.targetBX=mouseX;
this.targetBY=mouseY;
}
else{
//重绘四部曲!~~
this.spriteA.graphics.clear();//将没有进行第二步平滑处理的线条删了,重新画
this.spriteA.graphics.lineStyle(2,0x00ff00);
this.spriteA.graphics.moveTo(mouseTracks[0][0],mouseTracks[0][1]);
//重绘所有经过二次平滑处理的线
for(var i:int=1;i<mouseTracks.length;i++){
this.spriteA.graphics.lineTo(mouseTracks[i][0],mouseTracks[i][1]);
}
}
}
private function doPageTime():void{
for(var i:int=0;i<butterNum;i++){
ButterflysMove(butterArr[i],i);
}
}
private function ButterflysMove(mc:Clip,num:Number):void{
//鼠标弹起的时候,才对需要跟随轨迹运行的动画,赋true
if(inMouseContral[num]==true){
if(this.justPress) MouseContral(mc,this.targetBX,this.targetBY,num);//动画朝单击点飞行
else moveFollowMouse(mc,0);//动画绕鼠标画的运动轨迹飞行
}
//自己自动飞行
else{
AutoMove(mc,num);
}
}
//动画跟随鼠标画的运动轨迹飞行
private function moveFollowMouse(mc:Clip,num:Number):void{
//没有值,就是走到轨迹尽头了,则重置相关变量
if(mouseTracks.length==0){
this.spriteA.graphics.clear();
inMouseContral[num]=false;
myDate=new Date();
preTimeArr[num]=myDate.getTime();//上次变换速度的时间
changeSpeedArr[num]=2000;//停多少秒就自由飞行
vxArr[num]=0;
vyArr[num]=0;
}
else{
var targetX:int=mouseTracks[0][0];
var targetY:int=mouseTracks[0][1];
var dx:int=targetX-mc.x;
var dy:int=targetY-mc.y;
var dist:int=Math.sqrt(dx*dx+dy*dy);//计算出距离
//当前点和目标点的距离大于1,才需要变换角度,这也是平滑处理的一部分
if(dist>1) this.centerRotate(mc,Math.atan2(dy,dx)*180/Math.PI);
mc.x=targetX-mc.width/2;
mc.y=targetY-mc.height/2;
mouseTracks.shift();//删除刚刚已经使用过的第一个位置
}
}
//动画朝单击点飞行
private function MouseContral(mc:Clip,targetX:Number,targetY:Number,num:Number):void{
var dx:int=targetX-mc.x;
var dy:int=targetY-mc.y;
var angle:Number=Math.atan2(dy,dx);//这是mc的角度
this.centerRotate(mc,angle*180/Math.PI);
//和目标点的距离小于1
if(Math.sqrt(dx*dx+dy*dy)<1){
//重置动画的各个参数
inMouseContral[num]=false;//说明飞到了目标点了,可以自主飞行了
mc.x=targetX;
mc.y=targetY;
myDate=new Date();
preTimeArr[num]=myDate.getTime();
changeSpeedArr[num]=2000;//停多少秒就自由飞行
vxArr[num]=0;//让动画速度为0 ,即到达目标点后休息下,在自由飞行
vyArr[num]=0;
}
else{
//实现了先快后慢的缓动
mc.x+=dx*easingArr[num];
mc.y+=dy*easingArr[num];
}
}
private function centerRotate(mc:UIElement,angle:Number):void{
var currentRotation:Number = mc.rotation;
//获取mc不旋转时候的尺寸
mc.rotation=0;
var mcWidth:Number=mc.width;
var mcHeight:Number=mc.height;
mc.rotation=currentRotation;
//获取mc当前中心点坐标
var pointO:Point=mc.localToGlobal(new Point(Math.min(mcWidth/2,mcHeight/2),Math.min(mcWidth/2,mcHeight/2)));
//旋转mc
mc.rotation=angle;
//获取mc旋转后中心点坐标
var pointO2:Point=mc.localToGlobal(new Point(Math.min(mcWidth/2,mcHeight/2),Math.min(mcWidth/2,mcHeight/2)));
//平移到原来中心点O
var p3:Point=pointO.subtract(pointO2);
var matrix:Matrix=mc.transform.matrix;
matrix.translate(p3.x, p3.y);
mc.transform.matrix=matrix;
}
//动画自由飞行。。。。。。。
private function AutoMove(mc:Clip,num:Number):void{
myDate=new Date();
var thisTime:Number=myDate.getTime();
//达到变换速度的时间间隔,X,Y轴速度都换
if((thisTime-preTimeArr[num])>changeSpeedArr[num]){
preTimeArr[num]=thisTime;
vxArr[num]=-Math.random()*3;
vyArr[num]=Math.random()*6-3;
changeSpeedArr[num]=Math.round(Math.random()*5+5)*1000;//重新赋值时间间隔。
}
mc.x+=vxArr[num];//随机产生的一个位移,其实也就相当与一个移动速度
mc.y+=vyArr[num];
//以下是出界处理,到边界后,不到速度变换的时间,按照修正后的位置执行。
if(mc.x<left){
mc.x=left;
vxArr[num]*=-1;
}
if(mc.x>right){
mc.x=right;
vxArr[num]*=-1;
}
if(mc.y<top){
mc.y=top;
vyArr[num]*=-1;
}
if(mc.y>bottom){
mc.y=bottom;
vyArr[num]*=-1;
}
//因为动画到达鼠标点击的位置后,会重置速度为0,所以导致方向变换,在这里就做限制
if(vyArr[num]!=0&&vxArr[num]!=0) this.centerRotate(mc,Math.atan2(vyArr[num],vxArr[num])*180/Math.PI);
}
}
}
分享到:
相关推荐
这种特效通常会在用户移动鼠标时激活,使得页面上的元素根据鼠标的移动轨迹进行动态的解体、分散或重组,呈现出一种动态的、科幻般的视觉效果。 首先,我们来看HTML部分。HTML是超文本标记语言,它是网页的基础结构...
标题 "跟随鼠标旋转的流星.rar" 提供的信息表明,这个压缩包可能包含一个互动的图形或编程项目,其中的元素(可能是图像或者动画)会随着鼠标的移动而动态旋转,模拟流星的效果。这种效果通常在游戏、网页特效或教学...
在这个特效中,每当你移动鼠标,心形就会改变它的旋转角度,模拟出跟随的效果。 至于压缩包内的文件"jiaoben20150612",这可能是源代码文件或者相关的资源文件,可能包含了实现这个特效的HTML、CSS和JavaScript代码...
开发者会使用JavaScript或者相关的库(如CreateJS、Pixi.js等)来编写代码,控制鲨鱼的运动轨迹和行为,使其能够随着鼠标的移动而移动。 JavaScript在HTML5动画中扮演着至关重要的角色。通过监听鼠标的移动事件,...
这个特效允许用户通过鼠标移动来改变火箭的飞行轨迹,并且通过鼠标单击并长按来加速火箭的飞行速度。我们将重点讨论以下几个关键知识点: 1. **HTML5 Canvas**: HTML5 Canvas是一个基于矢量图形的画布元素,允许...
在本文中,我们将深入探讨如何使用Flash来实现沿路径飞行并旋转的动画效果。这个实例是基于Flash的动作脚本(ActionScript),一个强大的编程语言,用于控制Flash中的交互性和动画。通过理解并应用这些知识,你可以...
4. **动画路径**:元素沿着鼠标移动的轨迹产生动画效果,如粒子效果或线条绘制。 压缩包内的文件`index.htm`是主网页文件,可能包含了实现这一特效的HTML结构和JavaScript代码。`说明.htm`可能是提供关于如何使用或...
轨迹球的工作原理是通过追踪鼠标在球面上的运动路径,将这些轨迹转化为旋转矩阵,从而更新相机的视角。 描述中提到,这个程序实现了球体的“自动旋转”和“任意旋转操作”。自动旋转意味着程序可以设定一个初始的...
本资源“html5实现的可跟随鼠标移动银河星系流星雨背景动画特效源码.zip”显然是一个利用HTML5特性构建的动态背景效果,允许用户通过鼠标移动来操控银河星系和流星雨的动画。以下将详细讲解实现此类特效所涉及的...
- **轨迹效果**:例如,创建光标留下的轨迹,或者元素围绕鼠标旋转等。 6. **性能优化**: - **clearRect()**:在每一帧开始前清空Canvas,防止旧的图像残留,提高视觉效果的清晰度。 - **条件绘制**:只有当...
在“切水果”游戏中,当用户移动鼠标时,会看到一个模拟刀片的图形跟随鼠标轨迹,切割屏幕上的水果。这种特效需要对鼠标的实时位置进行跟踪,并动态渲染图形。 3. **事件驱动编程**:VC++采用事件驱动编程模型,这...
1. ****:通过JavaScript的Canvas API,可以直接在画布上绘制和修改像素,实现高度定制的动画效果,如动态眼睛、嘴巴的运动轨迹。 2. **SVG**:可缩放矢量图形(SVG)是一种用于绘制图形的XML标记语言,适用于创建...
`WinMain`函数用于初始化窗口,而`Message Loop`则负责接收和处理系统消息,如键盘输入和鼠标移动,这些都可能触发动画的更新。 2. **GDI(Graphics Device Interface)**:Visual C++ 6.0中,GDI是用于绘制2D图形...
在这个雨中行人动画中,开发者可能用到了`moveTo()`和`lineTo()`来描绘雨滴下落的轨迹,以及`ellipse()`或者`arc()`来绘制伞的形状。 2. **动画原理**:实现动画效果通常需要定时更新画面。通过`...
3. **坐标系统与变换**:canvas使用笛卡尔坐标系,通过translate()、rotate()、scale()等方法可以改变画布的坐标系,实现物体的移动、旋转和缩放效果,这对于动画中的运动轨迹至关重要。 4. **事件监听**:通过监听...
2. **鼠标事件处理**:通过JavaScript的`addEventListener`方法,可以监听鼠标的`mousemove`事件,当鼠标在Canvas上移动时,获取鼠标的坐标位置,然后将这些坐标作为粒子动画的互动参考点。 3. **粒子系统**:粒子...
5. **事件处理**:“拖动”一词意味着用户可以与动画进行交互,可能是通过鼠标或触摸事件来改变圆点的运动轨迹或行为。这可能涉及到监听`mousedown`、`mousemove`和`mouseup`事件,根据用户的输入更新圆点的状态。 ...
在小老虎动画中,可能会用到translate()来移动元素,rotate()来旋转元素,scale()来放大或缩小元素,以及skew()来对元素进行倾斜。这些变形可以组合使用,创造出复杂的运动轨迹和视觉效果。 接着,CSS3的过渡...
5. **交互性**:除了预设的动画,你还可以添加用户交互,如点击触发更多纸屑飘落,或者通过鼠标移动改变风向。这将使动画更加生动有趣。 6. **发布与兼容性**:最后,记得在完成动画后导出为SWF格式,以便在网页上...