app.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. var FlexibleScreen, Main_Page, Main_Page_Lock, Tuto_Page, all, appPlay, blockEvent, c, cateArr, cateBg_hide, cateBg_show, firstSetting, fisrt_ani, i, indicator_Fn, j, k, l, len, len1, loadInterval, motion_Fn, pArr, ref, screenLanding, t, titleAni, titleArr, tutoArr, vinylc_loading;
  2. Framer.Extras.Hints.disable();
  3. Framer.Extras.Preloader.disable();
  4. Screen.backgroundColor = "white";
  5. FlexibleScreen = require("FlexibleScreen").FlexibleScreen;
  6. blockEvent = new Layer({
  7. size: Screen.size,
  8. backgroundColor: "",
  9. visible: false
  10. });
  11. blockEvent.onTap(function() {});
  12. all = new FlexibleScreen({
  13. backgroundColor: "white",
  14. width: 1242,
  15. height: 2208,
  16. _blockEvent: blockEvent,
  17. shadowSetting: false
  18. });
  19. Main_Page = new PageComponent({
  20. parent: all,
  21. size: all.size,
  22. scrollVertical: false
  23. });
  24. Main_Page.content.draggable.overdrag = false;
  25. Tuto_Page = new PageComponent({
  26. size: all.size,
  27. scrollVertical: false
  28. });
  29. Tuto_Page.content.draggable.overdrag = false;
  30. Main_Page.addPage(Title);
  31. Main_Page.addPage(Tuto_Page);
  32. tutoArr = [tutoTxt0, tutoTxt1, tutoTxt2, tutoTxt3];
  33. pArr = [];
  34. for (i = j = 0, ref = tutoArr.length; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
  35. pArr.push(new Layer({
  36. name: "pArr" + i,
  37. size: all.size,
  38. backgroundColor: ""
  39. }));
  40. Tuto_Page.addPage(pArr[i]);
  41. tutoArr[i].props = {
  42. midX: all.width / 2,
  43. y: 1717,
  44. parent: pArr[i]
  45. };
  46. }
  47. indicator.props = {
  48. parent: Tuto_Page,
  49. midX: all.width / 2,
  50. y: 2069
  51. };
  52. indicator_Fn = function(num) {
  53. var k, ref1, results;
  54. results = [];
  55. for (i = k = 0, ref1 = tutoArr.length; 0 <= ref1 ? k <= ref1 : k >= ref1; i = 0 <= ref1 ? ++k : --k) {
  56. if (i === num) {
  57. results.push(indicator.children[i].opacity = cateIndi.children[i].opacity = 1);
  58. } else {
  59. if (i < indicator.children.length) {
  60. indicator.children[i].opacity = 0.3;
  61. }
  62. if (i < cateIndi.children.length) {
  63. results.push(cateIndi.children[i].opacity = 0);
  64. } else {
  65. results.push(void 0);
  66. }
  67. }
  68. }
  69. return results;
  70. };
  71. indicator_Fn(0);
  72. skip.parent = Tuto_Page;
  73. phone.parent = Tuto_Page;
  74. bt_arrow.style.cursor = "pointer";
  75. bt_arrow.onTap(function() {
  76. return Main_Page.snapToPage(Tuto_Page);
  77. });
  78. skip.onTap(function() {
  79. return window.HybridApp.onClickSkip();
  80. });
  81. Main_Page_Lock = false;
  82. Main_Page.on("change:currentPage", function() {
  83. if (this.currentPage === Tuto_Page && !Main_Page_Lock) {
  84. Utils.delay(.5, function() {
  85. return Main_Page_Lock = true;
  86. });
  87. motion_Fn(0, true);
  88. screenLanding();
  89. }
  90. if (this.currentPage === Tuto_Page) {
  91. this.scrollHorizontal = false;
  92. if (Tuto_Page.currentPage === pArr[pArr.length - 1]) {
  93. return this.scrollHorizontal = true;
  94. }
  95. } else {
  96. return this.scrollHorizontal = true;
  97. }
  98. });
  99. Main_Page.content.on("change:x", function() {
  100. if (Main_Page_Lock) {
  101. if (this.x > -all.width) {
  102. return this.x = -all.width;
  103. }
  104. }
  105. });
  106. Main_Page.content.onAnimationEnd(function() {
  107. if (Utils.round(this.x) === -all.width * 2) {
  108. return Tuto_Page.snapToPage(pArr[pArr.length - 1], false);
  109. }
  110. });
  111. cateBg.parent = Tuto_Page;
  112. cateBg.opacity = 0;
  113. cateArr = [cate0, cate1, cate2, cate3];
  114. for (i = k = 0, len = cateArr.length; k < len; i = ++k) {
  115. c = cateArr[i];
  116. if (i > 0) {
  117. c.props = {
  118. parent: cateBg,
  119. midX: cate0.midX,
  120. y: cate0.y,
  121. opacity: 0
  122. };
  123. }
  124. }
  125. cateBg_show = function(num) {
  126. var l, len1;
  127. for (i = l = 0, len1 = cateArr.length; l < len1; i = ++l) {
  128. c = cateArr[i];
  129. if (i === num) {
  130. c.opacity = 1;
  131. } else {
  132. c.opacity = 0;
  133. }
  134. }
  135. cateBg.animateStop();
  136. cateBg.scale = 0;
  137. cateBg.opacity = 1;
  138. if (num === 3) {
  139. cateBg.y = 740;
  140. } else {
  141. cateBg.y = 463;
  142. }
  143. return cateBg.animate({
  144. scale: 1,
  145. options: {
  146. curve: Spring({
  147. damping: .5
  148. }),
  149. time: .7
  150. }
  151. });
  152. };
  153. cateBg_hide = function() {
  154. cateBg.animateStop();
  155. return cateBg.animate({
  156. properties: {
  157. opacity: 0
  158. },
  159. time: .2
  160. });
  161. };
  162. Tuto_Page.on("change:currentPage", function() {
  163. var num;
  164. num = this.horizontalPageIndex(this.currentPage);
  165. indicator_Fn(num);
  166. cateBg_hide();
  167. TweenMax.killDelayedCallsTo(cateBg_show);
  168. return motion_Fn(num);
  169. });
  170. Tuto_Page.content.on("change:x", function() {
  171. if (Utils.round(this.x) <= -all.width * (pArr.length - 1)) {
  172. return Main_Page.scrollHorizontal = true;
  173. } else {
  174. return Main_Page.scrollHorizontal = false;
  175. }
  176. });
  177. screenLanding = function() {
  178. var FF;
  179. FF = function() {
  180. contentImg.animate({
  181. properties: {
  182. y: 180
  183. },
  184. curve: Bezier(0.4, 0, 0.2, 1),
  185. time: .5
  186. });
  187. topArea.animate({
  188. properties: {
  189. y: -40
  190. },
  191. curve: Bezier(0.4, 0, 0.2, 1),
  192. time: .5
  193. });
  194. return TweenMax.delayedCall(.15, cateBg_show, [0]);
  195. };
  196. TweenMax.to(topArea, 1, {
  197. y: 63,
  198. ease: Quint.easeOut,
  199. delay: .5
  200. });
  201. TweenMax.to(contentImg, 1, {
  202. y: 679,
  203. ease: Quint.easeOut,
  204. delay: .5,
  205. onComplete: FF
  206. });
  207. TweenMax.to(cateIndi, 1, {
  208. opacity: 1,
  209. ease: Quint.easeOut,
  210. delay: .5
  211. });
  212. TweenMax.to(icon, 1, {
  213. opacity: 1,
  214. ease: Quint.easeOut,
  215. delay: .5
  216. });
  217. TweenMax.to(txt0, 1, {
  218. y: 9,
  219. ease: Quint.easeOut,
  220. delay: .5
  221. });
  222. TweenMax.to(txt1, 1, {
  223. y: 9,
  224. ease: Quint.easeOut,
  225. delay: .5
  226. });
  227. return icon.animate({
  228. properties: {
  229. rotation: 60
  230. },
  231. curve: Bezier.linear,
  232. time: 3
  233. });
  234. };
  235. motion_Fn = function(num, first) {
  236. if (first === void 0) {
  237. first = false;
  238. }
  239. if (num === 0) {
  240. if (first === false) {
  241. TweenMax.delayedCall(.5, cateBg_show, [0]);
  242. }
  243. return Dummy.animate({
  244. properties: {
  245. y: 0
  246. },
  247. curve: "spring(500,50,0)"
  248. });
  249. } else {
  250. TweenMax.delayedCall(.5, cateBg_show, [num]);
  251. if (num === pArr.length - 1) {
  252. return Dummy.animate({
  253. properties: {
  254. y: -1970 - 180
  255. },
  256. curve: "spring(500,50,0)"
  257. });
  258. } else {
  259. return Dummy.animate({
  260. properties: {
  261. y: -810 * num
  262. },
  263. curve: "spring(500,50,0)"
  264. });
  265. }
  266. }
  267. };
  268. contentImg.on("change:y", function() {
  269. return infoArea.y = Utils.modulate(this.y, [679, 679 - 478], [139, 139 - 478], true);
  270. });
  271. firstSetting = function() {
  272. topArea.y = -40;
  273. contentImg.y = 1139;
  274. cateIndi.opacity = icon.opacity = 0;
  275. txt0.y = txt0.parent.height;
  276. txt1.y = txt1.parent.height;
  277. return bt_arrow.opacity = 0;
  278. };
  279. logo.opacity = 0;
  280. titleArr = [title0, title1, title2];
  281. for (l = 0, len1 = titleArr.length; l < len1; l++) {
  282. t = titleArr[l];
  283. t.dy = t.y;
  284. t.y = t.parent.height;
  285. }
  286. titleAni = function() {
  287. var len2, m, results;
  288. logo.animate({
  289. properties: {
  290. opacity: 1
  291. },
  292. curve: Bezier.ease,
  293. time: .5
  294. });
  295. bt_arrow.animate({
  296. properties: {
  297. opacity: 1
  298. },
  299. curve: Bezier.ease,
  300. time: .5
  301. });
  302. results = [];
  303. for (i = m = 0, len2 = titleArr.length; m < len2; i = ++m) {
  304. t = titleArr[i];
  305. results.push(t.animate({
  306. y: t.dy,
  307. options: {
  308. curve: Bezier(0, 0, 0, 1),
  309. time: 1,
  310. delay: .5 + i * .15
  311. }
  312. }));
  313. }
  314. return results;
  315. };
  316. fisrt_ani = function() {
  317. return titleAni();
  318. };
  319. firstSetting();
  320. appPlay = function() {
  321. switch (document.readyState) {
  322. case 'loading':
  323. break;
  324. case 'interactive':
  325. break;
  326. case 'complete':
  327. clearInterval(loadInterval);
  328. return Utils.delay(0.5, function() {
  329. return fisrt_ani();
  330. });
  331. }
  332. };
  333. loadInterval = Utils.interval(0.1, function() {
  334. return appPlay();
  335. });