日曆翻頁動態效果

 

AnimationAltas.as
package game.calendar.widget
{

import laya.display.Animation;
	import laya.display.Stage;
	import laya.maths.Rectangle;
	import laya.net.Loader;
	import laya.utils.Browser;
	import laya.utils.Handler;
	import laya.webgl.WebGL;
	import game.constant.MyConstant;
	import laya.events.Event;
	import game.logger.LogUtil;
	import game.calendar.widget.McB;
	import laya.ui.Box;
	import laya.ui.Button;
	import game.calendar.NumTool;
	import laya.media.SoundManager;

	public class AnimationAltas {
		private var year:Number = NumTool.year;
		private var ani:Animation;
		private const AniConfPath:String = MyConstant.getAssetsRoot() + "res/atlas/game2204ani.atlas";
		// 文本框，月份和日期
		private var sp_b:McB;

		// 起始位置月份和日期
		private var beginMonth:Number = 1;
		private var beginDate:Number = 1;
		// 終止時間，月份和日期
		private var endMonth:Number = 1;
		private var endDate:Number = 1;

		// 翻轉的日期值
		private var currenMonth:Number = 1;
		private var currenDate:Number = 1;
		
		// 開始時間
		private var date:Date;
		
		public var box_a:Box;//翻轉結束顯示box_a
		public var box_donext:Box;//正在翻轉日曆，顯示繼續經營頁面，box_donext

		public function AnimationAltas() {
			// 不支持WebGL時自動切換至Canvas
			Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);

			Laya.stage.alignV = Stage.ALIGN_MIDDLE;
			Laya.stage.alignH = Stage.ALIGN_CENTER;

			Laya.stage.scaleMode = "showall";
			Laya.stage.bgColor = "#232628";

			Laya.loader.load(AniConfPath, Handler.create(this, createAnimation), null, Loader.ATLAS);
		}


		/**
		 * 播放動畫
		 */
		public function playFlip(box_a:Box,box_donext:Box,oM:Number, oD:Number,m:Number, d:Number):void {
			this.box_a = box_a;			
			this.box_donext = box_donext;			
			this.beginMonth = oM;
			this.beginDate = oD;
			this.endMonth = m;
			this.endDate = d;

			// 格式化當前時間(0-11 代表1到12月)
			date = new Date(year, beginMonth - 1, beginDate);

			sp_b.label1.text = "" + beginDate;
			sp_b.label2.text = beginMonth + "月";

			currenMonth = beginMonth;
			currenDate = beginDate;

			if(endMonth == 1 && endDate == 1){
				hiddenCalendar();
			}else{
				showCalendar();
				ani.play();
			}
		}

		public function hiddenCalendar():void {
			ani.visible = false;
			this.box_a.visible = true;
			this.box_donext.visible = false;
			sp_b.visible = false;
			// SoundManager.destroySound(MyConstant.SOUNDS_CALENDER);
		}
		public function showCalendar():void {
			ani.visible = true;
			this.box_a.visible = false;
			this.box_donext.visible = true;
			sp_b.visible = true;
		}

		// 隱藏日曆動畫
		public function hiddenAni():void {
			ani.visible = false;
			sp_b.visible = false;
		}
		
		private function createAnimation(_e:*=null):void {
			ani = new Animation();
			ani.loadAtlas(AniConfPath);			// 加載圖集動畫
			ani.interval = 8;					// 設置播放間隔（單位：毫秒）
			ani.index = 0;						// 當前播放索引
			// ani.play();						// 播放圖集動畫
			
			// 獲取動畫的邊界信息
			var bounds:Rectangle = ani.getGraphicBounds();
			ani.pivot(bounds.width / 2, bounds.height / 2);
			
			ani.pos(286, 340);
			Laya.stage.addChild(ani);
			// 顯示月份和天數
			sp_b = new McB();
			sp_b.label2.text = beginMonth + "月";
			sp_b.label1.text = "" + beginDate;
			Laya.stage.addChild(sp_b);
			setListener();
		}

		public function setListener():void{
			// 	動畫播放完畢後調度。
			ani.on(Event.COMPLETE, this, function (e:Event):void {
				
				//時間增加天數操作
				operationDate();

				// 翻一頁一次聲音
				SoundManager.playSound(MyConstant.SOUNDS_CALENDER);
				
				if(currenMonth == endMonth && currenDate == endDate){
					ani.stop();
					Laya.timer.once(380,this,hiddenCalendar);
				}
			}
		}
		// 時間格式化操作等
		private function operationDate():void{
			// 增加一天
			var time:int = date.getTime() + 1*24*3600*1000;
			//格式化
			var mDate:Date = new Date(time);
			date = mDate;
			currenMonth = mDate.getMonth() + 1;
			currenDate = mDate.getDate();
			sp_b.label2.text = currenMonth + "月";
			sp_b.label1.text = currenDate + "";
		}
 
		
	}
}




McB.as
package game.calendar.widget
{
	import laya.display.Sprite;
	import laya.ui.Label;
	import laya.ui.Clip;
	import game.constant.MyConstant;
	import laya.ui.Image;

	/**
	 * 日曆的月份日期
	 * @author
	 */
	public class McB extends Sprite{
		public var label1:Label;//日期
		public var label2:Label; //月份

		public function McB(){
			// Sprite寬高默認爲0，並且不會隨着繪製內容的變化而變化，如果想根據繪製內容獲取寬高，可以設置本屬性爲true
			this.autoSize = true;

			label2 = new Label();
			// label2.font = "Microsoft YaHei";
			label2.bold = true;
			label2.fontSize = 28;
			label2.color="#000000";
			label2.align = "center";
			label2.valign = "middle";
			label2.wordWrap = false;
			label2.mouseEnabled = false;
			label2.overflow = "hidden";
			label2.rotation = -25;
			label2.x = 266;
			label2.y = 370;
			label2.width = 80;
			label2.height = 50;
			this.addChild(label2);

			label1 = new Label();
			label1.bold = true;
			label1.fontSize = 60;
			label1.color="#ff6060";
			label1.align = "center";
			label1.valign = "middle";
			label1.wordWrap = false;
			label1.mouseEnabled = false;
			label1.overflow = "hidden";
			label1.rotation = -25;
			label1.x = 292;
			label1.y = 416;
			label1.width = 80;
			label1.height = 50;
			this.addChild(label1);

		}
	}

}

資源請私信；