网易云APP启动界面【模仿】

第一次还原这样的效果吧(我真菜😢😢😢!!!), 完成度70-80%(叹气😕)

项目地址

预览


素材

工具

  • 工具

    • AE
    • PS
    • PxCook
  • Code

还原过程

简单的适配

1
2
3
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
let htmlDom = document.querySelector('html')
htmlDom.style.fontSize = htmlWidth / 10 + 'px'

其实适配的方法有很多种,个人比较懒就简单的搜哈先 下面给大家贴出了一些文章

手淘的方案也非常好,挺好用的 https://github.com/amfe/lib-flexible

Vant的方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Rem 适配
// Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具

// postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
// lib-flexible 用于设置 rem 基准值
// 下面提供了一份基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改

module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}

https://youzan.github.io/vant/#/zh-CN/quickstart

素材导出

bodymovin

  • 使用Ae的插件bodymovin导出Json文件, 我们装上之后把一些用不到的元素按钮隐藏先. 教程靠大家自己Google

  • 然后需要psd的可以在AE中导出(方法一样Google 233😏😏😏)

  • icon可以在PSD导出, 然后尺寸什么的在PxCook Ps了吗标注,量尺寸什么的,甚至在在线的标注工具标记(方法很多🤨🤨🤨)

使用Lottie

1
2
3
4
5
6
7
8
9
npm install lottie-web

lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // the path to the animation json
});

基本的使用还是很简单的👨🏻‍💻

我们可以看见下面有时间轴, 可以看到动画时长什么的,然后我根据这个还原出来的效果不尽人意,(自己太菜 慢慢学习怎么还原这样的稿吧🙁🙁🙁)

查看动画时间

1
2
animation: logo-button-bottom 1.5s;
animation-fill-mode: forwards;

查看效果执行

1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes logo-button-bottom {
0% {
transform: translate(-50%, 80/75rem);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}

查看效果的动画曲线

1
animation: logo-button-bottom 1.5s ease-out;

大概就是这么多了吧… … 看了看 垃圾文章无疑了 2333

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

打赏测试
显示 Gitment 评论