使用“变量种子计数器”扩展CSS动画更多可能性

栏目: CSS · 发布时间: 5年前

内容简介:byzhangxinxu from本文可全文转载,个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8629

本文可全文转载,个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。

使用“变量种子计数器”扩展CSS动画更多可能性

一、不是所有CSS属性都能动画

经常和CSS打交道的人肯定都知道,不是所有的CSS属性都能使用 animation 属性实现动画效果,最典型的例子就是 background-image 渐变。

一个典型的线性渐变是由角度,颜色和位置组成,例如:

.gradient {
    background-image: linear-gradient(45deg, red 50%, blue 50%);
}

其中无论是角度( 45deg ),颜色( red , blue )还是位置( 50% )单独作为属性者都是可以动画过渡的,但是合在一起作为渐变背景的时候是无法产生过渡效果的,因为 background-image 的语义是图片。

那有没有什么办法可以让背景图片也能实现动画过渡呢,至少CSS渐变可以实现? 使用“变量种子计数器”扩展CSS动画更多可能性

经过我的研究和探索,找到了一种解决方案,虽称不上百分百完美,但足够应用于项目中,能让以前很多不支持CSS动画的属性,也支持原生的动画效果。

二、变量种子计数器

Chrome等浏览器(不包括Safari)有个特性,就是当我们使用 @keyframes 定义关键帧的时候,关键帧里面设置的属性也是会运行的(几年前改变的,原先不是),典型的案例就是 content 属性与内容变化。

例如实现一个“正在加载中…”打点效果可以下面CSS和HTML:

dot::before {
    content: '...';
    position: absolute;
    animation: dot 3s infinite step-start both;
}
dot:after {
    content: '...';
    color: transparent;
}
@keyframes dot {
    33% { content: '.'; }
    66% { content: '..'; }
}
<button>正在加载中<dot></dot></button>

实时效果如下:

根据我的测试发现,不仅普通的CSS属性可以在CSS动画关键帧中运行,CSS自定义属性(CSS变量)也可以在CSS动画关键帧中运行。例如:

@keyframes var {
    33% { --someVar: 33%; }
    66% { --someVar: 66%; }
}

这种特性就非常有启发,如果我们某一个CSS属性值是基于这个 --someVar 变量构成的,那岂不是就算这个属性值不支持CSS动画,我只要让每一个百分比值的间隙足够的小,不也能够实现一个平滑的动画效果?

具体做法就是,把CSS动画关键帧从 0%-100% 分成101份,然后每一份从0开始依次计数,就像是个计数器一样,然后把这个计数器分配给一个特定的CSS变量。最终我们可以得到一个如下所示的CSS动画“变量种子计数器”。

@keyframes seed {
    0%{--seed:0}1%{--seed:1}2%{--seed:2}3%{--seed:3}4%{--seed:4}5%{--seed:5}6%{--seed:6}7%{--seed:7}8%{--seed:8}9%{--seed:9}10%{--seed:10}11%{--seed:11}12%{--seed:12}13%{--seed:13}14%{--seed:14}15%{--seed:15}16%{--seed:16}17%{--seed:17}18%{--seed:18}19%{--seed:19}20%{--seed:20}21%{--seed:21}22%{--seed:22}23%{--seed:23}24%{--seed:24}25%{--seed:25}26%{--seed:26}27%{--seed:27}28%{--seed:28}29%{--seed:29}30%{--seed:30}31%{--seed:31}32%{--seed:32}33%{--seed:33}34%{--seed:34}35%{--seed:35}36%{--seed:36}37%{--seed:37}38%{--seed:38}39%{--seed:39}40%{--seed:40}41%{--seed:41}42%{--seed:42}43%{--seed:43}44%{--seed:44}45%{--seed:45}46%{--seed:46}47%{--seed:47}48%{--seed:48}49%{--seed:49}50%{--seed:50}51%{--seed:51}52%{--seed:52}53%{--seed:53}54%{--seed:54}55%{--seed:55}56%{--seed:56}57%{--seed:57}58%{--seed:58}59%{--seed:59}60%{--seed:60}61%{--seed:61}62%{--seed:62}63%{--seed:63}64%{--seed:64}65%{--seed:65}66%{--seed:66}67%{--seed:67}68%{--seed:68}69%{--seed:69}70%{--seed:70}71%{--seed:71}72%{--seed:72}73%{--seed:73}74%{--seed:74}75%{--seed:75}76%{--seed:76}77%{--seed:77}78%{--seed:78}79%{--seed:79}80%{--seed:80}81%{--seed:81}82%{--seed:82}83%{--seed:83}84%{--seed:84}85%{--seed:85}86%{--seed:86}87%{--seed:87}88%{--seed:88}89%{--seed:89}90%{--seed:90}91%{--seed:91}92%{--seed:92}93%{--seed:93}94%{--seed:94}95%{--seed:95}96%{--seed:96}97%{--seed:97}98%{--seed:98}99%{--seed:99}100%{--seed:100}
}

上面这段 @keyframes seed{} 相关CSS代码就是一个可以无限使用的“动画种子”,无论是那些原本支持CSS动画的属性,还是不支持CSS动画的属性,只要它的属性值是与数值相关的,都能够借助这个“动画种子”实现动画效果。

举个渐变旋转的例子

例如一开始那个线性渐变的例子,我们可以让渐变旋转角度和我们“动画种子”中的 --seed 变量相关联,配合 animation 属性就能实现渐变旋转的效果了:

.gradient {
    width: 150px; height: 150px;
    background-image: linear-gradient(calc(3.6deg * var(--seed)), red 50%, blue 50%);
    animation: seed 1s linear infinite;
}
<div class="gradient"></div>

实时效果如下(如果不动请) 作者张鑫旭,非本站没有效果,点击这里查看效果 https://www.zhangxinxu.com/wordpress/?p=8629

原本不支持CSS动画的渐变背景也有了动画变换效果。

三、更进一步的动画效果

配合“变量种子计数器”,我们最实现过去很难实现的密集型背景图形动画效果,例如下面这张平铺的圈圈放大效果:

使用“变量种子计数器”扩展CSS动画更多可能性

CSS和HTML代码如下:

.radial-gradient {
    padding: 50%;
    background-image: radial-gradient(#cd0000 calc(2% * var(--seed)), transparent calc(2% * var(--seed)));
    background-size: 80px 80px;
    animation: seed 1s linear infinite;    
}
<div class="radial-gradient"></div>

只要把我们的径向渐变的边缘使用 var(--seed) 种子变量表示就可以了。使用 2% 计算而不是使用 1% 是为了红色铺满之后有一定的延时,否则效果体验的时候眼睛会闪瞎。

眼见为实,如果是Chrome浏览器或者Android设备,您可以狠狠地点击这里: CSS变量与径向渐变动画demo

您可以在上面提供的demo页面中修改一些数值,体验不同的效果。

四、兼容性及结语

“变量种子计数器”实现动画技术的兼容性如下:

background-image

由于Safari不支持,导致iOS手机上是没有效果的,大大制约了实用价值。

但是放在特殊场合,也不是不能使用,我们可以使用增强实现某些特殊的效果,例如这篇文章介绍的新颖的交互动效(周末更新,暂时占个位子)。

研究之路漫漫,按照我以往研究技术的经验,之后一定会发现更好的实现方法的,拭目以待吧。

就说这么多,感谢阅读,希望本文内容可以对你有所启示。

使用“变量种子计数器”扩展CSS动画更多可能性

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

本文地址: https://www.zhangxinxu.com/wordpress/?p=8629

(本篇完)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python Algorithms

Python Algorithms

Magnus Lie Hetland / Apress / 2010-11-24 / USD 49.99

Python Algorithms explains the Python approach to algorithm analysis and design. Written by Magnus Lie Hetland, author of Beginning Python, this book is sharply focused on classical algorithms, but it......一起来看看 《Python Algorithms》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具