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 {
	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 + .........完整代码请登录后点击上方下载按钮下载查看