`; this.DOM.el.insertBefore(this.DOM.svg, this.DOM.nav); this.DOM.shape = this.DOM.svg.querySelector('path'); } updateFrame() { this.paths.initial = this.calculatePath('initial'); this.paths.final = this.calculatePath('final'); this.DOM.svg.setAttribute('viewbox',`0 0 ${this.rect.width} ${this.rect.height}`); this.DOM.shape.setAttribute('d', this.paths.initial); } calculatePath(path = 'initial') { if ( path === 'initial' ) { return `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M 0,0 ${this.rect.width},0 ${this.rect.width},${this.rect.height} 0,${this.rect.height} Z`; } else { return { step1: `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M ${this.frameSize},${this.frameSize} ${this.rect.width},0 ${this.rect.width},${this.rect.height} 0,${this.rect.height} Z`, step2: `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M ${this.frameSize},${this.frameSize} ${this.rect.width-this.frameSize},${this.frameSize} ${this.rect.width},${this.rect.height} 0,${this.rect.height} Z`, step3: `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M ${this.frameSize},${this.frameSize} ${this.rect.width-this.frameSize},${this.frameSize} ${this.rect.width-this.frameSize},${this.rect.height-this.frameSize} 0,${this.rect.height} Z`, step4: `M 0,0 0,${this.rect.height} ${this.rect.width},${this.rect.height} ${this.rect.width},0 0,0 Z M ${this.frameSize},${this.frameSize} ${this.rect.width-this.frameSize},${this.frameSize} ${this.rect.width-this.frameSize},${this.rect.height-this.frameSize} ${this.frameSize},${this.rect.height-this.frameSize} Z` } } } initEvents() { this.DOM.nextCtrl.addEventListener('click', () => this.navigate('next')); this.DOM.prevCtrl.addEventListener('click', () => this.navigate('prev')); window.addEventListener('resize', debounce(() => { this.rect = this.DOM.el.getBoundingClientRect(); this.updateFrame(); }, 20)); } navigate(dir = 'next') { if ( this.isAnimating ) return false; this.isAnimating = true; const animateShapeInTimeline = anime.timeline({ duration: this.settings.animation.shape.duration, easing: this.settings.animation.shape.easing.in }); animateShapeInTimeline .add({ targets: this.DOM.shape, d: this.paths.final.step1 }) .add({ targets: this.DOM.shape, d: this.paths.final.step2, offset: `-=${this.settings.animation.shape.duration*.5}` }) .add({ targets: this.DOM.shape, d: this.paths.final.step3, offset: `-=${this.settings.animation.shape.duration*.5}` }) .add({ targets: this.DOM.shape, d: this.paths.final.step4, offset: `-=${this.settings.animation.shape.duration*.5}` }); const animateSlides = () => { return new Promise((resolve, reject) => { const currentSlide = this.DOM.slides[this.current]; anime({ targets: currentSlide, duration: this.settings.animation.slides.duration, easing: this.settings.animation.slides.easing, translateX: dir === 'next' ? -1*this.rect.width : this.rect.width, complete: () => { currentSlide.classList.remove('slide--current'); resolve(); } }); this.current = dir === 'next' ? this.current < this.slidesTotal-1 ? this.current + 1 : 0 : this.current > 0 ? this.current - 1 : this.slidesTotal-1; const newSlide = this.DOM.slides[this.current]; newSlide.classList.add('slide--current'); anime({ targets: newSlide, duration: this.settings.animation.slides.duration, easing: this.settings.animation.slides.easing, translateX: [dir === 'next' ? this.rect.width : -1*this.rect.width,0] }); const newSlideImg = newSlide.querySelector('#id_77b904de79f577fee9618eff .slide__img'); anime.remove(newSlideImg); anime({ targets: newSlideImg, duration: this.settings.animation.slides.duration*4, easing: this.settings.animation.slides.easing, translateX: [dir === 'next' ? 200 : -200, 0] }); anime({ targets: [newSlide.querySelector('#id_77b904de79f577fee9618eff .slide__title'), newSlide.querySelector('#id_77b904de79f577fee9618eff .slide__desc'), newSlide.querySelector('#id_77b904de79f577fee9618eff .slide__link')], duration: this.settings.animation.slides.duration*2, easing: this.settings.animation.slides.easing, delay: (t,i) => i*100+100, translateX: [dir === 'next' ? 300 : -300,0], opacity: [0,1] }); }); }; const animateShapeOut = () => { const animateShapeOutTimeline = anime.timeline({ duration: this.settings.animation.shape.duration, easing: this.settings.animation.shape.easing.out }); animateShapeOutTimeline .add({ targets: this.DOM.shape, d: this.paths.final.step3 }) .add({ targets: this.DOM.shape, d: this.paths.final.step2, offset: `-=${this.settings.animation.shape.duration*.5}` }) .add({ targets: this.DOM.shape, d: this.paths.final.step1, offset: `-=${this.settings.animation.shape.duration*.5}` }) .add({ targets: this.DOM.shape, d: this.paths.initial, offset: `-=${this.settings.animation.shape.duration*.5}`, complete: () => this.isAnimating = false }); } animateShapeInTimeline.finished.then(animateSlides).then(animateShapeOut); } }; new Slideshow(document.querySelector('#id_77b904de79f577fee9618eff .slideshow')); imagesLoaded('#id_77b904de79f577fee9618eff .slide__img', { background: true }, () => document.body.classList.remove('b_loading')); });
基礎概述
  • 主題團建全稱指企業定制的主題性團隊建設項目.是上海巡洋艦在常規團隊建設項目的基礎上融合和升級并吸收綜藝及其他的團隊建設形式而融合所成.主題式團建體驗其比常規的團隊建設項目具有更強的主題關聯度和趣味性,并且其具有更高的參與度和深的體驗度.主題式團隊建設自推出以來受到了眾多500強企業和外資公司的青睞并得到了一致的體驗好評.
  • 部分主題
    奔跑團隊

    引爆團隊正能量

    狹路相逢

    享受與伙伴一起沖鋒的豪邁

    夢想之屋

    用行動與團隊一起見證夢想的力量

    夢想起航

    吹響我們共同的夢想集結號

    極流競速

    風馳電掣的追逐我們對勝利的渴望

    奔跑團隊

    引爆團隊正能量

    花絮剪影
    山东十一选五开奖直播