R-Shiny如何渲染saveHTML函数生成的带动画控件的HTML动画文件

前置准备 #

你已经通过animation包的saveHTML生成了动画对应的index.html文件及关联资源，首先调整资源存放位置：

• 在你的Shiny应用根目录下创建名为www的文件夹（如果还没有的话，该文件夹是Shiny默认的静态资源根目录）
• 将saveHTML生成的所有文件（包括index.html、自动生成的动画依赖JS/CSS文件、以及你的images文件夹）全部移入www文件夹下，你可以统一放到www/frame_animation子目录下方便管理，避免和其他资源冲突。

核心实现代码 #

Shiny端不需要额外安装依赖，直接通过原生的includeHTML加载静态HTML文件即可，完整示例代码如下：

library(shiny)

# UI定义
ui <- fluidPage(
  titlePanel("逐帧动画展示"),
  # 渲染动画HTML，可自定义宽高
  htmlOutput("frame_animation", width = "640px", height = "550px")
)

# 服务端定义
server <- function(input, output) {
  output$frame_animation <- renderUI({
    # 路径为www目录下的相对路径，如果你直接把index.html放www根目录，直接写"index.html"即可
    includeHTML("www/frame_animation/index.html")
  })
}

# 启动应用
shinyApp(ui, server)

注意事项 #

• 如果你需要在Shiny运行时动态生成动画，可将你原来的saveHTML代码放到renderUI的逻辑中，指定生成路径为www目录下的对应位置即可，生成完成后再调用includeHTML加载
• 若动画加载异常，可打开浏览器控制台检查资源路径是否正确，确保index.html中引用的图片、JS、CSS的相对路径和你存放的目录结构匹配
• 动画自带的播放控件、速度调整功能都可以正常使用，和直接打开本地HTML的效果完全一致

内容的提问来源于stack exchange，提问作者Tristan Meyers