zdog实现小船在水中巡航动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：zdog实现小船在水中巡航动画效果代码

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

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

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

  
  
<style>
body {
	margin: 0;
	min-block-size: 100svb;
	display: grid;
	place-items: center;
	color: hsl(217 57% 45%);
	background: hsl(217 57% 40%);
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">\
    <pattern id="p" patternUnits="userSpaceOnUse" width="50" height="10" viewBox="0 0 50 10">\
        <path id="s" fill="none" stroke="hsl(217 60% 38%)" stroke-width="1" d="M 0 2.5 C 7.5 2.5 17.5 -2.5 25 -2.5 C 32.5 -2.5 42.5 2.5 50 2.5" />\
        <use href="%23s" y="5" />\
        <use href="%23s" y="10" />\
    </pattern>\
    <rect width="400" height="200" fill="url(%23p)" />\
</svg>');
}

canvas {
	display: block;
	inline-size: 100%;
	max-inline-size: 400px;
}
</style>

</head>

<body translate="no">
  <canvas width="400" height="400"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
      <script  >
const { Anchor, Shape, Ellipse, RoundedRect, TAU, easeInOut } = Zdog;

(() => {
  const stroke = 0.2;
  const offsets = [1, 2, 3];
  const depth = 10;
  const z = depth * -1;

  const cruiserOffset = -5;
  const cruiserAngle = TAU / 30;

  const streamsOffset = 16;
  const streamsSpeed = 0.05;
  const streamsOffsets = Array(4).
  fill().
  map((_, i, { length }) => streamsOffset / length * i);
  const streamsScale = offset => (streamsOffset - offset) / streamsOffset;

  const puffsOffset = -12;
  const puffsSpeed = 0.05;
  const puffsOffsets = Array(3).
  fill().
  map((_, i, { length }) => puffsOffset / length * i);

  const puffsOffsetX = (offset) =>
  easeInOut(1 - (puffsOffset - offset) / puffsOffset) * 8;
  const puffsStroke = offset => (puffsOffset - offset) / puffsOffset * 4;

  const colors = {
    sea: "hsl(217 57% 45%)",
    stream: "hsl(214 50% 51%)",
    hull: "hsl(180 6% 94%)",
    deck: "hsl(48 85% 61%)",
    cabin: "hsl(180 6% 94%)",
    chinmey: "hsl(180 6% 94%)",
    exhaust: "hsl(48 85% 61%)",
    windows: "hsl(245 12% 37%)",
    puffs: "hsl(225 100% 99%)" };


  const root = new Anchor();

  const streams = new Anchor({
    addTo: root,
    translate: {
      x: 7,
      y: 9,
      z: z / 2 - 0.5 } });



  const stream = new Shape({
    color: colors.stream,
    stroke: 2,
    path: [{ z: depth / 2 }, { z: depth / 2 * -1 }] });


  for (const offset of streamsOffsets) {
    stream.copy({
      addTo: streams,
      translate: {
        x: offset },

      scale: {
        z: streamsScale(offset) } });


  }

  const hull = new Shape({
    addTo: root,
    color: colors.hull,
    stroke,
    fill: true,
    path: [
    { x: 13.5, y: 2.5 },
    {
      arc: [
      { x: 13.5, y: 10 },
      { x: 6, y: 10 }] },


    { x: -6, y: 10 },
    {
      arc: [
      { x: -13.5, y: 10 },
      { x: -13.5, y: 2.5 }] }] });





  const deck = new Shape({
    addTo: root,
    color: colors.deck,
    stroke,
    fill: true,
    path: [
    { x: 3, y: 0 },
    { x: 11, y: 0 },
    {
      arc: [
      { x: 13.5, y: 0 },
      { x: 13.5, y: 2.5 }] },


    { x: -13.5, y: 2.5 },
    { x: -13.5, y: -2.5 },
    {
      arc: [
      { x: -13.5, y: -5 },
      { x: -11, y: -5 }] },


    { x: -8, y: -5 },
    {
      bezier: [
      { x: -2, y: -5 },
      { x: -2, y: 0 },
      { x: 3, y: 0 }] }] });





  const obloo = new Ellipse({
    diameter: 2,
    color: colors.windows,
    stroke: 1,
    fill: true });


  for (const x of [-10, -5]) {
    obloo.copy({
      addTo: root,
      translate: {
        x,
        y: -1,
        z: offsets[2] } });


  }

  const cabin = new Shape({
    addTo: root,
    color: colors.cabin,
    stroke,
    fill: true,
    path: [
    { x: -8, y: -5 },
    { x: -8, y: -9 },
    {
      arc: [
      { x: -8, y: -11.5 },
      { x: -5.5, y: -11.5 }] },


    { x: 1.5, y: -11.5 },
    {
      arc: [
      { x: 3, y: -11.5 },
      { x: 3, y: -9 }] },


    { x: 3, y: 0 },
    {
      bezier: [
      { x: -2, y: 0 },
      { x: -2, y: -5 },
      { x: -8, y: -5 }] }] });





  const window = new RoundedRect({
    color: colors.windows,
    stroke: 1,
    fill: true,
    width: 2.5,
    height: 2.5,
    cornerRadius: 0.5 });


  for (const [x, y] of [
  [-4.5, -8],
  [-0.5, -8]])
  {
    window.copy({
      addTo: root,
      translate: {
        x,
        y,
        z: offse.........完整代码请登录后点击上方下载按钮下载查看