css3 animation动画技巧

一,css3 animation动画前言

  随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考。css3动画如何让物体运动更顺畅,css3动画如何做弧线动画,css3动画是否有动画库,css3帧动画如何快速简单……   为了解决这些折磨人的问题,我们今天来分析一下:

  首先介绍css3 Animation动画库:

  http://daneden.github.io/animate.css/

  基本涵盖了我们常见的基础css3动画,有时做css3动画没有灵感或者需要快速制作时,我们可以套用里面的css3帧动画,简单粗暴。

  http://leaverou.github.io/animatable/ 这个是github玩家写的一个常用的hover animation动画

 

  css3 Animation在线调节工具:

  http://melonh.com/animationGenerator/              基于chrome的插件,可以快速调节页面上的动画

  http://isux.tencent.com/css3/tools.html               腾讯isux一款非常强大的动画工具

    http://tid.tenpay.com/labs/css3_keyframes_calculator.html           财付通的帧动画调节工具

 

  自定义transition-timing-function中的cubic-bezier参数:

  http://cubic-bezier.com/

  http://matthewlein.com/ceaser/

 

二,css3 animation动画技巧

  1.animation-direction让动画变得更圆滑:

    animation-direction 属性定义是否应该轮流反向播放动画。

    如果 animation-direction 值是 "alternate",则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。

    语法:

    animation-direction: normal|alternate;
描述测试
normal 默认值。动画应该正常播放。 测试
alternate 动画应该轮流反向播放。 测试

    animation-direction 值是 "alternate"属性实现双向循环的效果,可以很好的优化,我们本身用animation帧写的双向循环,原因在于浏览器自动实现的双向循环,比人为手工要好的多。

  2.animation-fill-mode动画结束和开始时设置保持的动画:

    animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见,主要用来实现,我们动画结束和开始时我们想保留的状态。

   语法

    animation-fill-mode : none | forwards | backwards | both;
描述
none 不改变默认行为。
forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both 向前和向后填充模式都被应用。

  3.0%用from代表,100%用to,设置cubic-bezier出现的问题:

    这里面,给大家区分一个误区,通常我们写动画是这样的:

@keyframes rotate{
    0%{transform:rotate(60deg)}
    100%{transform:rotate(60deg)}
}
@keyframes rotate{
    from{transform:rotate(50deg)}
    to{transform:rotate(100deg)}
}
看看这两者的区别

  可能对很多人来说,认为这种中0%可以用from,100%可以用to,两者是等价的,其实我然,当我们设置cubic-bezier,就会发现问题,有些手机的元素显示不出来。

@keyframes rotate{
      0%,100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
    0%{transform:rotate(60deg)}
    100%{transform:rotate(60deg)}
}
@keyframes rotate{
      0%,100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
    form{transform:rotate(50deg)}
    to{transform:rotate(100deg)}
}

  这两者真的是不能全等, 已经踩过很多坑了。

 

  4.动画原则:

    这里有点要注意的是,我们做动画的元素,请尽量使用绝对定位,从而避免重绘重排的问题。

    这里推荐几个做动画的原则:

    动画十四原则: http://www.sunnyzhen.com/course/animation_principles/demo.html

    动画十二原则:http://www.w3cplus.com/css3/animation-principles-for-the-web.html?utm_source=tuicool

  5.图片雪碧图导致动画问题:

    如果单张雪碧图面积实在太大,可以拆分雪碧图,例如拆分成2-4张,因为现代浏览器都支持4-6个同源请求下载,若资源实在太多,也可以考虑把静态资源放在不同源域名下去请求,这里牺牲多几个请求换来图片同时加载比一张图片慢慢加载要好,当然,这需要具体情况去衡量。

    还有一点就是我们做动画是总想把图片都集中在一直图片,结果导致图片高度过高,超过3000px,就会导致在部分手机图片失真或者是看不到等现象。

    现在,也越来越多的伙伴用rem来处理移动端,实现缩放的问题,建议做雪碧图时要增加空隙,最好的空隙是除以4还是整数。

  6.base64位使用时注意事项:

    使用base64:URL的优缺点
      base64:URL传输图片文件的好处在于:
        减少了HTTP请求
        某些文件可以避免跨域的问题
        没有图片更新要重新上传,还要清理缓存的问题
      不足在于:
        浏览器支持使用base64编码图片作为背景图片的这种技术IE6/IE7浏览器是不支持的(IE9浏览器IE7模式下支持。对于目前PC页面,兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。
        增加了CSS文件的尺寸base64编码图片本质上是将图片的二进制大小以一些字母的形式展示,例如一个1024字节的图片,base64编码后至少1024个字符,这个大小会被完全嵌入到CSS文件中(不过幸运的是也可以被gzip了,而图片文件被gzip效果不明显)。
        编码成本图片完成后还需要base64编码,目前估计手工完成的多,因此,增加了一定的工作量,虽然不多。

      图片这里还有一点要注意,移动端,我们经常做图片加载器,然后样式里面我们也有图片还有时间戳,这里我们一定要保持时间戳一直,不然会严重导致加载时间变长,因为不同的时间戳,会导致再次去请求确认浪费时间。

      优缺点权衡下的实际应用价值

       权衡上面所展示的优缺点,貌似base64:URL图片没有什么用武之地啊,实际上非也,有一种情况时有base64编码作为background-image背景图片利要远大于弊的。何种情况呢?
       在web页面制作的时候,由于某些现实原因,我们可以会用到下面这一类图片:
          这类图片不能与其他图片以CSS Sprite的形式存在,只能独行
          这类图片从诞生之日起,基本上很少被更新
          这类图片的实际尺寸很小
          这类图片在网站中大规模使用

     还有一点比较重要,就是就是不用这样合并写带有base64位图片background:url(base64:sdfsdfsd )  center center /20px 20px  no-repeat;,这样会导致安卓机无法显示,这种情况可能很多时候在压缩的时候出现。

 

     这里再说一个移动端border-radius的bug,通常我们画圆用border-radius:50%; 但我发现在低版本手机里面的qq浏览器不支持,只支持具体的数值px

 

  推荐腾讯isux的两篇文章:

  http://isux.tencent.com/play-with-html5-animate.html

  http://isux.tencent.com/play-with-html5-optimize.html

   CSS3的calc()使用   http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

 

 

 

posted @ 2015-05-14 07:32  小小平凡世界  阅读(2664)  评论(0编辑  收藏  举报