如何在 Shiny 应用程序中加入粒子动画

Question

我想知道如何在我的 Shiny 应用程序的后台实现粒子动画，如 https://vincentgarreau.com/particles.js/

中提供的那样

下面是我到目前为止的 Shiny 代码。

ui.R

library(shiny)


 fluidPage(
    tagList(tags$head(includeCSS("CSS.css"), includeScript("particles.js"), includeScript("JS.js"))),

    ### particle.js is obtained from https://github.com/VincentGarreau/particles.js/

    div(div(id = 'particles-js'), selectInput("Dummy", "Some Dummy number:",c(1,2,3)))
)

server.R

server <- function(input, output) {

}

CSS.css

#particles-js {

  width: 100%;
  height: 100%;
  background: rgba(0,53,107, 0.3);
}

JS.js

particlesJS("particles-js", {
    particles: {
        number: {
            value: 80,
            density: {
                enable: true,
                value_area: 700
            }
        },
        color: {
            value: "#000"
        },
        shape: {
            type: "circle",
            stroke: {
                width: 0,
                color: "#000000"
            },
            polygon: {
                nb_sides: 5
            }
        },
        opacity: {
            value: 0.5,
            random: false,
            anim: {
                enable: false,
                speed: 1,
                opacity_min: 0.1,
                sync: false
            }
        },
        size: {
            value: 3,
            random: true,
            anim: {
                enable: false,
                speed: 40,
                size_min: 0.1,
                sync: false
            }
        },
        line_linked: {
            enable: true,
            distance: 150,
            color: "#000",
            opacity: 0.4,
            width: 1
        },
        move: {
            enable: true,
            speed: 6,
            direction: "none",
            random: false,
            straight: false,
            out_mode: "out",
            bounce: false,
            attract: {
                enable: false,
                rotateX: 600,
                rotateY: 1200
            }
        }
    },
    interactivity: {
        detect_on: "canvas",
        events: {
            onhover: {
                enable: true,
                mode: "grab"
            },
            onclick: {
                enable: true,
                mode: "push"
            },
            resize: true
        },
        modes: {
            grab: {
                distance: 140,
                line_linked: {
                    opacity: 1
                }
            },
            bubble: {
                distance: 400,
                size: 40,
                duration: 2,
                opacity: 8,
                speed: 3
            },
            repulse: {
                distance: 200,
                duration: 0.4
            },
            push: {
                particles_nb: 4
            },
            remove: {
                particles_nb: 2
            }
        }
    },
    retina_detect: true
});

显然，上面的代码未能将粒子动画合并到我的 Shiny 应用程序的背景中。

任何指向正确方向的指针都将不胜感激。

谢谢，

Answer 1

根据 here 中的建议，解决方案可能是：

ui.r

ui <- fluidPage(
    tagList(
    tags$head(tags$script(src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js")),
    tags$head(includeCSS("CSS.css")),
    includeScript("app.js")),   
    div(div(id = 'particles-js'), selectInput("Dummy", "Some Dummy number:",c(1,2,3)))  
)

app.js

particlesJS.load('particles-js', 'particles.json');

particles.json

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 0.8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

CSS.css

#particles-js  canvas{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,53,107, 0.3);
  z-index: -1;
}

app.js和particles.json文件需要放在Shiny的www目录下（C:\Users\<user>\Documents\R\win-library.4\shiny\www在我的Windows 7 PC）。

Answer 2

现在，您可以使用 Github 中的 shinyparticles 包来合并此类动画。

ui <- fluidPage(
       particles(),
       headerPanel("This is a sample app")
      )
server <- function(input, output, session){}

shinyApp(ui, server)

如何在 Shiny 应用程序中加入粒子动画

How to incorporate Particle animation in the Shiny app

javascript

r

shiny

particles.js