| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384 |
- 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;
- Framer.Extras.Hints.disable();
- Framer.Extras.Preloader.disable();
- Screen.backgroundColor = "white";
- FlexibleScreen = require("FlexibleScreen").FlexibleScreen;
- blockEvent = new Layer({
- size: Screen.size,
- backgroundColor: "",
- visible: false
- });
- blockEvent.onTap(function() {});
- all = new FlexibleScreen({
- backgroundColor: "white",
- width: 1242,
- height: 2208,
- _blockEvent: blockEvent,
- shadowSetting: false
- });
- Main_Page = new PageComponent({
- parent: all,
- size: all.size,
- scrollVertical: false
- });
- Main_Page.content.draggable.overdrag = false;
- Tuto_Page = new PageComponent({
- size: all.size,
- scrollVertical: false
- });
- Tuto_Page.content.draggable.overdrag = false;
- Main_Page.addPage(Title);
- Main_Page.addPage(Tuto_Page);
- tutoArr = [tutoTxt0, tutoTxt1, tutoTxt2, tutoTxt3];
- pArr = [];
- for (i = j = 0, ref = tutoArr.length; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
- pArr.push(new Layer({
- name: "pArr" + i,
- size: all.size,
- backgroundColor: ""
- }));
- Tuto_Page.addPage(pArr[i]);
- tutoArr[i].props = {
- midX: all.width / 2,
- y: 1717,
- parent: pArr[i]
- };
- }
- indicator.props = {
- parent: Tuto_Page,
- midX: all.width / 2,
- y: 2069
- };
- indicator_Fn = function(num) {
- var k, ref1, results;
- results = [];
- for (i = k = 0, ref1 = tutoArr.length; 0 <= ref1 ? k <= ref1 : k >= ref1; i = 0 <= ref1 ? ++k : --k) {
- if (i === num) {
- results.push(indicator.children[i].opacity = cateIndi.children[i].opacity = 1);
- } else {
- if (i < indicator.children.length) {
- indicator.children[i].opacity = 0.3;
- }
- if (i < cateIndi.children.length) {
- results.push(cateIndi.children[i].opacity = 0);
- } else {
- results.push(void 0);
- }
- }
- }
- return results;
- };
- indicator_Fn(0);
- skip.parent = Tuto_Page;
- phone.parent = Tuto_Page;
- bt_arrow.style.cursor = "pointer";
- bt_arrow.onTap(function() {
- return Main_Page.snapToPage(Tuto_Page);
- });
- skip.onTap(function() {
- return window.HybridApp.onClickSkip();
- });
- Main_Page_Lock = false;
- Main_Page.on("change:currentPage", function() {
- if (this.currentPage === Tuto_Page && !Main_Page_Lock) {
- Utils.delay(.5, function() {
- return Main_Page_Lock = true;
- });
- motion_Fn(0, true);
- screenLanding();
- }
- if (this.currentPage === Tuto_Page) {
- this.scrollHorizontal = false;
- if (Tuto_Page.currentPage === pArr[pArr.length - 1]) {
- return this.scrollHorizontal = true;
- }
- } else {
- return this.scrollHorizontal = true;
- }
- });
- Main_Page.content.on("change:x", function() {
- if (Main_Page_Lock) {
- if (this.x > -all.width) {
- return this.x = -all.width;
- }
- }
- });
- Main_Page.content.onAnimationEnd(function() {
- if (Utils.round(this.x) === -all.width * 2) {
- return Tuto_Page.snapToPage(pArr[pArr.length - 1], false);
- }
- });
- cateBg.parent = Tuto_Page;
- cateBg.opacity = 0;
- cateArr = [cate0, cate1, cate2, cate3];
- for (i = k = 0, len = cateArr.length; k < len; i = ++k) {
- c = cateArr[i];
- if (i > 0) {
- c.props = {
- parent: cateBg,
- midX: cate0.midX,
- y: cate0.y,
- opacity: 0
- };
- }
- }
- cateBg_show = function(num) {
- var l, len1;
- for (i = l = 0, len1 = cateArr.length; l < len1; i = ++l) {
- c = cateArr[i];
- if (i === num) {
- c.opacity = 1;
- } else {
- c.opacity = 0;
- }
- }
- cateBg.animateStop();
- cateBg.scale = 0;
- cateBg.opacity = 1;
- if (num === 3) {
- cateBg.y = 740;
- } else {
- cateBg.y = 463;
- }
- return cateBg.animate({
- scale: 1,
- options: {
- curve: Spring({
- damping: .5
- }),
- time: .7
- }
- });
- };
- cateBg_hide = function() {
- cateBg.animateStop();
- return cateBg.animate({
- properties: {
- opacity: 0
- },
- time: .2
- });
- };
- Tuto_Page.on("change:currentPage", function() {
- var num;
- num = this.horizontalPageIndex(this.currentPage);
- indicator_Fn(num);
- cateBg_hide();
- TweenMax.killDelayedCallsTo(cateBg_show);
- return motion_Fn(num);
- });
- Tuto_Page.content.on("change:x", function() {
- if (Utils.round(this.x) <= -all.width * (pArr.length - 1)) {
- return Main_Page.scrollHorizontal = true;
- } else {
- return Main_Page.scrollHorizontal = false;
- }
- });
- screenLanding = function() {
- var FF;
- FF = function() {
- contentImg.animate({
- properties: {
- y: 180
- },
- curve: Bezier(0.4, 0, 0.2, 1),
- time: .5
- });
- topArea.animate({
- properties: {
- y: -40
- },
- curve: Bezier(0.4, 0, 0.2, 1),
- time: .5
- });
- return TweenMax.delayedCall(.15, cateBg_show, [0]);
- };
- TweenMax.to(topArea, 1, {
- y: 63,
- ease: Quint.easeOut,
- delay: .5
- });
- TweenMax.to(contentImg, 1, {
- y: 679,
- ease: Quint.easeOut,
- delay: .5,
- onComplete: FF
- });
- TweenMax.to(cateIndi, 1, {
- opacity: 1,
- ease: Quint.easeOut,
- delay: .5
- });
- TweenMax.to(icon, 1, {
- opacity: 1,
- ease: Quint.easeOut,
- delay: .5
- });
- TweenMax.to(txt0, 1, {
- y: 9,
- ease: Quint.easeOut,
- delay: .5
- });
- TweenMax.to(txt1, 1, {
- y: 9,
- ease: Quint.easeOut,
- delay: .5
- });
- return icon.animate({
- properties: {
- rotation: 60
- },
- curve: Bezier.linear,
- time: 3
- });
- };
- motion_Fn = function(num, first) {
- if (first === void 0) {
- first = false;
- }
- if (num === 0) {
- if (first === false) {
- TweenMax.delayedCall(.5, cateBg_show, [0]);
- }
- return Dummy.animate({
- properties: {
- y: 0
- },
- curve: "spring(500,50,0)"
- });
- } else {
- TweenMax.delayedCall(.5, cateBg_show, [num]);
- if (num === pArr.length - 1) {
- return Dummy.animate({
- properties: {
- y: -1970 - 180
- },
- curve: "spring(500,50,0)"
- });
- } else {
- return Dummy.animate({
- properties: {
- y: -810 * num
- },
- curve: "spring(500,50,0)"
- });
- }
- }
- };
- contentImg.on("change:y", function() {
- return infoArea.y = Utils.modulate(this.y, [679, 679 - 478], [139, 139 - 478], true);
- });
- firstSetting = function() {
- topArea.y = -40;
- contentImg.y = 1139;
- cateIndi.opacity = icon.opacity = 0;
- txt0.y = txt0.parent.height;
- txt1.y = txt1.parent.height;
- return bt_arrow.opacity = 0;
- };
- logo.opacity = 0;
- titleArr = [title0, title1, title2];
- for (l = 0, len1 = titleArr.length; l < len1; l++) {
- t = titleArr[l];
- t.dy = t.y;
- t.y = t.parent.height;
- }
- titleAni = function() {
- var len2, m, results;
- logo.animate({
- properties: {
- opacity: 1
- },
- curve: Bezier.ease,
- time: .5
- });
- bt_arrow.animate({
- properties: {
- opacity: 1
- },
- curve: Bezier.ease,
- time: .5
- });
- results = [];
- for (i = m = 0, len2 = titleArr.length; m < len2; i = ++m) {
- t = titleArr[i];
- results.push(t.animate({
- y: t.dy,
- options: {
- curve: Bezier(0, 0, 0, 1),
- time: 1,
- delay: .5 + i * .15
- }
- }));
- }
- return results;
- };
- fisrt_ani = function() {
- return titleAni();
- };
- firstSetting();
- appPlay = function() {
- switch (document.readyState) {
- case 'loading':
- break;
- case 'interactive':
- break;
- case 'complete':
- clearInterval(loadInterval);
- return Utils.delay(0.5, function() {
- return fisrt_ani();
- });
- }
- };
- loadInterval = Utils.interval(0.1, function() {
- return appPlay();
- });
|