zdog实现火车头铁轨行驶动画效果代码-html代码-BFW代码库

zdog实现火车头铁轨行驶动画效果代码

代码语言：html

所属分类：动画

代码描述：zdog实现火车头铁轨行驶动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	font-family: system-ui;
	min-block-size: 100svb;
	display: grid;
	place-items: center;
	color: hsl(210 10% 23%);
	background: hsl(210 17% 95%);
}

div {
	position: relative;
}

canvas {
	border-radius: 0.5rem;
}

div > button {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 0.5rem;
	transform: translate(-50%, 0%);
}

button {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: hsl(210 17% 98%);
	background: hsl(210 10% 23%);
	padding: 0.4rem 0.75rem;
	border: none;
	border-radius: 0.25rem;
}

button:focus-visible {
	outline: 2px solid hsl(210 10% 23%);
	outline-offset: 2px;
}

button:disabled {
	transition-property: translate, visibility, opacity;
	transition-duration: 0.9s;
	transition-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56);
	translate: -50% 0;
	visibility: hidden;
	opacity: 0;
}
</style>

  
  
</head>

<body translate="no">
  <div>
	<canvas style="display: block; inline-size: 100%; max-inline-size: 400px" width="400" height="250">
	</canvas>
	<button disabled>Nudge</button>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
      <script >
const { Anchor, Shape, Hemisphere, Cylinder, Rect, Ellipse, TAU } = Zdog;

(() => {
  const easeInSine = t => 1 - Math.cos(t * Math.PI / 2);

  const canvas = document.querySelector("canvas");
  const context = canvas.getContext("2d");
  const { width, height } = canvas;
  const zoom = 3.75;

  const w = width / zoom;
  const h = height / zoom;

  const trackOffset = w / 2 * 1.5;
  const trackPegs = 15;
  const trackGap = trackOffset * 2 / (trackPegs + 1);

  const colors = [
  "hsl(221 19% 48%)",
  "hsl(220 31% 37%)",
  "hsl(220 48% 28%)",
  "hsl(219 52% 20%)"];

  const stroke = 2;

  const root = new Anchor();

  new Rect({
    addTo: root,
    color: "hsl(196 78% 77%)",
    stroke: 0,
    fill: true,
    width: w,
    height: h,
    translate: {
      z: -50 } });



  const horizon = new Anchor({
    addTo: root });


  new Ellipse({
    addTo: horizon,
    color: "hsl(60 93% 75%)",
    stroke: 0,
    fill: true,
    diameter: 20,
    translate: {
      x: -30,
      y: -20,
      z: -30 } });



  for (const { color, translate, rotate } of [
  {
    color: "hsl(170 50% 41%)",
    rotate: { z: 0.01 },
    translate: { z: -30 } },

  {
    color: "hsl(171 63% 44%)",
    rotate: { z: -0.02 },
    translate: {
      y: h / 8,
      z: -20 } }])


  {
    new Shape({
      addTo: horizon,
      color,
      stroke: 0,
      fill: true,
      path: [
      { x: w * -1, y: 0 },
      {
        arc: [
        { x: 0, y: h / 4 * -1 },
        { x: w, y: 0 }] },


      { x: w, y: h },
      { x: w * -1, y: h }],

      translate,
      rotate });

  }

  const track = new Anchor({
    addTo: horizon,
    translate: {
      y: 4.5 + stroke * 2 } });



  for (const d of [1, -1]) {
    new Shape({
      addTo: track,
      color: colors[3],
      stroke,
      path: [{ x: trackOffset * -1 }, { x: trackOffset }],
      translate: {
        z: (5 + stroke) * d } });


  }

  for (let i = 0; i < trackPegs; i++) {
    new Shape({
      addTo: track,
      color: colors[3],
      stroke,
      path: [{ z: -5 }, { z: 5 }],
      translate: {
        x: trackOffset * -1 + trackOffset * 2 / (trackPegs + 1) * (i + 1) } });


  }

  const back = new Cylinder({
    addTo: horizon,
    color: colors[2],
    stroke,
    diameter: 10,
    length: 12,
    translate: {
      x: 1.5 + stroke,
    .........完整代码请登录后点击上方下载按钮下载查看