最近公司前端部分没有那么急,下一步重点在微信端,所以我粗略看了下后面的业务需求,就打算研究一下移动端的 HTML5 页面的优雅展现。这就涉及到大量交互设计了,谈到交互就不得不说这两年大行其道的移动端各种动画,也就是俗称的各种 “H5”。得益于手机性能的大幅度提高,现在手机上至少对前端而言,性能瓶颈不是那么明显,当然,前端离不开浏览器(webview),所以总是有性能天花板了,要不然就真成 Native 应用了。
广义上讲的前端动画主要分三种:传统 js 动画、CSS3 动画、Canvas动画。传统 js 基本上就是用各种循环定时器、超时定时器不停操作 dom,Canvas 是一种更高级的 js 技术。本文不比较技术优劣,只介绍 CSS3 动画。
以上和以下都是个人见解总结,难免疏漏,还请见谅指正。
CSS3 核心 API
transform
其实不属于动画的范畴,因为是 CSS3 里的一个典型属性,所以一起说一下,可以对元素进行 2D 或 3D 转换,包括一系列的旋转、缩放等效果,是元素的静态样式。
transition
对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键帧。开始,结束。
通常和 hover 事件配合,和 js 联系紧密,可以理解为一次的动画效果,我个人也把它理解为简版的 animation ,具体属性和 animation 类似。
|
|
animation
对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。可以设置多个关键帧。
个人认为 animation 是 CSS3 动画的核心,甚至说,你熟悉了它就可以搞定几乎所有的 CSS3 动画。与 transition 的不通在于,和 js 联系不紧密,单纯的作为类似 flash 一样的动画存在。
|
|
同时要配合 @keyframes
|
|
animation 参数说明
animation-name
与 @keyframes 后 name 一致,动画名称
animation-during
一个动画持续的事件,要带单位 s/ms
animation-timing-function
动画的速度曲线,又称之为缓动类型。
- liner 动画从头到位速度相同,一般用于平滑的效果
- ease 默认值,逐渐变慢
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速再减速
- cubic-bezier 自定义贝塞尔曲线
- 除此之外还有个重要的值,step-start,可以实现一帧一帧播放的效果,在特殊场景有更好的效果
animation-delay
动画延迟执行的时间,需要单位 s/ms
animation-iteration-count
动画迭代的次数,可以设置具体的数值,默认值1,使用 infinite 关键字可以实现动画不间断播放
animation-direction
动画的前进方向,默认为 normal,代表正向播放,使用值 alternate,可以实现动画完成时的倒带效果
animation-fill-mode
填充模式,指的是动画的每个周期间的状态,通常使用默认值 none 就好。这个参数的详细说明在 这篇文章有详细解释
animation-play-state
控制动画的运行状态,默认为 running,可选值 paused
demo
呼吸效果
外层圆圈主要 css
123456789101112131415161718.circle {...animation: scale 2s ease infinite normal;}@keyframes scale {0% {transform: scale(0);opacity: 0;}8% {transform: scale(.5);opacity: 1;}100% {transform: scale(2);opacity: 0;}}内层圆圈
123456789101112.circle1 {...animation: scaleout 1s ease-in-out infinite alternate;}@keyframes scaleout {0% {transform: scale(1);}100% {transform: scale(2);}}无限扩散的水波纹
用四个重叠的圆圈来实现无限扩散效果,注意要计算好事件,比如整个扩散要 4s,那么4个圆圈之间的间隔是 1s,即每个圆圈要有 1s 递增的延迟。
123456789101112131415161718192021222324252627.circle0 {...animation: animationcir 4s linear infinite normal;}.circle1 {...animation: animationcir 4s linear 1s infinite normal;}.circle2 {...animation: animationcir 4s linear 2s infinite normal;.circle3 {...animation: animationcir 4s linear 3s infinite normal;}.fixedcircle {...}@keyframes animation2 {0% {}100% {transform: scale(4);opacity: 0;}}
相关连接
CSS3 animation渐进实现点点点等待提示效果