关于javascript:前端动画框架GSAP框架随笔

gsap 是目前十分风行的前端动画框架，能够十分轻松结构出简单的动画成果，这里仅对我理论应用中的一些例子进行总结

<!– more –>

官网

示例

文章种所应用代码的在线示例

根底用法

// 申明一个滚动控制器
let ctrl = new ScrollMagic.Controller({
  globalSceneOptions:{offset:-200}
})


// MORE+ 
Array.from(document.querySelectorAll(".more")).forEach((el,ix)=>{let moreLink = new TimelineMax();
  moreLink.from(el,{yPercent:300,opacity:0}) // 在 timelineMax 中 from 是指从某种款式过渡到当初的款式
  new ScrollMagic.Scene({triggerElement:document.querySelectorAll("#app div.home")[0].children[ix+3],
    triggerHook:0.35,
    offset:200
  }).setTween(moreLink).addTo(ctrl)
})

// 同时管制两个元素的过渡动画

// 师资简介
init_swiper_teachear(){
  const vue = this
  class SwiperTeacher{
    now = 0
    max = vue.swiperTeacher.length-1
    imgDom = null;
    infosDom = null;
    numListDom = null
    constructor () {vue.$nextTick(()=>{this.getDom()})
    }
    next(){return new Promise(async (resolve) => {if(this.now === this.max) vue.goNext('ADVANTAGE');

        const imgEnd = gsap.to(this.imgDom[this.imgDom.length - 1 -this.now],{xPercent:-100,ease:'power2.out'})
        const infosEnd = gsap.to(this.infosDom[0],{xPercent:(this.now+1) * 100,ease:'power2.out'})

        await imgEnd
        await infosEnd
        this.now+=1
        resolve()})
    }
    pre(){return new Promise(async (resolve) => {if(this.now===0){resolve();return}
        this.now-=1
        const imgEnd = gsap.to(this.imgDom[this.imgDom.length - 1 - this.now],{xPercent:0,ease:'power2.out'})
        const infosEnd = gsap.to(this.infosDom[0],{xPercent:(this.now)*100,ease:'power2.out'})

        await imgEnd
        await infosEnd
        resolve()})
    }
    async go(ix){
      const needGo = ix-this.now
      if(needGo===0) return;
      if(needGo<0){for(let i = 0;i<-needGo;i++){await this.pre()}
      }else{for(let i = 0;i<needGo;i++){await this.next()}
      }
    }
    getDom(){this.imgDom = document.querySelectorAll('.introductionOfTeachers .sliderContent .imgContent .img')
      this.infosDom = document.querySelectorAll('.introductionOfTeachers .sliderContent .infoContent')
      this.numListDom = document.querySelectorAll('.introductionOfTeachers .point-teacher .numList')
    }
  }

  let control =  new SwiperTeacher()
  control = new Proxy(control,{set (target, p, value) {if(p==='now'){control.numListDom.forEach((el,ix)=>{el.classList.remove('active')
          if(ix===value){el.classList.add('active')}
        })
      }
      target[p] = value
      return true
    }
  })
  this.$refs['sliderRight-teacher'].addEventListener('click',async ()=>{await control.next()})
  this.$refs['sliderLeft-teacher'].addEventListener('click',async ()=>{await control.pre()})
  this.$nextTick(()=>{this.$refs['numList-teacher'].forEach((el,ix)=>{el.addEventListener('click',async ()=>{await control.go(ix)})})})
  let randomTeacher = new TimelineMax()
  randomTeacher.from('div.introductionOfTeachers .sliderContent',{
    yPercent:100,
    opacity:0,
    onStart(){vue.swiperTeacher = vue.randomArr(vue.raw_teacher_data,5)
      control.now = 0
    }
  })
  randomTeacher.from('div.introductionOfTeachers .point-teacher',{
    yPercent:100,
    opacity:0
  })
  new ScrollMagic.Scene({triggerElement:'div.introductionOfTeachers',triggerHook:0.35}).setTween(randomTeacher).addTo(ctrl)
}

// 对某个按钮的过渡动画经行解决 通过增加一层元素来经口头画 高阶函数来解决抖动

// 抉择院校和新闻大按钮
init_design_button(){Array.from(document.querySelectorAll('div.selectInstitution .listContent .designButton,div.news .listContent .designButton')).forEach((el,ix)=>{
    class onceFunction{constructor (bg) {
        this.bg = bg
        this.end = false
      }
      main(){
        this.bg.style.backgroundColor = '#e06730'
        this.bg.style.visibility = 'unset'
        gsap.from(this.bg,{scaleX:0}).then(()=>{this.end = true})
      }
      move(){this.main()
        this.move = ()=>{}
      }
      leave(){if(this.end){
          this.bg.style.visibility = 'hidden'
          this.move =()=>{this.main()
            this.move = ()=>{}
          }
        }
      }
    }
    const o = new onceFunction(el.childNodes[0].childNodes[0])
    el.addEventListener('mousemove', ()=>{o.move()})
    el.addEventListener('mouseleave',()=>{o.leave()})
    if(ix===0||ix===3){o.move()
    }
  })
}