前端实现动画的几种方式简介

发布时间：2023年12月23日

这里只是做简要介绍，属于知识的拓展。每种方案的更详细的使用方式需要各位自行了解。

大体上技术方案分为：CSS 动画、SVG 动画、CSS + SVG、JS 控制的逐帧动画、GIF 图。

CSS 动画

CSS 实现动画有两种方式，一种是使用 trasition；另一种是使用 animation。

transition

默认情况下，当 CSS 中的属性值发生变化时没有动画效果，新值直接生效（有些会有系统自带的默认效果，这里不谈）。

而 transition 的作用是，规定哪些属性变化时有动效，duration、控制曲线等。

所以，它是一次性动效。如果想实现循环效果的动效，需要 JS 配合。

其语法为 transition: <property> <duration> <timing-function> <delay>;。当有多个属性需要动效时，不同属性设置用 , 分隔。

.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  transition:
    width 2s,
    height 2s,
    background-color 2s,
    rotate 2s;
}

.box:hover {
  background-color: #ffcccc;
  width: 200px;
  height: 200px;
  rotate: 180deg;
}

<body>
  <p>
    下面的盒子包含 width、height、background-color 和 rotate
    的过渡效果。鼠标停留在盒子上以观察这些属性是如何变化的。
  </p>
  <div class="box">示例</div>
</body>

animation

animation 属性用来设置动画的基本参数，如：duration、delay、重复次数等。

具体的动画序列的定义通过 @keyframes 实现，二者配合可以实现自动循环的动效。

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>

SVG 动画

下面的代码自己体会。

<svg id="box" width="800" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="" y="" width="100" height="100" fill="rgb(255,0,0);" stroke="" stroke-width="">
        <set attributeName="x" attributeType="XML" to="100" begin="4s"/>
        <animate attributeName="x" attributeType="XML" begin="0s" dur="4s" from="0" to="300"/>
        <animate attributeName="y" attributeType="XML" begin="0s" dur="4s" from="0" to="0"/>
        <animateTransform attributeName="transform" begin="0s" dur="4s" type="scale" from="1" to="2" repeatCount="1" />
        <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="4s" repeatCount="1" />
    </rect>   
</svg>

需要注意的是，动效的可见范围不会超过其 width 和 height 规定的范围。

CSS + SVG

术业有专攻，有些动画用 CSS 实现起来很复杂甚至实现不了（如：文字描边动画）。SVG 自身的动画脱离不了自己的范围，因此动画需要预留很大的空间。

把这两个结合起来就可以实现很多绚丽效果。

需要注意一个前提，此时 SVG 需要以标签的形式嵌入 dom 树中。

方式一

第一种实现方式很简单，就是利用 CSS 中的 transition 和 animation。

ect{
   width: 100px;
   height: 100px;
   fill: gold;
   transition: fill 1s linear;
}
rect:hover{
   fill: greenyellow;
}

<html>
  <body>
    <svg>
       <rect />
    </svg>
  </body>
</html>

.beat{
    transform-origin: bottom;   //将变换参考点设置成`<svg>元素`的底部
    animation: beat-scale 1.4s linear infinite;
}
        
@keyframes beat-scale{
    25%{
         transform: scaleY(0.3);
    }
    50%{
         transform: scaleY(1);
    }
    75%{
         transform: scaleY(0.3);
    }
}

<html>
  <body>
    <svg height="100" width="100" viewBox="0 0 100 100"> 
        <line class="beat" x1="15" y1="40" x2="15" y2="100" stroke="lightblue" stroke-width="10" stroke-linecap="round"></line>
        <line class="beat" x1="50" y1="40" x2="50" y2="100" stroke="lightblue" stroke-width="10"  stroke-linecap="round"></line>
        <line class="beat" x1="85" y1="40" x2="85" y2="100" stroke="lightblue" stroke-width="10"  stroke-linecap="round"></line>
    </svg>
  </body>
</html>

时钟效果

.fast-hand{
   animation: clock-rotate 2s linear infinite;  /*动画时间设置不同*/
}
.slow-hand{
   animation: clock-rotate 15s linear infinite;  /*动画时间设置不同*/
}
@keyframes clock-rotate{
   0%{
        transform: rotate(0deg);
   }
   100%{
        transform: rotate(360deg);
   }
}

<svg height="0" width="0">
   <symbol id="clock" viewBox="-52 -52 104 104">
       <circle fill="none" stroke="currentColor" stroke-width="6" stroke-miterlimit="10" cx="0" cy="0" r="48"/>
       <line class="fast-hand" fill="none" stroke-linecap="round" stroke="currentColor" stroke-width="6" stroke-miterlimit="10" x1="0" y1="0" x2="35" y2="0.5"></line>
       <line class="slow-hand" fill="none" stroke-linecap="round" stroke="currentColor" stroke-width="6" stroke-miterlimit="10" x1="0" y1="0" x2="-0.5" y2="-24"></line>
   </symbol>
</svg>
<div style="color:#fa8919; font-size: 16px;" >        
    <svg height="26" width="26" style="vertical-align: top; margin-top: -2px;margin-right:3px;">
        <use href="#clock"></use>
    </svg>
    <span>等待中</span>  
</div>

在这里插入图片描述

方式二：描边动画

原理介绍

描边动画的核心是 SVG 的两个显示属性，分别是 stroke-dasharray 和 stroke-dashoffset。

stroke-dasharray 用于创建虚线。它的值是一个序列，可以传入多个值，分别指定虚线中线段和间隔的长度。

stroke-dashoffset 描述相对于起始点的偏移。它的值是一个数值 X，X>0 时，相当于往左移动了 X 个长度单位; X<0 时，相当于往右移动了 X 个长度单位。

stroke-dashoffset 只有在设置了 stroke-dasharray 的情况下，才生效，非虚线的话，是无法看出偏移的。

对于一条线 line，如果设置 stroke-dasharray = 'line.length'，那么显示出来的就只有线段，没有间隔，相当于实线效果。而此时如果 stroke-dashoffset='line.length'，那线 line 就往左移动了 line.length 个长度单位，显示出来的就只有间隔，没有线段，相当于空白的效果。
如果 stroke-dashoffset 的值从 line.length --> 0，线段就会逐渐显示出来。从而产生描边的效果。

SVG 的形状元素都有一个 getTotalLength 的方法，可以获取该形状的路径总长度，对于规则和不规则的形状都适用。

案例

<body>
    <svg width="500" height="106" viewBox="0 0 249 53" fill="none">
        <path d="M35.9334 13.232C35.9334 13.552 35.4854 13.712 34.5894 13.712C33.6934 13.712 33.2454 13.52 33.2454 13.136C32.3494 10.192 31.4854 8.528 30.6534 8.144C27.9654 7.184 23.9974 6.70399 18.7494 6.70399C17.8534 6.768 17.2454 7.024 16.9254 7.472C16.6054 7.92 16.4454 8.72 16.4454 9.872V25.616C24.3174 25.36 28.6374 25.008 29.4054 24.56L30.0774 20.528C30.2054 20.208 30.6534 20.048 31.4214 20.048C32.2534 20.048 32.6694 20.272 32.6694 20.72C32.4134 22.576 32.2854 24.656 32.2854 26.96C32.2854 29.2 32.4134 31.248 32.6694 33.104C32.6694 33.488 32.2214 33.68 31.3254 33.68C30.4934 33.68 30.0774 33.552 30.0774 33.296L29.3094 29.168C28.5414 28.72 24.2534 28.368 16.4454 28.112V39.728C16.4454 44.592 17.0854 47.024 18.3654 47.024H23.1654C23.6774 47.024 23.9334 47.536 23.9334 48.56C23.9334 49.52 23.7414 50 23.3574 50L12.2214 49.904L2.62137 50.192C2.17337 50.192 1.94937 49.712 1.94937 48.752C1.94937 47.792 2.14137 47.312 2.52537 47.312H6.84537C7.54937 47.312 7.96537 47.184 8.09337 46.928C8.22137 46.608 8.28537 45.808 8.28537 44.528V14.288C8.28537 9.168 7.64537 6.608 6.36537 6.608H2.90937C2.14137 6.608 1.75737 6.128 1.75737 5.168C1.75737 4.144 2.10937 3.632 2.81337 3.632L12.6054 3.824H32.6694V2.288C32.6694 1.904 33.0854 1.712 33.9174 1.712C34.8134 1.712 35.2614 1.904 35.2614 2.288L35.9334 13.232Z"/>
        <path d="M43.5031 50L35.9191 50.192C35.4711 50.192 35.2471 49.776 35.2471 48.944C35.2471 48.112 35.4711 47.696 35.9191 47.696H38.9911C39.6951 47.696 40.2071 47.408 40.5271 46.832C41.9991 44.4 44.9431 37.936 49.3591 27.44C53.7751 16.88 56.9431 8.88 58.8631 3.44C59.1191 2.864 59.7271 2.576 60.6871 2.576C61.7111 2.576 62.3511 2.896 62.6071 3.536C63.3751 6.736 65.6151 12.784 69.3271 21.68C73.1031 30.576 76.3991 38 79.2151 43.952C79.9831 45.488 80.6871 46.48 81.3271 46.928C81.9671 47.376 82.9591 47.6 84.3031 47.6C84.6871 47.6 84.8791 48.048 84.8791 48.944C84.8791 49.776 84.7191 50.192 84.3991 50.192L75.1831 50L64.8151 50.192C64.4311 50.192 64.2391 49.776 64.2391 48.944C64.2391 48.112 64.4311 47.696 64.8151 47.696H69.4231C70.1271 47.696 70.4791 47.408 70.4791 46.832C70.4791 46.768 68.6871 41.84 65.1031 32.048H51.7591C48.6231 39.792 47.0551 44.336 47.0551 45.68C47.0551 46.96 47.4391 47.6 48.2071 47.6H52.1431C52.6551 47.6 52.9111 48.048 52.9111 48.944C52.9111 49.776 52.7191 50.192 52.3351 50.192L43.5031 50ZM63.8551 28.784C63.6631 28.208 61.9991 23.344 58.8631 14.192H58.5751C57.0391 18.608 55.2151 23.472 53.1031 28.784H63.8551Z"/>
        <path d="M132.826 3.824L141.658 3.632C142.042 3.632 142.234 4.112 142.234 5.072C142.234 5.968 142.042 6.416 141.658 6.416H138.298C137.402 6.416 136.826 6.64 136.57 7.088C135.418 9.072 134.842 23.472 134.842 50.288C134.842 50.928 134.298 51.248 133.21 51.248C132.186 51.248 131.45 51.024 131.002 50.576C118.202 35.344 107.898 22.992 100.09 13.52H99.8019C99.9939 24.848 100.186 34.32 100.378 41.936C100.378 45.264 100.858 46.928 101.818 46.928H105.658C106.042 46.928 106.234 47.44 106.234 48.464C106.234 49.424 106.042 49.904 105.658 49.904H97.6899L88.9539 50.096C88.6339 50.096 88.4739 49.648 88.4739 48.752C88.4739 47.792 88.6339 47.312 88.9539 47.312H91.2579C93.2419 47.312 94.2659 46.672 94.3299 45.392C95.2899 35.024 95.7699 22.896 95.7699 9.008C94.7459 7.792 93.8819 7.088 93.1779 6.896C92.4739 6.704 91.1619 6.608 89.2419 6.608C88.8579 6.608 88.6659 6.128 88.6659 5.168C88.6659 4.144 88.8579 3.632 89.2419 3.632L102.778 3.824C118.33 23.536 127.482 35.216 130.234 38.864H130.426C130.17 22.096 129.946 12.528 129.754 10.16C129.562 7.792 129.05 6.608 128.218 6.608H124.858C124.41 6.608 124.186 6.128 124.186 5.168C124.186 4.144 124.41 3.632 124.858 3.632L132.826 3.824Z" />
        <path d="M174.709 51.248C166.901 51.248 160.437 49.168 155.317 45.008C150.197 40.848 147.637 35.152 147.637 27.92C147.637 20.624 150.389 14.576 155.893 9.776C161.397 4.976 167.957 2.576 175.573 2.576C179.285 2.576 182.933 3.504 186.517 5.36V3.728C186.517 3.28 186.901 3.056 187.669 3.056C188.501 3.056 188.917 3.28 188.917 3.728C188.917 7.76 189.237 11.952 189.877 16.304C189.941 16.496 189.813 16.688 189.493 16.88C189.237 17.008 188.821 17.072 188.245 17.072C187.669 17.072 187.317 16.816 187.189 16.304L186.421 11.216C182.837 7.824 178.709 6.128 174.037 6.128C169.429 6.128 165.461 8.112 162.133 12.08C158.869 16.048 157.237 21.008 157.237 26.96C157.237 32.912 158.965 37.872 162.421 41.84C165.877 45.744 169.941 47.696 174.613 47.696C179.285 47.696 183.701 46.32 187.861 43.568L188.341 38.096C188.341 37.584 188.789 37.328 189.685 37.328C190.581 37.328 191.029 37.552 191.029 38L190.453 50.192C190.453 50.576 190.005 50.768 189.109 50.768C188.277 50.768 187.861 50.576 187.861 50.192V48.56C183.445 50.352 179.061 51.248 174.709 51.248Z"/>
        <path d="M219.962 49.904L210.362 50.192C209.914 50.192 209.69 49.712 209.69 48.752C209.69 47.792 209.882 47.312 210.266 47.312H214.586C215.29 47.312 215.706 47.184 215.834 46.928C215.962 46.608 216.026 45.808 216.026 44.528V29.264H215.93C215.994 27.344 211.482 21.168 202.394 10.736C199.898 7.792 197.978 6.32 196.634 6.32H194.426C193.914 6.32 193.658 5.904 193.658 5.072C193.658 4.176 193.85 3.728 194.234 3.728L203.354 3.824L213.338 3.728C213.722 3.728 213.914 4.144 213.914 4.976C213.914 5.808 213.754 6.224 213.434 6.224H208.634C208.634 6.352 209.434 7.376 211.034 9.296C216.346 15.632 219.802 20.432 221.402 23.696H221.69C222.65 22.096 224.602 19.44 227.546 15.728C230.49 12.016 232.154 9.776 232.538 9.008C232.986 8.176 233.21 7.536 233.21 7.088C233.21 6.576 232.954 6.32 232.442 6.32H229.754C229.434 6.32 229.274 5.904 229.274 5.072C229.274 4.176 229.498 3.728 229.946 3.728L238.874 3.824L246.458 3.728C246.906 3.728 247.13 4.144 247.13 4.976C247.13 5.808 246.874 6.224 246.362 6.224H244.634C243.482 6.224 242.49 6.576 241.658 7.28C238.522 9.904 234.938 13.488 230.906 18.032C226.938 22.512 224.698 25.648 224.186 27.44V39.728C224.186 44.592 224.826 47.024 226.106 47.024H230.906C231.418 47.024 231.674 47.536 231.674 48.56C231.674 49.52 231.482 50 231.098 50L219.962 49.904Z"/>
    </svg>
</body>

body{
    background: #2e4057;
    display: flex;
    justify-content: center;
    align-items: center;
}
svg{
    stroke: hsl(189, 68%, 75%);
    stroke-width:1px;
    fill:hsl(189, 68%, 75%, 0%);
    animation: color-change 1s ease-in forwards 3.8s;
}
//每个字母的描边动画执行时间和开始时间不同
path:nth-child(1){
    stroke-dasharray: 246;
    stroke-dashoffset: 246;
    animation: show 1s linear forwards;
}
path:nth-child(2){
    stroke-dasharray: 253;
    stroke-dashoffset: 253;
    animation: show 1.2s linear forwards .5s;
}
path:nth-child(3){
    stroke-dasharray: 334;
    stroke-dashoffset: 334;
    animation: show 1.4s linear forwards 1s;
}
path:nth-child(4){
    stroke-dasharray: 246;
    stroke-dashoffset: 246;
    animation: show 1.6s linear forwards 1.5s;
}
path:nth-child(5){
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: show 1.8s linear forwards 2s;
}
@keyframes show{
     to{
           stroke-dashoffset: 0;
     }
}
@keyframes color-change{
     to{
           stroke: transparent;
           fill:hsl(189, 68%, 75%)
     }
}

js 动画

这个就不详细叙述了，可以使用 setTimeout 设置定时，也可以使用 requestAnimationFrame

gif

慎用。效果一般，文件不小

文章来源:https://blog.csdn.net/kaiyuanheshang/article/details/135159858
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章