Libx

animate.css源码阅读小结

Word count: 897Reading time: 3 min
2017/04/30 Share

动画库animate.css阅读

//先说一些题外话,下午敲了一个下午的代码外加看文档熟悉了json的使用,然后写了几个动画,用线性渐变做了些有有意思的东西,灵感来自于《CSS揭秘》。昨天晚上尝试ajax并不顺利,搞到晚上一点多也没有搞好,目前还在继续在看MDN的文档中。现在感觉有些累,正好很久没有写博客了,现在就写篇博客来放松一下(主要是前几天刚买了一个青轴的机械键盘,简直美滋滋,好的装备确实能Coding的幸福感翻倍。)

这周在看《CSS揭秘》的时候发现了一个动画库:animate.css于是就去他的官网去看了一下,然后就把源码下下来看一上看。

其实我觉得这个库并没有什么令人特别惊艳的地方,效果也都只是一些基本的效果,应该说是给真-懒人用的了。。。不过看源码还是很有用的.能学到不少东西。在看他的官网的时候发现了“animate”这几个字母是有线性渐变的,并且能实现流光的效果,一想我之前也写过啊,习惯性的看源码,发现实现手法更简单:下面来上源码:

color: #f35626;
background-image: -webkit-linear-gradient(0deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;/*从字体开始裁剪并把字体色设为透明这是必须的写法*/
-webkit-animation: hue 1s infinite linear;
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}

我们注意到它使用了一个filter函数:hue-rotate

hue-rotate(deg)

给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。





之前没有听说过,于是赶忙MDN查文档https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter顺便复习下filter

在阅读源码的时候,发现一个特点那就是不要吝啬帧的使用,因为在动画的运行过程中,只有更多的帧才能有更加出色的仿真效果,当然这一点跟性能有悖,不过我认为这些动画相比于体验来说还是值得的(记得前几天看过一篇关于高性能动画的文章,等下转载一下)。

另外对于动画的缓动效果给动画加上缓动效果可以让动画显得更加的真实。我们知道平时在写动画的时候会用到ease-in ease-out等几个常用的内置的缓动曲线,在此我们可使用animation-timing-function 属性,利用贝塞尔(Cubic Bezier)函数来生成速度曲线是非常精确的。当然可以用一些其他的软件来处理贝塞尔函数,而且chrome的开发人员工具也可调,但是前者太过麻烦,后者不是很方便。推荐一个在线工具:cubic-bezier.com非常的方便。

在使用的过程中,我们可以发现两个锚点的y坐标可以为负,这就可以搞点事了,在少写很多关键帧的情况下回弹,来回的效果都可以轻松实现,我相信不只有这些用途,一定会由更加有趣的应用,只不过我现在还没有想起来 ==但我相信一定会有的。

CATALOG
  1. 1. 动画库animate.css阅读
    1. 1.0.1. 给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。