Skip to content

Commit

Permalink
优化annieUI.SildePage组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlun214
anlun214 committed May 18, 2017
1 parent 1a2da41 commit c194648
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 147 deletions.
120 changes: 52 additions & 68 deletions annie/ui/SlidePage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,21 +46,14 @@ namespace annieUI {
* @public
* @default 0
*/
public slideSpeed: number = 0.4;
public slideSpeed: number = 0.3;
/**
* 触摸点开始点X
* @property touchStartX
* @type {number}
* @private
*/
private touchStartX: number = 0;
/**
* 触摸点开始点Y
* @property touchStartY
* @type {number}
* 是否滑动中断
* @property _isBreak
* @private
* @type {boolean}
*/
private touchStartY: number = 0;
private _isBreak:boolean=false;
/**
* @property 滚动距离
* @type {number}
Expand Down Expand Up @@ -184,7 +177,7 @@ namespace annieUI {
s.addChild(s.view);
s.view.mask = s.maskObj;
s.setMask(vW, vH);
var me=s.onMouseEvent.bind(s);
var me = s.onMouseEvent.bind(s);
s.addEventListener(annie.MouseEvent.MOUSE_DOWN, me);
s.addEventListener(annie.MouseEvent.MOUSE_MOVE, me);
s.addEventListener(annie.MouseEvent.MOUSE_UP, me);
Expand Down Expand Up @@ -213,68 +206,51 @@ namespace annieUI {
* @param e
*/
private onMouseEvent(e: annie.MouseEvent): void {
var s:any = this;
if(s.isMoving)return;
var s: any = this;
if (s.isMoving)return;
if (e.type == annie.MouseEvent.MOUSE_DOWN) {
s.touchStartX = s.touchEndX = e.localX;
s.touchStartY = s.touchEndY = e.localY;
s.touchEndX = e.localX;
s.touchEndY = e.localY;
s.movingX = s.movingY = 0;
s.isMouseDown = true;
s._isBreak=false;
} else if (e.type == annie.MouseEvent.MOUSE_MOVE) {
let movingX = e.localX - s.touchEndX;
let movingY = e.localY - s.touchEndY;
if (s.movingX != 0 && s.movingY != 0) {
if ((s.movingX > 0 && movingX < 0) || (s.movingX < 0 && movingX > 0) || (s.movingY > 0 && movingY < 0) || (s.movingY < 0 && movingY > 0)) {
s.isMouseDown = false;
}
}
s.touchEndX = e.localX;
s.touchEndY = e.localY;
s.movingX = movingX;
s.movingY = movingY;
let ts:number=s.touchStartY;
let te:number=s.touchEndY;
if (!s.isMouseDown)return;
let mx:number= e.localX - s.touchEndX;
let my= e.localY - s.touchEndY;
// s.touchEndX = e.localX;
// s.touchEndY = e.localY;
let ts: number = my;
let lts:number=s.movingY;
if (!s.isVertical) {
ts=s.touchStartX;
te=s.touchEndX;
ts = mx;
lts=s.movingX;
}
if(Math.abs(ts)-Math.abs(lts)<1){
s._isBreak=true;
}
if (((s.currentPageIndex == 0)&&(ts < te))||((s.currentPageIndex == s.listLen - 1)&&(ts > te))) {
s.view[s.paramXY] += (te-ts) / s.distance * s.fSpeed * 0.6;
s.movingX=mx;
s.movingY=my;
if (ts > 0 && s.currentPageIndex == 0) {
s.view[s.paramXY] = ts * 0.3;
} else if (ts < 0 && (s.currentPageIndex == s.listLen - 1)) {
s.view[s.paramXY] = -s.currentPageIndex*s.distance+ts * 0.3;
}
} else if (e.type == annie.MouseEvent.MOUSE_UP) {
if(!s.isMouseDown)return;
if (!s.isMouseDown)return;
s.isMouseDown = false;
s.touchEndX = e.localX;
s.touchEndY = e.localY;
let isNext:boolean=true;
let ts:number=s.touchStartY;
let te:number=s.touchEndY;
let ts: number = s.movingY;
if (!s.isVertical) {
ts=s.touchStartX;
te=s.touchEndX;
ts = s.movingX;
}
let distance = Math.abs(ts-te);
if (distance > s.distance*0.2) {
isNext = ts > te;
let xyValue=0;
let isNeedSlide=true;
if (isNext) {
if (s.currentPageIndex >= s.listLen - 1) {
xyValue=-s.distance * (s.listLen - 1);
isNeedSlide=false;
}
} else {
if (s.currentPageIndex <=0) {
isNeedSlide=false;
}
}
if(isNeedSlide){
s.slideTo(isNext);
}else{
let tweenData:any={};
tweenData[s.paramXY]=xyValue;
if((s.currentPageIndex == 0&&s.view[s.paramXY]>0)||(s.currentPageIndex==(s.listLen-1)&&s.view[s.paramXY]<-s.currentPageIndex*s.distance)){
let tweenData:any={};
tweenData[s.paramXY]=-s.currentPageIndex*s.distance;
tweenData.ease= annie.Tween.backOut;
annie.Tween.to(s.view, s.slideSpeed * 0.5, tweenData);
annie.Tween.to(s.view, 0.2, tweenData);
}else{
if (Math.abs(ts) > 100&&!s._isBreak) {
s.slideTo(ts < 0);
}
}
}
Expand All @@ -289,15 +265,22 @@ namespace annieUI {
*/
public slideTo(isNext: boolean): void {
var s = this;
if (s.isMoving||s.isMouseDown) {
if (s.isMoving || s.isMouseDown) {
return;
}
if (isNext) {
s.currentPageIndex++;
if (s.currentPageIndex <s.listLen - 1) {
s.currentPageIndex++;
} else {
return;
}
} else {
s.currentPageIndex--;
if (s.currentPageIndex > 0) {
s.currentPageIndex--;
} else {
return;
}
}
if (s.currentPageIndex < 0 || s.currentPageIndex >= s.listLen)return;
if (!s.pageList[s.currentPageIndex]) {
s.pageList[s.currentPageIndex] = new s.pageClassList[s.currentPageIndex]();
s.pageList[s.currentPageIndex][s.paramXY] = s.currentPageIndex * s.distance;
Expand All @@ -320,14 +303,15 @@ namespace annieUI {
annie.Tween.to(s.view, s.slideSpeed, tweenData);
s.dispatchEvent("onSlideStart", {isNext: isNext});
}

/**
* 用于插入分页
* @method addPageList
* @param {Array} classList 每个页面的类，注意是类，不是对象
* @since 1.0.3
* @public
*/
public addPageList(classList:any): void {
public addPageList(classList: any): void {
var s = this;
s.pageClassList = s.pageClassList.concat(classList);
if (s.listLen == 0 && s.pageClassList.length > 0) {
Expand Down
15 changes: 4 additions & 11 deletions build/annieUI.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,19 +288,12 @@ declare namespace annieUI {
*/
slideSpeed: number;
/**
* 触摸点开始点X
* @property touchStartX
* @type {number}
* @private
*/
private touchStartX;
/**
* 触摸点开始点Y
* @property touchStartY
* @type {number}
* 是否滑动中断
* @property _isBreak
* @private
* @type {boolean}
*/
private touchStartY;
private _isBreak;
/**
* @property 滚动距离
* @type {number}
Expand Down
119 changes: 52 additions & 67 deletions build/annieUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -514,21 +514,14 @@ var annieUI;
* @public
* @default 0
*/
this.slideSpeed = 0.4;
this.slideSpeed = 0.3;
/**
* 触摸点开始点X
* @property touchStartX
* @type {number}
* @private
*/
this.touchStartX = 0;
/**
* 触摸点开始点Y
* @property touchStartY
* @type {number}
* 是否滑动中断
* @property _isBreak
* @private
* @type {boolean}
*/
this.touchStartY = 0;
this._isBreak = false;
/**
* @property 滚动距离
* @type {number}
Expand Down Expand Up @@ -674,70 +667,55 @@ var annieUI;
if (s.isMoving)
return;
if (e.type == annie.MouseEvent.MOUSE_DOWN) {
s.touchStartX = s.touchEndX = e.localX;
s.touchStartY = s.touchEndY = e.localY;
s.touchEndX = e.localX;
s.touchEndY = e.localY;
s.movingX = s.movingY = 0;
s.isMouseDown = true;
s._isBreak = false;
}
else if (e.type == annie.MouseEvent.MOUSE_MOVE) {
var movingX = e.localX - s.touchEndX;
var movingY = e.localY - s.touchEndY;
if (s.movingX != 0 && s.movingY != 0) {
if ((s.movingX > 0 && movingX < 0) || (s.movingX < 0 && movingX > 0) || (s.movingY > 0 && movingY < 0) || (s.movingY < 0 && movingY > 0)) {
s.isMouseDown = false;
}
}
s.touchEndX = e.localX;
s.touchEndY = e.localY;
s.movingX = movingX;
s.movingY = movingY;
var ts = s.touchStartY;
var te = s.touchEndY;
if (!s.isMouseDown)
return;
var mx = e.localX - s.touchEndX;
var my = e.localY - s.touchEndY;
// s.touchEndX = e.localX;
// s.touchEndY = e.localY;
var ts = my;
var lts = s.movingY;
if (!s.isVertical) {
ts = s.touchStartX;
te = s.touchEndX;
ts = mx;
lts = s.movingX;
}
if (((s.currentPageIndex == 0) && (ts < te)) || ((s.currentPageIndex == s.listLen - 1) && (ts > te))) {
s.view[s.paramXY] += (te - ts) / s.distance * s.fSpeed * 0.6;
if (Math.abs(ts) - Math.abs(lts) < 1) {
s._isBreak = true;
}
trace(Math.abs(ts) - Math.abs(lts));
s.movingX = mx;
s.movingY = my;
if (ts > 0 && s.currentPageIndex == 0) {
s.view[s.paramXY] = ts * 0.3;
}
else if (ts < 0 && (s.currentPageIndex == s.listLen - 1)) {
s.view[s.paramXY] = -s.currentPageIndex * s.distance + ts * 0.3;
}
}
else if (e.type == annie.MouseEvent.MOUSE_UP) {
if (!s.isMouseDown)
return;
s.isMouseDown = false;
s.touchEndX = e.localX;
s.touchEndY = e.localY;
var isNext = true;
var ts = s.touchStartY;
var te = s.touchEndY;
var ts = s.movingY;
if (!s.isVertical) {
ts = s.touchStartX;
te = s.touchEndX;
ts = s.movingX;
}
var distance = Math.abs(ts - te);
if (distance > s.distance * 0.2) {
isNext = ts > te;
var xyValue = 0;
var isNeedSlide = true;
if (isNext) {
if (s.currentPageIndex >= s.listLen - 1) {
xyValue = -s.distance * (s.listLen - 1);
isNeedSlide = false;
}
}
else {
if (s.currentPageIndex <= 0) {
isNeedSlide = false;
}
}
if (isNeedSlide) {
s.slideTo(isNext);
}
else {
var tweenData = {};
tweenData[s.paramXY] = xyValue;
tweenData.ease = annie.Tween.backOut;
annie.Tween.to(s.view, s.slideSpeed * 0.5, tweenData);
if ((s.currentPageIndex == 0 && s.view[s.paramXY] > 0) || (s.currentPageIndex == (s.listLen - 1) && s.view[s.paramXY] < -s.currentPageIndex * s.distance)) {
var tweenData = {};
tweenData[s.paramXY] = -s.currentPageIndex * s.distance;
tweenData.ease = annie.Tween.backOut;
annie.Tween.to(s.view, 0.2, tweenData);
}
else {
if (Math.abs(ts) > 100 && !s._isBreak) {
s.slideTo(ts < 0);
}
}
}
Expand All @@ -755,13 +733,21 @@ var annieUI;
return;
}
if (isNext) {
s.currentPageIndex++;
if (s.currentPageIndex < s.listLen - 1) {
s.currentPageIndex++;
}
else {
return;
}
}
else {
s.currentPageIndex--;
if (s.currentPageIndex > 0) {
s.currentPageIndex--;
}
else {
return;
}
}
if (s.currentPageIndex < 0 || s.currentPageIndex >= s.listLen)
return;
if (!s.pageList[s.currentPageIndex]) {
s.pageList[s.currentPageIndex] = new s.pageClassList[s.currentPageIndex]();
s.pageList[s.currentPageIndex][s.paramXY] = s.currentPageIndex * s.distance;
Expand Down Expand Up @@ -1430,7 +1416,6 @@ var annieUI;
item[s.paramXY] = id * s._itemDis;
id++;
}
trace("flushData");
};
/**
* 设置可见区域，可见区域的坐标始终在本地坐标中0,0点位置
Expand Down
Loading

0 comments on commit c194648

Please sign in to comment.