动画✍️ 实现动画的几种方式

前端基石前端动画 #css #前端动画

2021-08-09 | 2024-05-07 | 1.4k | 7 分钟

gif 实现

定义
- GIF 文件的数据是一种基于 LZW 算法的连续色调的无损压缩格式，gif 格式的特点是一个 gif 文件可以存多幅彩色图像，当数据逐幅读出并展示都在屏幕上，就可以构成一个简单的动画；
- 最高支持 256 种颜色，由于这种特性，GIF 比较适用于色彩较少的图片，比如页面卡通 icon、标志等等；
优点：
- 制作的成本很低；
- 兼容性好；
- 方便开发使用；
缺点：
- 画质上：色彩支持少，图像毛边严重；
- 交互上：不能控制动画的播放暂停，没有灵活性；
- 大小上：由于是无损压缩，每帧被完整的保存下来，导致文件很大；
效果展示

css3 的 transition 过渡动画

css3 的 animation 动画

SVG 描边动画：SMIL

定义
- SVG 是一种基于 XML 的图像格式，非常类似于 HTML 的工作方式。它为许多熟悉的几何形状定义了不同的元素，这些元素可以在标记中组合以产生二维图形;
- 同样高清的质地，矢量图不畏惧放大，体积小
属性
- stroke-dasharray：把线条断开为虚线，数值越大，线就越长；
- stroke-dashoffset：设置线条的偏移，设置了这个值后，线段就会偏移相应的值，要实现动画只要动态改变这个偏移值就好，那样线条就会动起来了；

示例代码

<style>
  .logo path {
    fill: none;
    stroke: chocolate;
    stroke-width: 10;
    stroke-dasharray: 11229;
    animation: anima-line 3s ease infinite;
  }
  /* 声明关键帧动画 */
  @keyframes anima-line { 
    from {
      stroke-dashoffset: 11229; /* 初始状态，隐藏起来 */
      fill: transparent;
    }

    to {
      stroke-dashoffset: 0; /* 结束状态，展示出来 */
      fill: rgba(255, 0, 0, 0.411);
    }
  }
</style>
<div class="logo">
    <svg t="1683592971143" class="icon" viewBox="0 0 1498 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="11724" width="128" height="128">
        <path class="line" id="logo"
            d="M160.938086 526.799053 90.530611 714.26775l-90.054725 0 71.227187-185.014784-13.919642-115.42999 90.874428 0L160.938086 526.799053zM323.034522 313.131725l199.756731 0-74.495693 401.136026L330.40162 714.26775l66.314035-63.037747 44.207616-293.892506L296.839861 357.337498l-13.919642 20.466074 12.28019 0L283.739955 397.450035l120.34279 0-9.821082 45.845094L334.495017 443.29513l-8.186778 49.11872 67.953454 0-12.280218 44.205773L317.306844 536.619622l-20.466995 106.423808 17.188172 0 15.558963-82.679091 45.027363 0-12.280218 85.957734L304.20695 688.069018 150.29217 688.069018 172.398592 558.725222l49.120759 0-14.734131 84.318413 13.914478 0 18.832691-106.423808-68.773156 0 7.372186-44.205773 69.587742 0 7.367066-43.386163L243.625677 466.220339 177.311657 466.220339l33.566925-55.670886L177.311657 410.549453l13.914522-22.100378-89.235023 0-26.194637-105.609318 94.962708 0 22.106419 102.330573L255.086182 280.385946l86.781031 0L323.034522 313.131725zM628.404941 500.60032 523.610963 500.60032 671.792947 280.385946l101.515212 0L628.404941 500.60032zM900.203418 533.346202 833.07479 284.479078l104.788906 0 65.494323 248.867021L900.20345 533.346099 900.203418 533.346202zM876.462797 540.71296l51.574784 171.915469-81.048229 0-11.460506-33.560371-26.199757 33.560371-282.444365 0 7.372186-45.025485 194.023936-242.314854L832.255113 425.28809 648.871936 665.14903l182.563442 0-34.386534-124.43607L876.462773 540.71296 876.462797 540.71296zM1039.378944 643.863245l30.293197-170.276147-30.293182 0 99.88096-191.561933 94.148122 0-90.054758 167.822234 21.286686 0-34.386534 194.015744L1039.378935 643.863142 1039.378944 643.863245zM1382.404506 453.121024l-4.908032 22.919987 98.241536 0.819712-3.278848 48.299008-105.608609 0-36.020838 189.927629-376.592487 0-9.00649-46.664806 302.091646 0 25.380045-143.262822-69.587742 0 7.367066-49.11872 72.04685 0 8.186778-46.659686 85.141606-88.416768L1225.221187 340.964557 1239.955354 292.665549l257.064283 0-6.547354 42.571571L1382.404506 453.121024zM1382.404506 453.121024"
            p-id="11725"></path>
    </svg>
</div>
<script>
  const path = document.getElementById('logo')
  const pathLen = path.getTotalLength() 
  console.log(pathLen); // 11229
</script>

效果展示

原生 JS 动画

示例代码

HTML

<!-- setTimeout 实现 -->
<style>
    #box {
        width: 200px;
        height: 200px;
        background: yellowgreen;
    }
</style>
<div id="box">
</div>
<script>
    const element2 = document.getElementById('box');
    let i = 0;
    let timerId;
    function move() {
        element2.style.marginLeft = i + 'px'
        timerId = setTimeout(move, 0)
        i++;
        if (i > 200) {
            clearTimeout(timerId)
        }
    }
    move();
</script>

<!-- requestAnimationFrame 实现 -->
<style>
    #box {
        width: 200px;
        height: 200px;
        background: yellowgreen;
    }
</style>
<div id="box">
</div>
<script>
    const element2 = document.getElementById('box');
    let r = 0;
    let rafId;
    function step() {
        element2.style.marginLeft = r + 'px';
        rafId = window.requestAnimationFrame(step);
        r++;
        if (r > 200) { // 在两秒后停止动画
            cancelAnimationFrame(rafId);
        }
    }
    step();
</script>

效果展示

canvas 绘制动画（其他笔记中已写）

总结

代码复杂度方面：
- 简单动画：css 代码实现会简单一些，js 复杂一些；
- 复杂动画：css 代码就会变得冗长，js 实现起来更优；
动画运行时：
- js 对动画的控制程度上比较灵活，能控制动画暂停、取消、终止等；
- css 动画不能添加事件，只能设置固定节点进行什么样的过渡动画；
兼容方面：
- css 有浏览器兼容问题；
- js 大多情况下是没有的；
性能方面：
- css 动画相对于优一些，css 动画通过 GUI 解析；
- js 动画需要经过 js 引擎代码解析，然后再进行 GUI 解析渲染；

打赏作者

您的打赏是我前进的动力

微信

支付宝

🌿 撤销操作

TypeScript👉 概要

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. gif 实现
2. css3 的 transition 过渡动画
3. css3 的 animation 动画
4. SVG 描边动画：SMIL
5. 原生 JS 动画
6. canvas 绘制动画（其他笔记中已写）
7. 总结