作为一个眼中有码的人, 看见某个网页或者 app 的炫酷效果时, 第一反应就是这怎么实现的这个系列就是把自己见到的一些动画效果分析实现出来, 本文分析实现的某些效果, 仅仅作为一个思路分享, 仅仅作为学习素材使用闲话不说, 这篇文章是前端动画系列的第一篇
源动画效果
作为一个轻度伪球迷, 经常会看些赛事比分, 比如英超 (利物浦是冠军) 使用 UC 的朋友应该发现过, UC 在展示比赛时的效果还是很炫的, 动画很简单, 但是效果的确不错效果图如下:
实现分析
经过观察不难发现:
动画效果是左右对称的, 只要实现了一侧即可
球队的 logo 只是在 x 轴进行了移动, 但是停的位置以及停顿时机都需要注意
球队 logo 有一个从大到小的缩放
logo 的透明度逐渐增大
分析出以上四点, 就会发现效果实现起来也不复杂
代码实现
动画使用 CSS3 的帧动画实现 animation, 不熟悉该属性用法的同学需要补补课了注意该属性的兼容性写法, Safari 和 Chrome 需要写成 - webkit-animation
我们只分析左侧曼联 logo 的实现即可从 logo 进入到动画定格, 我们将整个过程分成 4 个部分, 可以确定 4 个关键帧:
@ - webkit - keyframes team - logo - left {}
关键帧 1:logo 放大一倍, x 轴偏离初始位置到窗体外部
- 0% {
- -webkit-transform: translate3d(-145px, 0, 0) scale(2);
- -webkit-transform-origin: center;
- -webkit-animation-timing-function: ease-out;
- opacity: .05
- }
关键帧 2:logo 放大一倍, x 轴偏离初始位置到窗体中间部分, 并稍作停顿, 所以使用了 50%,60% 作停顿, 时间函数使用了 cubic-bezier 来调整
- 50%, 60% {
- -webkit-transform: translate3d(76px, 0, 0) scale(2);
- -webkit-transform-origin: center;
- -webkit-animation-timing-function: cubic-bezier(.33, .95, .77, 1.01);
- opacity: .8
- }
关键帧 3:logo 恢复到正常大小, x 轴偏离初始位置略左侧, 透明度已经变成完全不透明
- 85% {
- -webkit-transform: translate3d(-10px, 0, 0) scale(1);
- -webkit-animation-timing-function: ease-in;
- -webkit-transform-origin: center;
- opacity: 1
- }
关键帧 4: 即从偏左位置到达最终的停留位置
- 100% {
- -webkit-transform: translate3d(0, 0, 0) scale(1);
- -webkit-transform-origin: center;
- opacity: 1
- }
效果展示
关键点解读
计时函数
animation-timing-function
属性可以作用于整个动画中, 定义了动画的每次循环是如何随时间递进的
该属性还可以作用于关键帧, 如本例的用法, 各个关键帧都有单独的计时函数这时的计时其实指的的帧之间的时间函数, 顺序播放的动画, 结尾关键帧的计时函数不会生效
属性的值可选, 有
linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)
, 以及还有阶跃函数 steps(n,start/end), 有兴趣的同学可以深入了解一下
动画的实现其实很简单, 代码已上传到 github, 欢迎提出 Issues
来源: https://juejin.im/post/5a74902e5188257a64266f83