Tpparticles 1.13.2 - jsinthebits.com

Выпуск заметок

Исправление ошибок

Критическая ошибка на опциях переопределения формы

Некоторые ручки новых функций

Многоугольная маска с несколькими путями

Этот многоугольник имеет 4 пути

Излучатели

Этот фон для входа изготовлен с излучателями частиц, круто, не так ли?

Поглотители

Вы когда -нибудь хотели черную дыру? Вот твой!

Столкновения

Столкновения в предыдущих выпусках и в частицах. Теперь они исправлены, и они хорошо выглядят. Окончательно!

Мерцание эффекта

Частицы мерцают

Предварительные репозитории

Репозитории формы

Пользовательские формы и пресеты

Tpparticles теперь поддерживает некоторые настройки 🥳.

Теперь вы можете создать свои собственные формы или пресеты

Создание пользовательской формы

Теперь вы можете создать сценарий с собственной формой для использования на своем веб -сайте или для распространения его другим. Все, что вам нужно сделать, это функция рисования, дать ему имя и использовать его в конфигурации.

Публикуйте свои формы с Tsparticles-форма тег на Npm Так что каждый может найти это.

Вы найдете образец ниже.

Спиральный образец

spiral.js – Скрипт пользовательской формы, вы можете распространять его или повторно использовать на всех ваших веб -сайтах.

// call this method before initializing tsParticles, this shape will be available in all of your tsParticles instances
// parameters: shape name, drawing method
// opacity is for shapes that can't handle the color opacity like images
tsParticles.addShape("spiral", function(context, particle, radius, opacity) {
  const shapeData = particle.shapeData;
  const realWidth = (radius - shapeData.innerRadius) / shapeData.lineSpacing;

  for (let i = 0; i < realWidth * 10; i++) {
    const angle = 0.1 * i;
    const x =
      (shapeData.innerRadius + shapeData.lineSpacing * angle) * Math.cos(angle);
    const y =
      (shapeData.innerRadius + shapeData.lineSpacing * angle) * Math.sin(angle);

    context.lineTo(x, y);
  }
});

Если вы предпочитаете использовать классы, вы можете, Ishapedrawer Интерфейс может быть реализован в вашем коде или, по крайней мере, в классе с помощью метода Нарисуйте (контекст, частица, радиус) в этом. Вы можете найти образец ниже.

class SpiralDrawer {
  draw(context, particle, radius, opacity) {
    const shapeData = particle.shapeData;
    const realWidth = (radius - shapeData.innerRadius) / shapeData.lineSpacing;

    for (let i = 0; i < realWidth * 10; i++) {
      const angle = 0.1 * i;
      const x =
        (shapeData.innerRadius + shapeData.lineSpacing * angle) *
        Math.cos(angle);
      const y =
        (shapeData.innerRadius + shapeData.lineSpacing * angle) *
        Math.sin(angle);

      context.lineTo(x, y);
    }
  }
}

// call this method before initializing tsParticles, this shape will be available in all of your tsParticles instances
// parameters: shape name, drawer class
tsParticles.addShape("spiral", new SpiralDrawer());

config.json – Раздел конфигурации, чтобы добавить в вашу конфигурацию или в вашем плагине Readme, чтобы научить других тому, как его использовать.

{
  // [... omitted for brevity]
  "particles": {
    // [... omitted for brevity]
    "shape": {
      "type": "spiral", // this must match the name above, the type works as always, you can use an array with your custom shape inside
      "custom": {
        // this must match the name above, these are the values set in particle.shapeData (the first line of the method above)
        // you can use array as value here too, the values will be random picked, like in standard shapes
        "spiral": {
          "innerRadius": 1,
          "lineSpacing": 1,
          "close": false, // this value is used by tsParticles to close the path, if you don't want to close it set this value to false
          "fill": false // this value is used by tsParticles to fill the shape with the particles color, if you want only the stroke set this value to false
        }
      }
      // [... omitted for brevity]
    }
    // [... omitted for brevity]
  }
  // [... omitted for brevity]
}

Создание пользовательской предустановки

Теперь вы можете создать сценарий со своим собственным предустановкой для использования на своем веб -сайте или для распространения его другим. Все, что вам нужно сделать, это дать ему имя и установить все варианты, необходимые для правильной загрузки. Не забудьте не импортировать все конфигурации, свойства, не необходимые не нужными, могут быть опущены.

Публикуйте свой предустановку с Tsparticles-Preset тег на Npm Так что каждый может найти это.

Вы найдете образец ниже.

Огненной образец предустановленного

Fire.preset.js – Пользовательский заданный сценарий, вы можете распространять его или повторно использовать на всех ваших веб -сайтах.

// call this method before initializing tsParticles, this preset will be available in all of your tsParticles instances
// parameters: preset name, preset partial options
tsParticles.addPreset("fire", {
  fpsLimit: 40,
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: ["#fdcf58", "#757676", "#f27d0c", "#800909", "#f07f13"]
    },
    opacity: {
      value: 0.5,
      random: true
    },
    size: {
      value: 3,
      random: true
    },
    move: {
      enable: true,
      speed: 6,
      random: false
    }
  },
  interactivity: {
    events: {
      onclick: {
        enable: true,
        mode: "push"
      },
      resize: true
    }
  },
  background: {
    image: "radial-gradient(#4a0000, #000)"
  }
});

{
  "preset": "fire" // this should match the name above, it can be used in array values too, it will be loaded in order like everyone else
}

Хотите интегрироваться в React.js?

React-Particles-JS теперь использует Tsparticles как основная библиотека.

Вы можете прочитать больше информации здесь: https://github.com/wufe/react-particles-js

Полезные ссылки

Проверьте демонстрацию здесь: https://particles.matteobruni.it

Вы хотите заменить старые, устаревшие и заброшенные частицы. Ты в нужном месте!

GitHub Repo

https://github.com/matteobruni/tsparticles

npm

https://www.npmjs.com/package/tsparticles

пряжа

https://yarnpkg.com/package/tsparticles

Jsdelivr

https://www.jsdelivr.com/package/npm/tsparticles

CDNJS

https://cdnjs.com/libraries/tsparticles

Не стесняйтесь вносить свой вклад в проект!

Демо

Вот несколько демонстраций!

Пользовательские пресеты

Посмотрите код для создания пользовательских пресетов

Пользовательские формы

Посмотрите код для создания пользовательских форм

Символы как частицы

Символы в качестве частиц:

Мыши наворота соединения

Многоугольная маска

Фоновая маска частиц

Covid-19 SARS-COV-2 частицы

Не нажимай! Не нажимай! ОЙ Нет, он распространяется !!!!

Covid-19 не смешной. Это серьезная проблема мира, и мы должны предотвратить его распространение. Если вы находитесь в рискованном районе, оставайтесь дома

Оригинал: “https://dev.to/matteobruni/tsparticles-1-13-2-5gk8”