每周一个前端动画之一:UC浏览器球队展示动画的实现
2018-02-27 14:52
148 查看
作为一个眼中有码的人,看见某个网页或者app的炫酷效果时,第一反应就是这怎么实现的。这个系列就是把自己见到的一些动画效果分析实现出来,本文分析实现的某些效果,仅仅作为一个思路分享,仅仅作为学习素材使用。闲话不说,这篇文章是前端动画系列的第一篇。
动画效果是左右对称的,只要实现了一侧即可。
球队的logo只是在x轴进行了移动,但是停的位置以及停顿时机都需要注意
球队logo有一个从大到小的缩放
logo的透明度逐渐增大
分析出以上四点,就会发现效果实现起来也不复杂。
我们只分析左侧曼联logo的实现即可。从logo进入到动画定格,我们将整个过程分成4个部分,可以确定4个关键帧:
关键帧1:logo放大一倍,x轴偏离初始位置到窗体外部。
关键帧2:logo放大一倍,x轴偏离初始位置到窗体中间部分,并稍作停顿,所以使用了50%,60%作停顿,时间函数使用了cubic-bezier来调整。
关键帧3:logo恢复到正常大小,x轴偏离初始位置略左侧,透明度已经变成完全不透明。
关键帧4:即从偏左位置到达最终的停留位置
计时函数
属性可以作用于整个动画中,定义了动画的每次循环是如何随时间递进的。
该属性还可以作用于关键帧,如本例的用法,各个关键帧都有单独的计时函数。这时的计时其实指的的帧之间的时间函数,顺序播放的动画,结尾关键帧的计时函数不会生效。
属性的值可选,有
动画的实现其实很简单,代码已上传到github,欢迎提出Issues
最后的惯例,贴上我的博客,欢迎关注
源动画效果
作为一个轻度伪球迷,经常会看些赛事比分,比如英超(利物浦是冠军)。使用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
最后的惯例,贴上我的博客,欢迎关注
相关文章推荐
- 每周一个前端动画之二:支持率展示动画
- 【前端动画】实现动画的6种方式
- 前端如何展示商品属性:SKU多维属性状态判断算法的应用-Vue 实现
- [前端] requestAnimationFrame 实现动画效果
- 每周一个前端动画之三:twitter点赞动画
- jquery实现前端分页、select筛选框、查询条件展示效果
- 从0开始html前端页面开发_CSS实现图像获取鼠标焦点逐渐变大动画效果
- web前端之JavaScript DOM编程艺术之用JavaScript实现动画效果拓展(预览图片)
- 前端动画渲染引擎pixi.js系列(6)副本实现和平铺精灵TilingSprite
- 【web前端】html+js实现流程进度展示条
- listview展示:帧动画各种动画实现
- 前端动画渲染引擎pixi.js系列(10)骨骼动画实现之DragonBones
- 前端之实现缩略图展示网页
- 安卓自定义控件-实现IOS版UC浏览器三点加载动画效果
- 前端动画渲染引擎pixi.js系列(4)如何实现鼠标交互事件
- 前端--js实现透明度动画效果
- 【原创】关于前端动画的几种实现方式和总结
- [Android]ScaleViewPager--仿“想去”客户端图片展示效果--中轴旋转ViewPager动画实现
- 实现仿UC浏览器首页下拉动画
- iOS 使用masonry布局,并实现展示动画