使用lottie 模仿san的動畫

時間 2019-11-16

標籤使用 lottie 模仿 san 動畫简体版

原文原文鏈接

在百度前端技術學院學習設計師學院綠(大佬)的課程 (第一課QAQ) 傳送門css

而後模仿san官網的動畫效果 sanhtml

模仿的效果傳送們 pc端食用更佳！前端

大佬的實現已經很棒了我的只讓部分動畫變得平滑jquery

transition: transform .3s;
複製代碼

這樣可讓鼠標移出Div的時候更加平滑git

分界線～～～github

首先貼出資料和大佬的教程web

大概就是這麼寫你們能夠去Google搜教程官方案例很不錯json

首先佈局結構和樣式均可以借鑑san官網利用控制檯(so easy~)gulp

<div class="resource-block">
  <a href="" class="resource-item">
    <div class="resource-item-top resource-item-top-two">
        <div
        id="bm"
        class="bodymovin"
        data-movpath="js/compass.json">
      </div>
    </div>

    <div class="resource-item-bottom">
      <h5>教程</h5>
      <p>教程是入門的捷徑，請從這裏開始瞭解San</p>
    </div>
  </a>
</div>
複製代碼

這是結構具體樣式能夠查看個人github文件傳送門canvas

而後就是js 控制動畫效果了

引入jquery (方便～)

在github上的build/player獲取最新版本的lottie.js文件或者從AE的插件導出
在HTML引入文件

<script src="js/lottie.js"></script>
複製代碼

調用lottie.loadAnimation()啓動一個動畫。將一個對象做爲參數

var animData = {
  container: bodymovinLayer,
  renderer: 'svg',
  prerender: true,
  loop: false,
  autoplay: false,
  path: bodymovinLayer.getAttribute('data-movpath')
}

# animData 導出的動畫數據的Object
# container 渲染動畫的dom元素
# renderer 'svg'/'canvas'/'html'來設置渲染器
# prerender 這個根據英文應該是預渲染
# loop 是否循環播放
# autoplay 是否自動播放
# path 路徑


複製代碼

while循環綁定事件將上面封裝進一個方法

setBodymovin = function (cards, len) {
  while (len--) {
    var bodymovinLayer = cards[len].getElementsByClassName('bodymovin')[0]

    var animData = {
      container: bodymovinLayer,
      renderer: 'svg',
      prerender: true,
      loop: false,
      autoplay: false,
      path: bodymovinLayer.getAttribute('data-movpath')
    }

    anim = lottie.loadAnimation(animData);

    (function (anim) {
      var card = cards[len]

      $(card).on('mouseenter', function () {
        anim.play()
      })

      $(card).on('mouseleave', function (e) {
        anim.stop()
      })
    })(anim)

  }

}
複製代碼

最後獲取元素調用

var resourceCards = document.querySelectorAll('.resource-block')
var facilityCards = document.querySelectorAll('.facility-block')
var len = resourceCards.length

setBodymovin(resourceCards, len)
setBodymovin(facilityCards, len)

複製代碼

最後貼 gulp 任務

const gulp = require('gulp')
const connect = require('gulp-connect')

gulp.task('connect', function(){
  connect.server({
    root: 'app',
    port: 8000,
    livereload: true
  })
})

gulp.task('html', function(){
  gulp.src('./app/*.html')
    .pipe(connect.reload())
})

gulp.task('css', function(){
  gulp.src('./app/css/*.css')
    .pipe(connect.reload())
})

gulp.task('watch', function () {
  gulp.watch(['./app/*.html'], ['html'])
  gulp.watch(['./app/css/*.css'], ['css'])
})

gulp.task('default', ['connect','watch'])
複製代碼