-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
文字轮播与图片轮播?CSS 不在话下 #184
Comments
大佬太强了,按照教程实现了,效果比之前棒太多了 |
移动端发现有闪动体验问题 |
iOS 还是 安卓?什么浏览器下? |
大佬,支持下css的 stop函数,搞一个翻页的demo |
只能说骚气!! |
移动端确实是有问题, 我的ios手机测试过了会动画效果会闪屏。如果能修复一下就完美了。 |
学习了 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
今天,分享一个实际业务中能够用得上的动画技巧。
巧用逐帧动画,配合补间动画实现一个无限循环的轮播效果,像是这样:
看到上述示意图,有同学不禁会发问,这不是个非常简单的位移动画么?
我们来简单分析分析,从表面上看,确实好像只有元素的
transform: translate()
在位移,但是注意,这里有两个难点:到这里,你可以暂停思考一下,如果有 20 个元素,需要进行类似的无限轮播播报,使用 CSS 实现,你会怎么去做呢?
逐帧动画控制整体切换
首先,我需要利用到逐帧动画效果,也被称为步骤缓动函数,利用的是
animation-timing-function
中,的 steps,语法如下:如果你对
steps
的语法还不是特别了解,强烈建议你先看看我的这篇文章 -- 深入浅出 CSS 动画,它对理解本文起着至关重要的作用。好的,还是文章以开头的例子,假设我们存在这样 HTML 结构:
首先,我们实现这样一个简单的布局:
在这里,要实现轮播效果,并且是任意个数,我们可以借助
animation-timing-function: steps()
:别看到上述有几个 CSS 变量就慌了,其实很好理解:
calc(var(--speed) * var(--s))
:单次动画的耗时 * 轮播的个数,也就是总动画时长steps(var(--s))
就是逐帧动画的帧数,这里也就是steps(6)
,很好理解calc(var(--s) * var(--h) * -1px))
单个 li 容器的高度 * 轮播的个数,其实就是 ul 的总体高度,用于设置逐帧动画的终点值上述的效果,实际如下:
如果给容器添加上
overflow: hidden
,就是这样的效果:这样,我们就得到了整体的结构,至少,整个效果是循环的。
但是由于只是逐帧动画,所以只能看到切换,但是每一帧之间,没有过渡动画效果。所以,接下来,我们还得引入补间动画。
利用补间动画实现两组数据间的切换
我们需要利用补间动画,实现动态的切换效果。
这一步,其实也非常简单,我们要做的,就是将一组数据,利用
transform
,从状态 A 位移到 状态 B。单独拿出一个来演示的话,大致的代码如下:
非常简单的一个动画:
基于上述效果,我们如果把一开始提到的 逐帧动画 和这里这个 补间动画 结合一下,ul 的整体移动,和 li 的 单个移动叠在在一起:
就能得到这样一个效果:
Wow,神奇的化学反应产生了!基于 逐帧动画 和 补间动画 的结合,我们几乎实现了一个轮播效果。
当然,有一点瑕疵,可以看到,最后一组数据,是从第六组数据 transform 移动向了一组空数据:
末尾填充头部第一组数据
实际开发过轮播的同学肯定知道,这里,其实也很好处理,我们只需要在末尾,补一组头部的第一个数据即可:
改造下我们的 HTML:
这样,我们再看看效果:
Beautiful!如果你还有所疑惑,我们给容器加上
overflow: hidden
,实际效果如下,通过额外添加的最后一组数据,我们的整个动画刚好完美的衔接上,一个完美的轮播效果:完整的代码,你可以戳这里:CodePen Demo -- Vertical Infinity Loop
横向无限轮播
当然,实现了竖直方向的轮播,横向的效果也是一样的。
并且,我们可以通过在 HTML 结构中,通过 style 内填写 CSS 变量值,传入实际的 li 个数,以达到根据不同 li 个数适配不同动画:
整个动画的 CSS 代码基本是一致的,我们只需要改变两个动画的
transform
值,从竖直位移,改成水平位移即可:这样,我们就轻松的转化为了横向的效果:
完整的代码,你可以戳这里:CodePen Demo -- Horizontal Infinity Loop
轮播图?不在话下
OK,上面的只是文字版的轮播,那如果是图片呢?
没问题,方法都是一样的。基于上述的代码,我们可以轻松地将它修改一下后得到图片版的轮播效果。
代码都是一样的,就不再列出来,直接看看效果:
完整的代码,你可以戳这里:CodePen Demo -- Horizontal Image Infinity Loop
掌握了这个技巧之后,你可以将它运用在非常多只需要简化版的轮播效果之上。
再简单总结一下,非常有意思的技巧:
最后
OK,本文到此结束,希望本文对你有所帮助 :)
想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 -- iCSS前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
The text was updated successfully, but these errors were encountered: