模仿san的hover动画

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

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

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

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

1
transition: transform .3s;

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

分界线~~~


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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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引入文件

    1
    <script src="js/lottie.js"></script>
  • 调用lottie.loadAnimation()启动一个动画。将一个对象作为参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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循环绑定事件 将上面封装进一个方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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)

}

}
  • 最后获取元素调用
    1
    2
    3
    4
    5
    6
    7
    8

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

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

最后贴 gulp 任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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