Skip to content

Commit

Permalink
Merged
Browse files Browse the repository at this point in the history
  • Loading branch information
@NeptunKid
NeptunKid committed Jun 16, 2015
2 parents 85e1e90 + a170e94 commit d41e20c
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 171 deletions.
55 changes: 34 additions & 21 deletions anole.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

var anole = window.anole = {
_currentScene: 0,
_loadFirstFinish: false,
_sceneNameIndexMap: {}, // mapping from scene js name to its index in the scene queue to play.
_playedScene:0,
_nextSceneIndexToPlay:-1, // the scene should play once loaded (added onto anole scene)
Expand All @@ -32,7 +33,7 @@
var nextBtn = this._nextBtn = $(this._config.nextBtnTemplate);
var startBtn = this._startBtn = $(this._config.startBtnTemplate);
$('body').append(prevBtn).append(nextBtn).append(startBtn);
$('body').append($('<audio src = "" controls="controls" autoplay="autoplay">Audio not suppoted</audio>'));
$('body').append($('<audio src="" controls="controls" autoplay="autoplay">Audio not suppoted</audio>'));
prevBtn.on('click', playPrev);
nextBtn.on('click', playNext);
startBtn.on('click', startAnime);
Expand Down Expand Up @@ -93,6 +94,7 @@
if(this._loadedScene < this._config.maxQueueLength){
this._loadScene(this._loadedScene);
}else{
this._loadFirstFinish = true;
this.hideLoading();
}
}
Expand Down Expand Up @@ -152,8 +154,8 @@
}
},
startAnime: function (){
this.canvas.empty();
this.playScene(0);
this.canvas.empty();
this.playScene(0);
},
_loadScene: function (sceneIndex){
console.log("loadScene, index: " + sceneIndex +
Expand Down Expand Up @@ -286,31 +288,42 @@
playScene: function (index){
this._currentScene = index;

console.log("---- PlayScene: " + index);
var scene = this._scene[index];

scene.onInit && scene.onInit();//init scene
$("audio")[0].src = this._config.resoureUrl + "Sound/"+scene.id+".mp3";
if(this._config.autoPlay){ //autoplay
scene.onStart && scene.onStart(function (){
// auto play next scene if config.autoPlay is true
console.log("Autoplay scene.onStart");
this.playNext();
}.bind(this));
}else{
scene.onStart && scene.onStart(function (){});
}

this._loadScene(index + 1);//load next scene when playing current scene
console.log("---- PlayScene: " + index);
var scene = this._scene[index];

scene.onInit && scene.onInit();//init scene
if(typeof scene.id != 'undefined'){
$("audio")[0].src = "./sound/"+scene.id+".mp3";
}

if(this._config.autoPlay){ //autoplay
scene.onStart && scene.onStart(function (){
// auto play next scene if config.autoPlay is true
console.log("Autoplay scene.onStart");
this.playNext();
}.bind(this));
}else{
scene.onStart && scene.onStart(function (){});
}

if(this._loadFirstFinish){
this._loadScene(index + this._config.maxQueueLength);
}else{
this._loadScene(index + 1);//load next scene when playing current scene
}
},
getMusic: function (res){
var music = musicList[res];
if(music){
return music
}
},
playVideo: function (){
//todo
toggleAudioMusic: function (audio){
if(audio.muted){
audio.muted = false;
}else{
audio.muted = true;
}
},
throttle: function(action, delay){
var last = 0;
Expand Down
27 changes: 24 additions & 3 deletions demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,16 +71,37 @@ html, body{
background-color:#000;
opacity:0.5;
position:absolute;
top:100;
left:100;
top:0;
left:0;
z-index: 100;
color: #FFF;
font-size: 72px;
}
.btn{
position: absolute;
width:50px;
height:50px;
border:1px solid #000;
display:inline-block;
}
.sprite{
width:50px;
height:50px;
border:1px solid #F00;
position:absolute;
background-size:100% 100%;
}
.sprite1{
background-image:url(resource/rs1.jpg);
}
.sprite2{
background-image:url(resource/rs2.jpg);
}
.sprite3{
background-image:url(resource/rs3.jpg);
}
.sprite4{
background-image:url(resource/rs4.jpg);
}
.sprite5{
background-image:url(resource/rs5.jpg);
}
6 changes: 4 additions & 2 deletions demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="utf-8">
<meta charset="utf-8">
<script src="require.js" data-main="main.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css"/>
<link rel="stylesheet" type="text/css" href="css/scenes.css?v=0531"/>

</head>
<body>
<input type="button" onclick="anole.startAnime()" value="start">
<input type="button" class="J_Btn" value="toggleMusic">
<div class="mask hidden">loading</div>
</body>
</html>
157 changes: 16 additions & 141 deletions demo.js
View file
Original file line number Diff line number Diff line change
@@ -1,142 +1,32 @@
;require(['anole','js/TweenLite.min'], function (anole){
;require(['anole'], function (anole){
var sceneQueue;
var baseUrl;
var resoureUrl;

var resource = {
"bridge": "bridge.png",
"gate": "gate.png",
"boat": "boat.png",
"oar": "oar.png",
"marco1": "marco1.png",
"marco2": "marco2.png",
"paperman": "paperman.png",
"sub-block": "subway.png",
"sub-left-gate": "subwayl.png",
"sub-right-gate": "subwayr.png",
"replay": "replay.png",
"tag": "tag.png",
"youtube-logo": "youtube-logo.png",
"profile": "profile.png",
"board_video": "board_video.png",
"v0": "v0.png",
"v1": "v1.png",
"v2": "v2.png",
"worry1": "worry1.png",
"worry2": "worry2.png",
"worry3": "worry3.png",
"worry4": "worry4.png",
"bubble_disappear": "bubble_disappear.png",
"marco_nomouth": "marco_nomouth.png",
"mouth": "mouth.png",
"dollar": "dollar.png",
"dollar_big": "dollar_big.png",
"dollar_top": "dollar_top.png",
"dollar_mid": "dollar_mid.png",
"dollar_bottom": "dollar_bottom.png",
"dollar_outer": "dollar_outer.png",
"dollar_outer_big": "dollar_outer_big.png",
"canadian0":"canadian0.png",
"canadian1":"canadian1.png",
"canadian2":"canadian2.png",
"french":"french.mp4",
"map":"map.png",
"mark1":"mark1.png",
"mark2":"mark2.png",
"mark3":"mark3.png",
"mark4":"mark4.png",
"browsertab":"browstab.png",
"w1d":"wifi1_dark.png",
"w1l":"wifi1_light.png",
"w2d":"wifi2_dark.png",
"w2l":"wifi2_light.png",
"w3d":"wifi3_dark.png",
"w3l":"wifi3_light.png",
"glogo":"googlelogowithshadow.png",
"searchbar":"searchbarwithshadow.png",
"progbar":"progressbar.png",
"nexus":"nexuswithshadow.png",
"chn_food":"chn_food.png",
"west_food":"west_food.png",
"lung_tab":"lung_tab.png",
"plate":"plate.png",
"lung_m":"lung_m.png",
"lung_f":"lung_f.png",
"rs1": "rs1.jpg",
"rs2": "rs2.jpg",
"rs3": "rs3.jpg",
"rs4": "rs4.jpg",
"rs5": "rs5.jpg",
"mymusic": "a.mp3"
}

//if(!anole.isMobile()){
sceneQueue = [
{
fileName:'scene1.js',
res: ["bridge","gate","boat","oar","marco1"] //depend resources.
res: ["rs1","rs2","rs3","rs4","rs5","mymusic"] //depend resources.
},
{
fileName:'scene2.js',
res: ["gate","boat","oar","marco1","paperman"]
res: ["rs1","rs2","rs3","rs4","rs5"] //depend resources.
},
{
fileName:'scene3.js',
res: ["marco1","paperman","sub-block","sub-left-gate","sub-right-gate"]
fileName:'scene3.js'
},
{
fileName:'scene4.js',
res: ["marco1","paperman","sub-block","sub-left-gate","sub-right-gate"]
},
{
fileName:'scene5.js',
res: ["marco1","paperman","sub-block","sub-left-gate","sub-right-gate","replay"]
},
{
fileName:'scene6.js',
res: ["marco1","paperman","sub-block","sub-left-gate","sub-right-gate","replay"]
},
{
fileName:'scene7.js',
res: ["profile","youtube-logo","tag","board_video","v0","v1","v2","worry1", "worry2", "worry3", "worry4"]
},
{
fileName:'scene8.js',
res: ["bubble_disappear", "marco_nomouth", "mouth"]
},
{
fileName:'scene9.js',
res: ["dollar", "dollar_big", "dollar_top", "dollar_mid", "dollar_bottom", "dollar_outer", "dollar_outer_big"]
},
{
fileName:'scene11.js',
res: ["canadian0","canadian1","canadian2"]
},
{
fileName: 'scene12.js',
res: ["french"]
},
{
fileName:'scene13.js',
res: ["gate","boat","marco2"]
},
{
fileName:'scene14.js',
res: ["map","mark1","mark2","mark3","mark4"]
},
{
fileName:'scene15.js',
res: ["map"]
},
{
fileName:'scene16.js',
res: ["browsertab","w1d","w1l","w2d","w2l","w3d","w3l","glogo","searchbar","progbar"]
},
{
fileName:'scene17.js',
res: ["browsertab","glogo","searchbar","progbar","nexus"]
},
{
fileName:'scene19.js',
res: ["chn_food","west_food"]
},
{
fileName:'scene20.js',
res: ["lung_f","lung_m","lung_tab","plate"]
fileName:'scene4.js'
}
]
baseUrl = './scene/';
Expand All @@ -148,7 +38,7 @@
baseUrl:baseUrl,// root url
resoureUrl: resoureUrl,// resoure url like jpg/mp3
resource: resource,//resource
maxQueueLength: 1,//TODO load serval scenes at first
maxQueueLength: 2,//TODO load serval scenes at first
sceneQueue: sceneQueue,//anime scene queue
autoPlay: false,//auto play with no event
flipType: 'click',//flip type eg:click, swipe, wheel
Expand All @@ -157,30 +47,15 @@
nextBtnTemplate: '<div class="next-btn btn J_NextBtn">next</div>',//next button dom
showLoading: function (){
$(".mask").show();
console.log("loading resource, show loading message.");
console.log("loading resource, show load dialog");
},
hideLoading: function (){
$(".mask").hide();
console.log("resource loaded, hide loading message.")
console.log("resource loaded, hide load dialog")
},
showError: function (msg){ console.log(msg); }
showError: function (){ console.log("app error !!!! resource error!!!!") }
})

anole.start();
var window_w = document.body.clientWidth;
var scene_w = $(".container").width();
var scene_h = $(".container").height();
var scale = window_w / scene_w + "";
function getSupportedPropertyName() {
var properties = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"];
for (var i = 0; i < properties.length; i++) {
if (typeof document.body.style[properties[i]] != "undefined") {
return properties[i];
}
}
return null;
}
var transformProperty = getSupportedPropertyName();
$(".container").css(transformProperty,"translate3d(-50%,"+((scale-1)*scene_h/2)+"px,0) scale("+scale+","+scale+")");
})
});
});
7 changes: 3 additions & 4 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@
baseUrl: './',
paths: {
'anole': 'anole',
'demo': 'demo',
'hammer': 'hammer',
'demo': 'demo',
'hammer': 'hammer',
'TweenLite': 'tween/TweenLite',
'TweenMax': 'tween/TweenMax',
'Scene': 'scene/SCENE'
'TweenMax': 'tween/TweenMax'
},
shim: {
zepto: {
Expand Down
7 changes: 7 additions & 0 deletions scene/scene1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,13 @@
onStart: function (finish){
console.log("scene1 onStart");

var music = anole.getMusic("mymusic");
music.play();

$(".J_Btn").on('click', function (){
anole.toggleAudioMusic(music);
});

var a = TweenMax.to(this.sp1, 0.5, {delay:0,top:380,onComplete: function (){

}});
Expand Down

0 comments on commit d41e20c

Please sign in to comment.