[AS3编程教学]滚轮缩放高级教程-缓动缩放

首先要介绍大家一个非常重要的缓动公式，这个公式是所有缓动效果的精髓：AS3缓动公式:sprite.x += (targetX – sprite.x) * easing; sprite.y += (targetY – sprite.y) * easing; 其中easing为缓动系数变量，必须是一个小于1大于0的数字

因为是高级教程，我们侧重于编程教学，所以不再从头开始，而是世界从中级教程的基础上进行代码的完善和功能的添加。下图是我们中级教材的代码源文件：//记录小狗初始中心位置 var dogInitx:Number = mcDog.x + mcDog.width/2; var dogInity:Number = mcDog.y + mcDog.height/2; //添加滚轮侦听 stage.addEventListener(MouseEvent.MOUSE_WHEEL,changeDogScale); function changeDogScale(e:MouseEvent):void {  var delt:int = int(e.delta);  mcDog.scaleX = mcDog.scaleY += delt/20;  //判断当小狗尺寸变负时赋予它最小值  if(mcDog.scaleX < 0)  {  mcDog.scaleX = mcDog.scaleY = 0.1;  return;  }  //记录小狗得当前中心位置  var curDogx:Number = mcDog.x+ mcDog.width/2;  var curDogy:Number = mcDog.y+ mcDog.height/2;  //将改变大小尺寸后的小狗图片中心实时移动到原始的中心  var dx:Number = dogInitx - curDogx;  var dy:Number = dogInity - curDogy;  mcDog.x +=dx;  mcDog.y +=dy; }

发布运行，变可以实现滚轮缩放，但是这个效果是很生硬的，用户体验不好！主要在两个方面，一个是大小变化生硬，另一个是位置变化声音，我们一个一个解决。首先解决大小变化的问题，根据缓动公式，我们需要写一个函数来对图片进行缩放操作哦，而且知道每次滚轮操作后，图片的最终大小，为此，我们需要定义一个最终大小的变量，方便使用： //每次尺寸的变化量 var changeScale:Number = 0; //改变尺寸 function setImgScale(scaleNum:Number):void {  if(mcDog.scaleX < 0)  {  mcDog.scaleX = mcDog.scaleY = 0.1;  return;  }  var step:Number = (scaleNum - mcDog.scaleX)/3;  mcDog.scaleX +=step;  mcDog.scaleY += step; } 这个函数的参数便是图片最终的缩放尺寸

接下来我们在滚轮响应函数中加入一个EtenrFrame事件侦听，循环执行setImgScale函数，来实现缓慢放大缩小的效果：//记录小狗初始中心位置 var dogInitx:Number = mcDog.x + mcDog.width/2; var dogInity:Number = mcDog.y + mcDog.height/2; //每次尺寸的变化量 var changeScale:Number = 0; //添加滚轮侦听 stage.addEventListener(MouseEvent.MOUSE_WHEEL,changeDogScale); function changeDogScale(e:MouseEvent):void {  var delt:int = int(e.delta);  //加入尺寸变化的缓动效果  changeScale = mcDog.scaleX + delt/20;  this.addEventListener(Event.ENTER_FRAME,changeDogParam);  //记录小狗得当前中心位置  var curDogx:Number = mcDog.x+ mcDog.width/2;  var curDogy:Number = mcDog.y+ mcDog.height/2;  //将改变大小尺寸后的小狗图片中心实时移动到原始的中心  var dx:Number = dogInitx - curDogx;  var dy:Number = dogInity - curDogy;  mcDog.x +=dx;  mcDog.y +=dy; } function changeDogParam(e:Event):void {  setImgScale(changeScale); } //改变尺寸 function setImgScale(scaleNum:Number):void {  if(mcDog.scaleX < 0)  {  mcDog.scaleX = mcDog.scaleY = 0.1;  return;  }  var step:Number = (scaleNum - mcDog.scaleX)/3;  mcDog.scaleX +=step;  mcDog.scaleY += step; }

此时测试发现，已经实现了缓慢放大效果，唯一的问题便是位置依旧会跑到一侧去，所以接下来我们解决位置居中的问题。我们接着写一个调整位置函数，用来处理图片缓慢地移动都某个位置： //改变位置 function setImgPos(px:Number,py:Number):void  {  mcDog.x += (px - mcDog.x)/3;  mcDog.y += (py - mcDog.y)/3; }

接下来我们需要知道每次滚轮缩放后，将图片移动到原来的中心位置时图片的实际坐标位置在哪里，因此我们需要定义两个变量，用于在每次滚轮事件后计算图片的实际位置，以便后面调整位置使用： //小狗每次缩放后的最终实际位置 var lastDogx:Number = 0; var lastDogy:Number = 0;

此时第一帧完整的代码如下： //记录小狗初始中心位置 var dogInitx:Number = mcDog.x + mcDog.width/2; var dogInity:Number = mcDog.y + mcDog.height/2; //小狗每次缩放后的最终实际位置 var lastDogx:Number = 0; var lastDogy:Number = 0; //每次尺寸的变化量 var changeScale:Number = 0; //添加滚轮侦听 stage.addEventListener(MouseEvent.MOUSE_WHEEL,changeDogScale); function changeDogScale(e:MouseEvent):void  {  var delt:int = int(e.delta);  //加入尺寸变化的缓动效果  changeScale = mcDog.scaleX + delt/10;  //记录小狗得当前中心位置  var curDogx:Number = mcDog.x+ mcDog.width/2;  var curDogy:Number = mcDog.y+ mcDog.height/2;  //换算出最终实际位置  lastDogx = mcDog.x + (dogInitx - curDogx);  lastDogy = mcDog.y + (dogInity - curDogy);  this.addEventListener(Event.ENTER_FRAME,changeDogParam); } function changeDogParam(e:Event):void  {  setImgScale(changeScale);  setImgPos(lastDogx,lastDogy); } //改变尺寸 function setImgScale(scaleNum:Number):void  {  if (mcDog.scaleX < 0)   {  mcDog.scaleX = mcDog.scaleY = 0.1;  return;  }  var step:Number = (scaleNum - mcDog.scaleX)/3;  mcDog.scaleX +=step;  mcDog.scaleY += step; } //改变位置 function setImgPos(px:Number,py:Number):void  {  mcDog.x += (px - mcDog.x)/3;  mcDog.y += (py - mcDog.y)/3; }

测试发布影片，发现你需要的效果已经全部实现，的确是缓动缩放图片效果。

需要提出的是，changeDogScale函数是一个滚轮每次滚动都会执行的函数，那么循环侦听事件必然会被反复添加侦听，这种写法和效率都很低，因此我们稍作修改，判断一下， 当这个事件已经存在时，就不用再次添加侦听，注意下图的蓝色选中部分代码，如何判断已经有某个事件侦听： //添加滚轮侦听 stage.addEventListener(MouseEvent.MOUSE_WHEEL,changeDogScale); function changeDogScale(e:MouseEvent):void  {  var delt:int = int(e.delta);  //加入尺寸变化的缓动效果  changeScale = mcDog.scaleX + delt/10;  //记录小狗得当前中心位置  var curDogx:Number = mcDog.x+ mcDog.width/2;  var curDogy:Number = mcDog.y+ mcDog.height/2;  //换算出最终实际位置  lastDogx = mcDog.x + (dogInitx - curDogx);  lastDogy = mcDog.y + (dogInity - curDogy);  if(!this.hasEventListener(Event.ENTER_FRAME))this.addEventListener(Event.ENTER_FRAME,changeDogParam); }

至此本教材介绍结束，效果全部实现，完整代码如下：

//记录小狗初始中心位置 var dogInitx:Number = mcDog.x + mcDog.width/2; var dogInity:Number = mcDog.y + mcDog.height/2; //小狗每次缩放后的最终实际位置 var lastDogx:Number = 0; var lastDogy:Number = 0; //每次尺寸的变化量 var changeScale:Number = 0; //添加滚轮侦听 stage.addEventListener(MouseEvent.MOUSE_WHEEL,changeDogScale); function changeDogScale(e:MouseEvent):void  {  var delt:int = int(e.delta);  //加入尺寸变化的缓动效果  changeScale = mcDog.scaleX + delt/10;  //记录小狗得当前中心位置  var curDogx:Number = mcDog.x+ mcDog.width/2;  var curDogy:Number = mcDog.y+ mcDog.height/2;  //换算出最终实际位置  lastDogx = mcDog.x + (dogInitx - curDogx);  lastDogy = mcDog.y + (dogInity - curDogy);  if(!this.hasEventListener(Event.ENTER_FRAME))this.addEventListener(Event.ENTER_FRAME,changeDogParam); } function changeDogParam(e:Event):void  {  setImgScale(changeScale);  setImgPos(lastDogx,lastDogy); } //改变尺寸 function setImgScale(scaleNum:Number):void  {  if (mcDog.scaleX < 0)   {  mcDog.scaleX = mcDog.scaleY = 0.1;  return;  }  var step:Number = (scaleNum - mcDog.scaleX)/3;  mcDog.scaleX +=step;  mcDog.scaleY += step; } //改变位置 function setImgPos(px:Number,py:Number):void  {  mcDog.x += (px - mcDog.x)/3;  mcDog.y += (py - mcDog.y)/3; }