Css3帧动画深入探寻,讲点项目中实际会碰到的问题
先加个副标题XD
--如何解决background-size为100%下处理@keyframes
正是在项目中遇到副标题,才引起我更深入的探寻
先略带一下基本的css3动画
css3的动画实现是通过属性animation 与 @keyframes配合实现的
具体可以参见这篇文章,这位女程序媛有着非常详尽与精彩的阐述
https://24ways.org/2012/flashless-animation/
最后实现了一张猫跑动在有视频滚动的画面上
为什么不用gif?
gif动画就是典型的帧动画,gif在各浏览器上也支持的很好。手机上表现也很好。
唯一的缺点就是体积太大,继而导致低端机上吃内存卡顿。
用css3来实现动画,会明显降低图片体积,即用sprite形式
通常,网上文章介绍的动画都是用px做为大小或距离单位
css3的动画实现是通过属性animation 与 @keyframes配合实现的
具体可以参见这篇文章,这位女程序员有着非常详尽与精彩的阐述
https://24ways.org/2012/flashless-animation/
最后实现了一张猫跑动在有视频滚动的画面上
通常,网上文章介绍的动画都是用px做为大小或距离单位
@keyframes walk-cycle {
0% {background-position: 0 0; }
100% {background-position: -880px 0;}
}
动画实现如:
.anim-div{
background-image: “那个蛋的图地址”
animation: walk-cycle 1s steps(11) infinite; }
以上就是最简单实现帧动画的代码了..
嗯。。在pc上看起来貌似还行。
实际项目中遇到的问题。
如果是在手机上,
为简单的适应不同屏幕尺寸,我们通常的做法是让美工大人出一张相对比较大的图,比如以iphone5为基准,320px宽度。
让美工提供640宽度的图给我们。我们通过设置background-size: 100%即可等比缩放来适应大部分的屏了,而不必为每个屏幕都设置不同的背景图片。
那么就成了以下的代码
.anim-div{
background-image: “那个蛋的图地址”
background-size: 100%
animation: walk-cycle 1s steps(11) infinite;
}
对,就加了一句background-size: 100%
结果就是,蒙逼了。。动画完全不像预想的那样浪了。现在真是浪出新风格了..
搜了半天google才找到有类似的回答,然后解决方法是
@keyframes walk-cycle {
0% {background-position: 0 0; }
100% {background-position: 110% 0;}
}
.anim-div{
background-image: “那个蛋的图地址”
background-size: 1100%
animation: walk-cycle 1s steps(11) infinite;
}
第一步:background-size设置为帧数*100%,即1100%
第二步:让关键帧也变换为百分比, 并且为其补上最后一帧
公式为: ((100/(2-1)) + 100) /100
公式为: ((100/(2-1)) + 100) /100
公式为: ((100/(2-1)) + 100) /100
重要的话说三遍,所以公式写三遍
此例子中即:
(100 / (11-1) +100) / 100 = 1.1
background-position: 110% 0;
为什么要补上一帧?
带出了另一个话题
在做biu动图社区HTML5展示页时,偶然发现keyframe实现的动图循环过程中会丢失一帧,找了好久终于有一篇国外同行研究此现象的文章,
当使用css3的steps配合以百分比为值的background-position时,循环帧的过程中最后一帧是不显示的
以下是我找到的国外网友分析的资料及实例测试,实例中查看源码即可看到以下的分析逻辑
http://willian12345.github.io/test-demo/step-keyframes/
或
http://sheldonwang.com/test-demo/step-keyframes/
接下来分析一下:
@keyframes countdown { 0% { background-position: 0 0; } 100% {background-position: 0 100%; } }
.flick { animation: countdown 1s steps(2) infinite; background: url(1-2.png) 0 0 no-repeat; }
你以为.flick就可以让动画在1和2之间跳动形成动画
然而并没有,它只是在1和2中间一半处移来移去
让我们试试加上”end”或“start”属性,看看行不行
.flick-end { animation: countdown 1s steps(1, end) infinite; } .flick-start { animation: countdown 1s steps(1, start) infinite; }
它们看起来直接跳过了开始或结束那一帧
综合查阅了相关资料,end和start控制的是一个帧循环结束后连接上继续循环的是哪一帧,现象是
如果设置的是end,那么最后一帧就被无视掉了,如果设置的是start,那么第一帧被无视了。W3c有个相应说明的图,反正我是没看明白。
让我们用3帧的图来验证一下
.easy-as { animation: countdown 1s steps(2, end) infinite; background: url(1-2-3.png) 0 0 no-repeat; }
果然end效果是1与2之反复跳转,直接无视了3
要让它正常依次显示1,2,3那么需要补上一帧
@keyframes countdownTo3 { 0% { background-position: 0 0; } 100% {background-position: 0 150%; } } .easy-working { animation: countdownTo3 1s steps(3) infinite; }
设为150%,即补上了50%一格的高度(一帧)
所以当为两帧时
@keyframes countdownTo2 { 0% { background-position: 0 0; } 100% {background-position: 0 200%; } } .flick-working { animation: countdownTo2 1s steps(2) infinite; }
再用公式算一遍
background-position-y: (100 / (2-1) +100) / 100 = 200%
嗯,所以是y轴上是200% 即: background-position: 0 200%;
结束语
一开始还真没注意过这些小细节,直到写到才会碰到,碰到再解决。。so,只能说能多写就多写喽
直到财务自由!!!,财务自由!!!,财务自由!!!重要的话说三遍
祝看到这篇文章的小伙伴都能实现
=================================================傲娇分割线===============================================
转载注明,博客园
willian12345@126.com
sheldon.wang
github.com/willian12345
Css3帧动画深入探寻,讲点项目中实际会碰到的问题的更多相关文章
- CSS3帧动画
在前面的文章中也有介绍过css3动画的内容,可见<关于transition和animation>和<webkitAnimationEnd动画事件>,今天又要唠叨一下这个东西了, ...
- 3d图片切换(css3帧动画)
效果带抖动翻转隐藏,使用帧动画 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- 深入理解CSS3 Animation 帧动画
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
- 深入理解CSS3 Animation 帧动画 ( steps )
作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...
- 深入理解CSS3 Animation 帧动画(转)
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
- css3的帧动画
概述 前几天刚好看到一个用了CSS3帧动画的页面,对它非常感兴趣,就研究了一下,记录在下面,供以后开发时参考,相信对其他人也有用. PS:以后别人问我用过什么CSS3属性的时候,我也可以不用说常见的a ...
- uwp 图片切换动画 使用帧动画
上一篇博客使用了Timer来实现图片的切换,@lindexi_gd讨论了一下性能,我本人其实对性能这一方面不太熟,但我觉得还是有必要考虑一下,那么今天我们使用帧动画开实现以下 新建项目,添加一个But ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- javascript帧动画
前面的话 帧动画就是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容. ...
随机推荐
- angular 调用element的 onfocus onkeydown onblur等事件
项目里要实现一个input验证通过就切换到下一个input的功能 当然用jq dom操作很简单 ,大家都懂,现在用 angular,mvc 数据模型控制分离,不想再dom操作怎么办 以下方法 < ...
- 使用userData兼容IE6-10,chrome,FF 及360等浏览器的本地存储
开发过程中涉及本地存储的使用,IE很多版本都不支持localStorage,没办法,就得兼容使用userData了.废话不说了,看代码: (function(window){var LS;(funct ...
- 牛客OI赛制测试赛3 解题报告
前话: 话说考试描述:普及难度. 于是想在这场比赛上涨点信心. 考出来的结果:Point:480 Rank:40 然而同机房的最好成绩是 510. 没考好啊!有点炸心态,D题一些细节没有注意, ...
- view的阴影效果shadowColor
btn.layer.shadowColor = UIColor.blackColor().CGColor btn.layer.shadowOffset = CGSizeMake(5, 5) btn.l ...
- png?wxfrom=5&wx_lazy=1
作为一名游戏行业的视频&平面设计师,平时的工作就是为公司发行的游戏制作宣传视频.广告.平面宣传图,打交道最多的自然就是Adobe家族的设计软件,Photoshop.AfterEffects.P ...
- XML外部实体(XXE)注入详解
###XML与xxe注入基础知识 1.XMl定义 XML由3个部分构成,它们分别是:文档类型定义(Document Type Definition,DTD),即XML的布局语言:可扩展的样式语言(Ex ...
- Python 使用CPickle和pickle模块进行序列化和反序列化
#Cpickle使用C语言进行编写的相比pickle来说效率高很多 #-*-coding:utf-8-*-'''序列化操作'''try: import cPickle as pickleexce ...
- spring管理hibernate,mybatis,一级缓存失效原因
mybatis缓存:一级缓存和二级缓存 hibernate缓存:一级缓存和二级缓存 关于缓存: 缓存是介于物理数据源与应用程序之间,是对数据库中的数据复制一份临时放在内存中的容器, 其作用是为了减少应 ...
- Android Layout: TableLayout
TableLayout<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" andr ...
- 解题:USACO07FEB The Cow Lexicon
题面 第一次做Trie上dp,感谢 @i207M 的资瓷 对子串们建立一棵Trie,设$dp[i][j]$表示到母串第$i$位为止在$Trie$上的$j$号节点时的最小修改数量,然后就可以枚举母串各位 ...