模仿san的hover动画

[xiaotiandada]

2018-05-19 01:10:14

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

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

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

大佬的实现已经很棒了 个人只让部分动画变得平滑 比如说鼠标移出的时候增加了

transition: transform .3s;

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

分界线～～～

---

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

• http://ife.baidu.com/course/detail/id/18
• https://zhuanlan.zhihu.com/uxelement
• https://baidu.github.io/san/
• https://github.com/airbnb/lottie-web
• https://codepen.io/airnan/project/editor/ZeNONO/
• https://www.youtube.com/watch?v=5XMUJdjI0L8
• ......

大概就是这么写 大家可以去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