在百度前端技术学院学习 设计师学院 绿(大佬)的课程 (第一课QAQ)
然后模仿san官网的动画效果
模仿的效果 pc端食用更佳！
大佬的实现已经很棒了 个人只让部分动画变得平滑
transition: transform .3s;复制代码
这样可以让鼠标移出Div的时候更加平滑
分界线～～～
首先贴出资料和大佬的教程
- ......
大概就是这么写 大家可以去Google搜教程 官方案例很不错
首先布局 结构和样式都可以借鉴san官网 利用控制台(so easy~)
复制代码
这是结构 具体样式可以查看我的github文件
然后就是js 控制动画效果了
引入jquery (方便～)
- 在github上的build/player获取最新版本的lottie.js文件 或者 从AE的插件导出
- 在HTML引入文件
复制代码
- 调用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.lengthsetBodymovin(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