zdog实现玫瑰花朵生长动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：zdog实现玫瑰花朵生长动画效果代码

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

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

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

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

body {
	background: hsl(214 14% 10%);
	min-block-size: 100svb;
	display: grid;
	place-items: center;
	font-family: system-ui;
}
</style>

  
  
  
</head>

<body translate="no">
  <canvas style="display: block; inline-size: 100%; max-inline-size: 350px" width="350" height="520"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
      <script  >
const { Anchor, Shape, Ellipse, Cone, TAU } = Zdog;

(() => {
  const sineIn = t => {
    const v = Math.cos(t * Math.PI * 0.5);
    if (Math.abs(v) < 1e-14) return 1;else
    return 1 - v;
  };

  const backOut = t => {
    const s = 1.70158;
    return --t * t * ((s + 1) * t + s) + 1;
  };

  const colors = {
    snowflake: [
    { h: 209, s: 77, l: 43 },
    { h: 207, s: 91, l: 64 }],

    stem: [
    { h: 339, s: 69, l: 38 },
    { h: 339, s: 76, l: 59 }],

    petals: ["hsl(339 68% 45%)", "hsl(339 67% 52%)", "hsl(339 76% 59%)"],
    soil: "hsl(339 69% 38%)",
    particles: "hsl(336 100% 94%)" };


  const strokes = {
    snowflake: 3,
    stem: 2,
    petals: 3,
    soil: 2,
    particles: 1,
    spikes: 1 };


  const copies = {
    snowflake: 22,
    stem: 80,
    particles: 10,
    spikes: 4 };


  const indexes = {
    petals: copies.stem - 1,
    particles: Array(copies.particles).
    fill().
    map((_, i, { length }) =>
    Math.floor(copies.stem / (length + 1) * (i + 1))),

    spikes: Array(copies.spikes).
    fill().
    map((_, i, { length }) =>
    Math.floor(copies.stem / (length + 1) * (i + 1))) };



  const diagonal = (55 ** 2 + 60 ** 2) ** 0.5;
  const ds = [
  "M 0 -10 -7.5 -20 0 -30 7.5 -20",
  "M 7.5 -5 15 -15 27.5 -15 20 -5",
  "M 7.5 5 15 15 27.5 15 20 5",
  "M 0 10 -7.5 20 0 30 7.5 20",
  "M -7.5 -5 -15 -15 -27.5 -15 -20 -5",
  "M -7.5 5 -15 15 -27.5 15 -20 5"];


  const d = "M 0 0 C 10 25 -10 55 0 80";

  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");

  const { h: h1, s: s1, l: l1 } = colors.snowflake[0];
  const { h: h2, s: s2, l: l2 } = colors.snowflake[1];

  const paths = ds.map(d => {
    path.setAttribute("d", d);
    const totalLength = path.getTotalLength();

    const points = Array(copies.snowflake).
    fill().
    map((_, i, { length }) => {
      const distance = totalLength / length * i;
      const { x, y } = path.getPointAtLength(distance);

      const offset = ((x + 27.5) ** 2 + (y + 30) ** 2) ** 0.5 / diagonal;
      const h = Math.floor(h1 + (h2 - h1) * offset);
      const s = Math.floor(s1 + (s2 - s1) * offset);
      const l = Math.floor(l1 + (l2 - l1) * offset);
      const color = `hsl(${h} ${s}% ${l}%)`;

      return { x, y, color };
    });

    return points;
  });

  path.setAttribute("d", d);
  const totalLength = path.getTotalLength();

  const { h: h3, s: s3, l: l3 } = colors.stem[0];
  const { h: h4, s: s4, l: l4 } = colors.stem[1];

  const points = Array(copies.stem).
  fill().
  map((_, i, { length }) => {
    const distance = totalLength / length * i;
    const { x, y } = path.getPointAtLength(distance);

    const offset = distance / totalLength;
    const h = Math.floor(h3 + (h4 - h3) * offset);
    const s = Math.floor(s3 + (s4 - s3) * offset);
    const l = Math.floor(l3 + (l4 - l3) * offset);
    const color = `hsl(${h} ${s}% ${l}%)`;

    return { x, y: y * -1, color };
  });

  const root = new Anchor();

  const snowflake = new Anchor({
    addTo: root,
    rotate: {
      x: TAU / 4 * -1 } });



  for (const points of paths) {
    for (let i = 0; i < points.length; i++) {
      const { x: x1, y: y1, color } = points[i];
      const { x: x2, y: y2 } = points[(i + 1) % points.length];
      new Shape({
        addTo: snowflake,
        color,
        stroke: strokes.snowflake,
        path: [
        { x: x1, y: y1 },
        { x: x2, y: y2 }] });


    }
  }

  new Ellipse({
    addTo: root,
    color: colors.soil,
    diameter: 4,
    stroke: strokes.soil,
    fill: true,
    rotate: {
      x: TAU / 4 * -1 } });
.........完整代码请登录后点击上方下载按钮下载查看