使用lottie 模仿san的动画

在百度前端技术学院学习设计师学院绿(大佬)的课程 (第一课QAQ) 传送门

然后模仿san官网的动画效果 san

模仿的效果传送们 pc端食用更佳！

大佬的实现已经很棒了个人只让部分动画变得平滑

transition: transform .3s;
复制代码

这样可以让鼠标移出Div的时候更加平滑

分界线～～～

首先贴出资料和大佬的教程

ife.baidu.com/course/deta…
zhuanlan.zhihu.com/uxelement
baidu.github.io/san/
github.com/airbnb/lott…
codepen.io/airnan/proj…
www.youtube.com/watch?v=5XM…
......

大概就是这么写大家可以去Google搜教程官方案例很不错

首先布局结构和样式都可以借鉴san官网利用控制台(so easy~)

<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文件传送门

然后就是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'])
复制代码

具体代码见github源码，大佬多给给意见哦～～～也可以私戳我哈 Qq： 952822399

新开了个Qq群，大家也可以进来互相交流~ iD 718639024

相关文章：