netlify＆＃039; s million devs svg动画网站的制作

本文详细介绍了Netlify的“百万开发器”微型网站的创建，重点是动画过程。该网站使用大型SVG作为其基础，巧妙地将其分解为可管理的VUE组件，以便于管理和操纵。

在SVG中构建VUE应用程序

SVG充当坐标系（想想战舰！），X，Y，宽度和高度定义元素。主VUE应用程序包含标题和一个庞大的SVG。该SVG进一步分解为较小的可重复使用的VUE组件：

• 路径：由Vuex状态控制的桌面和移动视图的单独组件。
• 电台： 27个单个电台组件（加上文本标签），以及一年来组织的装饰元素（树木，灌木丛等），以便更好地组织。
• “您在这里”标记：有条件地呈现桌面视图和登录用户。

SVG的灵活性允许嵌套的SVG，定义每个孩子SVG的X，Y，宽度和高度，以精确地将其定位在父级内。<g></g>元素（类似于HTML DIVS）组组件。一年组件示例：

<template>
  <g>
    <app-tree x="650" y="5500"></app-tree>
    <app-tree x="700" y="5550"></app-tree>
    <app-bush x="750" y="5600"></app-bush>
    <app-virtual x="1200" xsmall="50" y="6000" ysmall="15100"></app-virtual>
    <app-text num="20" url-slug="jamstack-conf-virtual" x="1400" xsmall="50" y="6500" ysmall="15600">
      <template v-slot:date>2020年5月27日</template>
      <template v-slot:event>jamstack conf虚拟</template>
    </app-text>
    ...
  </g>
</template>

<script>
import {
  AppText,
  AppTree,
  AppBush,
  AppStreetlamp2,
} from "@/components";
export default {
  components: {
    AppText,
    AppTree,
    AppBush,
    AppStreetlamp2,
    AppBuildPlugins: () => import("@/components/AppBuildPlugins.vue"),
    AppMillion: () => import("@/components/AppMillion.vue"),
    AppVirtual: () => import("@/components/AppVirtual.vue"),
  },
};
</script>

注意组件的同步和异步加载，以进行性能优化。

使用GSAP和SCROLLTRIGGER的SVG动画

动画利用Greensock（GSAP）及其Scrolltrigger插件。核心动画逻辑：

从“ GSAP”导入{GSAP};
从“ gsap/scrolltrigger.js”导入{scrolltrigger};
从“ vuex”导入{mapState};

gsap.registerplugin（scrolltrigger）;

导出默认{
  计算：{
    ... MapState（[“ toggleconfig”，“ startConfig”，“ isanimationDisabled”，“ viewportsize”]），），），
  }，，
  方法： {
    百万anim（）{
      令vm = this;
      令TL;
      const isscrollelConfig = {
        scrolltrigger：{
          触发器：`。百万$ {vm.num}`，
          toggleactions：this.toggleconfig，
          开始：this.startconfig，
        }，，
        默认值：{
          持续时间：1.5，
          轻松：“正弦”，
        }，，
      };
      // ...动画逻辑...
    }，，
  }，，
  安装（）{
    this.millionanim（）;
  }，，
};

Vuex管理toggleConfig （控制动画触发器）和startConfig （定义动画起点）。横幅动画的处理方式与滚动触发的动画不同。时间表使用标签进行精确的动画控制。挥舞腿动画的一个例子：

 tl.add（`百万美元$ {vm.num}`）
  。从（
    “＃前腿R”，
    {
      持续时间：0.5，
      旋转：10，
      变形金学：“ 50％0％”，
      重复：6，
      Yoyo：是的，
      轻松：“正弦”，
    }，，
    `百万$ {vm.num}`
  ）
  。从（
    “＃前腿l”，
    {
      持续时间：0.5，
      旋转：10，
      变形金学：“ 50％0％”，
      重复：6，
      Yoyo：是的，
      轻松：“正弦”，
    }，，
    `百万$ {vm.num} = 0.25`
  ）；

动画切换和可访问性

VUEX控制的切换使用户可以禁用动画。观看isAnimationDisabled状态，并相应地暂停或重置ScrollTrigger动画，而无需使用.kill()允许重新启动。

可访问性考虑因素包括使用role="img"作为装饰元素，以及用于交互式元素的唯一ID和标题，以确保屏幕读取器可以有效地导航该网站。文本组件示例显示了如何使SVG文本可访问：

<template>
  <a :href="https://www.php.cn/link/8f7f2375ba3e2ee3adf67d0e32c683d5">
    </a>
      <title id="analyticsuklaunch">启动分析</title>
      <g>
        <text transform="translate(7.6 14)"><slot name="date">2016年7月13日</slot></text>
        <text transform="translate(16.5 48.7)"><slot name="event">这里的东西</slot></text>
        <text transform="translate(16.5 70)"><slot name="event2"></slot></text>
        <text transform="translate(164.5 104.3)">查看里程碑</text>
      </g>
    
  
</template>

该项目的GitHub存储库是开源的。作者承认同事的贡献。

以上是netlify＆＃039; s million devs svg动画网站的制作的详细内容。更多信息请关注PHP中文网其他相关文章！