Vue中如何使用create-keyframe-animation與動畫鉤子完成復(fù)雜動畫

.cd-box
 &.v-enter-active, &.v-leave-active
  transition: all 0.4s
 &.v-enter, &.v-leave-to
  opacity: 0
.mini-player-box
 &.v-enter-active, &.v-leave-active
  transition: all 0.4s 
 &.v-enter, &.v-leave-to
  transform: translate3d(0, 40px, 0)
  opacity: 0

計算偏移量（中心點到中心的偏移,圖中紅線距離)

// 獲得偏移量，以及scale
_getPosAndScale() {
 // 左下角圖片的寬度
  const targetWidth = 40
 // cd寬度
  const width = 300
  const scale = targetWidth / width
  // 這里的 x,y要算，過程省略，無非就是加加減減，這的x，y都是算出來了的
  const x = -167.5
  const y = 497
  return {x ,y , scale}
 },

x,y的數(shù)值代表什么？見圖

這里x為什么是負的，y是正的呢？

因為 瀏覽器的坐標系的中心點是在左上角 的，如圖

那么動畫從 cd中心到左下角，X偏移為負，y偏移為正

然后用animations插件執(zhí)行動畫鉤子

 // enter是指當 cd從隱藏到顯示的動畫，
 enter(el, done) {
  const {x, y, scale} = this._getPosAndScale()

  let animation = {
  // 第0幀的時候，先讓圖片縮小，顯示在右下角
  0: {
   transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`
  },
  // 60%的時候，讓圖片回到cd中心，變大
  60: {
   transform: `translate3d(0 ,0 , 0) scale(1.1)`
  },
  // 變回原來的尺寸，會有一個回彈的效果
  100: {
   transform: `translate3d(0 ,0 , 0) scale(1)`
  }
  }
  // 動畫的一些配置
  animations.registerAnimation({
  name: 'move',
  animation,
  presets: {
   duration: 400,
   easing: 'linear'
  }
  })
//運行動畫
 animations.runAnimation(this.$refs.cdWrapper, 'move', done)
 },
 afterEnter(){
 //運行完動畫之后，注銷掉動畫
  animations.unregisterAnimation('move')
  this.$refs.cdWrapper.style.animation = ''
 },
 // leave是指 cd從顯示到隱藏的動畫
 leave(el, done) {
  this.$refs.cdWrapper.style.transition = 'all 0.4s'
  const {x, y, scale} = this._getPosAndScale()
  // 這里我們只要直接移動變小就可以了
  this.$refs.cdWrapper.style['transform'] = `translate3d(${x}px,${y}px,0) scale(${scale})`
   
 // 監(jiān)聽transitionend 事件在 CSS 完成過渡后觸發(fā)done回調(diào)  
 this.$refs.cdWrapper.addEventListener('transitionend', () => {
  done()
  })
 },
 afterLeave() {
  this.$refs.cdWrapper.style.transition = ''
  this.$refs.cdWrapper.style['transform'] = ''
 }

寫到這里，我們就把剛開始的效果給寫完啦！

但在寫js的keyframe的時候

我們還可以加上rotate，讓動畫效果有一個回彈效果

let animation = {
  0: {
   transform: `translate3d(${x}px, ${y}px, 0) scale(${scale}) rotate(0deg)`
  },
  60: {
   transform: `translate3d(0 ,0 , 0) scale(1.1) rotate(365deg)`
  },
  100: {
   transform: `translate3d(0 ,0 , 0) scale(1) rotate(360deg)`
  }
  }

所有源碼

.index
 background: #eee
 width: 100%
 height: 100%
 display : flex
 flex-direction: column
 justify-content : space-between
 align-items: center
 .cd-box
 display : flex
 justify-content : center
 align-items : center
 width: 300px
 height: 300px
 background: #eee
 border-radius: 50%
 &.v-enter-active, &.v-leave-active
  transition: all 0.4s
 &.v-enter, &.v-leave-to
  opacity: 0
 .bg
  width: 300px
  height: 300px
  border-radius: 50%
 .mini-box
 position: absolute
 bottom: 0
 right: 0
 left: 0
 display : flex 
 align-items center 
 border: 1px solid #555
 width: 100%
 height: 40px
 box-sizing : border-box
 &.v-enter-active, &.v-leave-active
  transition: all 0.4s 
 &.v-enter, &.v-leave-to
  transform: translate3d(0, 40px, 0)
  opacity: 0
 .mini-img
  height: 40px
  width: 40px
  box-sizing : border-box
  img
  height: 100%
  width: 100%

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue中如何使用create-keyframe-animation與動畫鉤子完成復(fù)雜動畫”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!