您现在的位置是：网站首页> 编程资料编程资料

通过CSS数学函数实现动画特效_CSS/HTML_

2023-05-25 334人已围观

简介 通过CSS数学函数实现动画特效_CSS/HTML_

前言

大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。
之前一直在玩 three.js ，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在 CSS 中也用上这些数学函数，但发现 CSS 目前还没有，据说以后的新规范会纳入，估计也要等很久。
然而，我们可以通过一些小技巧，来创作出一些属于自己的 CSS 数学函数，从而实现一些有趣的动画效果。
让我们开始吧！

CSS 数学函数

注意：以下的函数用原生 CSS 也都能实现，这里用 SCSS 函数只是为了方便封装，封装起来的话更方便调用

绝对值

绝对值就是正的还是正的，负的变为正的
可以创造 2 个数，其中一个数是另一个数的相反数，比较它们的最大值，即可获得这个数的绝对值

 @function abs($v) { @return max(#{$v}, calc(-1 * #{$v})); }

中位数

原数减 1 并乘以一半即可

 @function middle($v) { @return calc(0.5 * (#{$v} - 1)); }

数轴上两点距离

数轴上两点距离就是两点所表示数字之差的绝对值，有了上面的绝对值公式就可以直接写出来

 @function dist-1d($v1, $v2) { $v-delta: calc(#{$v1} - #{$v2}); @return #{abs($v-delta)}; }

三角函数

其实这个笔者也不会实现~不过之前看到过好友 chokcoco 的一篇文章写到了如何在 CSS 中实现三角函数，在此表示感谢

 @function fact($number) { $value: 1; @if $number>0 { @for $i from 1 through $number { $value: $value * $i; } } @return $value; } @function pow($number, $exp) { $value: 1; @if $exp>0 { @for $i from 1 through $exp { $value: $value * $number; } } @else if $exp < 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; } @function rad($angle) { $unit: unit($angle); $unitless: $angle / ($angle * 0 + 1); @if $unit==deg { $unitless: $unitless / 180 * pi(); } @return $unitless; } @function pi() { @return 3.14159265359; } @function sin($angle) { $sin: 0; $angle: rad($angle); // Iterate a bunch of times. @for $i from 0 through 20 { $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1); } @return $sin; } @function cos($angle) { $cos: 0; $angle: rad($angle); // Iterate a bunch of times. @for $i from 0 through 20 { $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i); } @return $cos; } @function tan($angle) { @return sin($angle) / cos($angle); }

例子

以下的几个动画特效演示了上面数学函数的作用

一维交错动画

初始状态

创建一排元素，用内部阴影填充，准备好我们的数学函数

 ...(此处省略14个 list-item) 
 body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: #222; } :root { --blue-color-1: #6ee1f5; } (这里复制粘贴上文所有的数学公式) .list { --n: 16; display: flex; flex-wrap: wrap; justify-content: space-evenly; &-item { --p: 2vw; --gap: 1vw; --bg: var(--blue-color-1); @for $i from 1 through 16 { &:nth-child(#{$i}) { --i: #{$i}; } } padding: var(--p); margin: var(--gap); box-shadow: inset 0 0 0 var(--p) var(--bg); } }

应用动画

这里用了 2 个动画：grow 负责将元素缩放出来；melt 负责“融化”元素（即消除阴影的扩散半径）

 ...(此处省略14个 list-item) 
 .list { &.grow-melt { .list-item { --t: 2s; animation-name: grow, melt; animation-duration: var(--t); animation-iteration-count: infinite; } } } @keyframes grow { 0% { transform: scale(0); } 50%, 100% { transform: scale(1); } } @keyframes melt { 0%, 50% { box-shadow: inset 0 0 0 var(--p) var(--bg); } 100% { box-shadow: inset 0 0 0 0 var(--bg); } }

交错动画

  1. 计算出元素下标的中位数
  2. 计算每个元素 id 到这个中位数的距离
  3. 根据距离算出比例
  4. 根据比例算出 delay
 ...(此处省略14个 list-item) 
 .list { &.middle-stagger { .list-item { --m: #{middle(var(--n))}; // 中位数，这里是7.5 --i-m-dist: #{dist-1d(var(--i), var(--m))}; // 计算每个id到中位数之间的距离 --ratio: calc(var(--i-m-dist) / var(--m)); // 根据距离算出比例 --delay: calc(var(--ratio) * var(--t)); // 根据比例算出delay --n-delay: calc((var(--ratio) - 2) * var(--t)); // 负delay表示动画提前开始 animation-delay: var(--n-delay); } } }

地址：Symmetric Line Animation

二维交错动画

初始状态

如何将一维的升成二维？应用网格系统即可

 ...(此处省略62个 grid-item) 
 .grid { $row: 8; $col: 8; --row: #{$row}; --col: #{$col}; --gap: 0.25vw; display: grid; gap: var(--gap); grid-template-rows: repeat(var(--row), 1fr); grid-template-columns: repeat(var(--col), 1fr); &-item { --p: 2vw; --bg: var(--blue-color-1); @for $y from 1 through $row { @for $x from 1 through $col { $k: $col * ($y - 1) + $x; &:nth-child(#{$k}) { --x: #{$x}; --y: #{$y}; } } } padding: var(--p); box-shadow: inset 0 0 0 var(--p) var(--bg); } }

应用动画

跟上面的动画一模一样

 ...(此处省略62个 grid-item) 
 .grid { &.grow-melt { .grid-item { --t: 2s; animation-name: grow, melt; animation-duration: var(--t); animation-iteration-count: infinite; } } }

交错动画

  1. 计算出网格行列的中位数
  2. 计算网格 xy 坐标到中位数的距离并求和
  3. 根据距离算出比例
  4. 根据比例算出 delay
 ...(此处省略62个 grid-item) 
 .grid { &.middle-stagger { .grid-item { --m: #{middle(var(--col))}; // 中位数，这里是7.5 --x-m-dist: #{dist-1d(var(--x), var(--m))}; // 计算x坐标到中位数之间的距离 --y-m-dist: #{dist-1d(var(--y), var(--m))}; // 计算y坐标到中位数之间的距离 --dist-sum: calc(var(--x-m-dist) + var(--y-m-dist)); // 距离之和 --ratio: calc(var(--dist-sum) / var(--m)); // 根据距离和计算比例 --delay: calc(var(--ratio) * var(--t) * 0.5); // 根据比例算出delay --n-delay: calc( (var(--ratio) - 2) * var(--t) * 0.5 ); // 负delay表示动画提前开始 animation-delay: var(--n-delay); } } }

地址：Symmetric Grid Animation

另一种动画

可以换一种动画 shuffle（穿梭），会产生另一种奇特的效果

 ...(此处省略254个 grid-item ) 
 .grid { $row: 16; $col: 16; --row: #{$row}; --col: #{$col}; --gap: 0.25vw; &-item { --p: 1vw; transform-origin: bottom; transform: scaleY(0.1); } &.shuffle { .grid-item { --t: 2s; animation: shuffle var(--t) infinite ease-in-out alternate; } } } @keyframes shuffle { 0% { transform: scaleY(0.1); } 50% { transform:
                
                

                

                                            
上一篇：CSS自定义滚动条样式案例详解_CSS/HTML_

                                                                
下一篇：利用CSS制作3D动画_CSS/HTML_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网