2015-11-01 |

CSS3帧动画深入探寻,讲点项目中实际会碰到的问

CSS3帧动画深入探寻,讲点项目中实际会碰到的问

注:小编是一个有轻微处女座情节的人,所以很多内容为了方便阅读和格式美观,我都做成了图片,上传后头条都压缩了图片质量,但是不影响大家阅读,因为可以点击放大,哇哈哈!

最近比较忙,希望大家多多理解,还有就是马上中秋十一了,小编要会内蒙古大草原了。可能没有办法及时的更新,希望大家多多理解。不过小编会在闲的时候更新一些搞笑的图片以及福利图,喜欢的大家可以留意一下,再次感谢大家的阅读以及鼓励,您的阅读是我最大的动力。

正文开始:

--如何解决background-size为100%下处理@keyframes

正是在项目中遇到副标题,才引起我更深入的探寻

先略带一下基本的css3动画

「CSS3 」动画详解

css3的动画实现是通过属性animation 与 @keyframes配合实现的

具体可以参见这篇文章,这位女程序媛有着非常详尽与精彩的阐述

https://24ways.org/2012/flashless-animation/

最后实现了一张猫跑动在有视频滚动的画面上

为什么不用gif?

gif动画就是典型的帧动画,gif在各浏览器上也支持的很好。手机上表现也很好。

唯一的缺点就是体积太大,继而导致低端机上吃内存卡顿。

用css3来实现动画,会明显降低图片体积,即用sprite形式

通常,网上文章介绍的动画都是用px做为大小或距离单位

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

动画实现如:

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

以上就是最简单实现帧动画的代码了..

嗯。。在pc上看起来貌似还行。

实际项目中遇到的问题。

如果是在手机上,

为简单的适应不同屏幕尺寸,我们通常的做法是让美工大人出一张相对比较大的图,比如以iphone5为基准,320px宽度。

让美工提供640宽度的图给我们。我们通过设置background-size: 100%即可等比缩放来适应大部分的屏了,而不必为每个屏幕都设置不同的背景图片。

那么就成了以下的代码

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

对,就加了一句background-size: 100%

结果就是,蒙逼了。。动画完全不像预想的那样浪了。现在真是浪出新风格了..

搜了半天google才找到有类似的回答,然后解决方法是

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

第一步:background-size设置为帧数*100%,即1100%

第二步:让关键帧也变换为百分比, 并且为其补上最后一帧

公式为: (100 / (帧数-1))%+100%

公式为: (100 / (帧数-1))%+100%

公式为: (100 / (帧数-1))%+100%

重要的话说三遍,所以公式写三遍

此例子中即:

(100 / (11-1) ) % + 100% = 110%

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/

接下来分析一下:

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题
CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

你以为.flick就可以让动画在1和2之间跳动形成动画

然而并没有,它只是在1和2中间一半处移来移去

让我们试试加上”end”或“start”属性,看看行不行

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

它们看起来直接跳过了开始或结束那一帧

综合查阅了相关资料,end和start控制的是一个帧循环结束后连接上继续循环的是哪一帧,现象是

如果设置的是end,那么最后一帧就被无视掉了,如果设置的是start,那么第一帧被无视了。W3c有个相应说明的图,反正我是没看明白。

让我们用3帧的图来验证一下

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

果然end效果是1与2之反复跳转,直接无视了3

要让它正常依次显示1,2,3那么需要补上一帧

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

设为150%,即补上了50%一格的高度(一帧)

所以当为两帧时

CSS3帧动画深入探寻,讲点项目中实际会碰到的问题

再用公式算一遍

background-position-y: (100 / (2-1))% + 100% = 200%

嗯,所以是y轴上是200% 即: background-position: 0 200%;

结束语

一开始还真没注意过这些小细节,直到写到才会碰到,碰到再解决。。so,只能说能多写就多写喽.

祝看到这篇文章的小伙伴都能完美实现。

1

发表评论

    评价:
    验证码: 点击我更换图片