☰

不使用 Adob​​e 的动画包

tag-icon • tag-icon beamer viewers animate
不使用 Adob​​e 的动画包

我想使用 beamer 中的 animate 包向我的班级展示动画图形，我想知道动画是否可以在他们的 Chromebook 上运行。似乎 Adob​​e 不支持 ChromeOS，那么还有其他选择吗？

这问题似乎相关，但我没有任何电影文件或 gif，只有使用 LaTeX 中的动画包制作的内容。

我知道这很可能是不可能的，但如果能提供任何帮助我都会非常感激。

答案1

1beamer类 SVG 格式文档

考虑放弃 PDF 格式而采用 SVG。

动画可在所有现代 Web 浏览器中运行，而基于 Blink 的浏览器（Chromium、Chrome、Edge、Opera）性能最佳。也可在移动设备上运行。

使用 SVG 作为输出格式，也可以使用包嵌入视频和 YouTubemedia4svg；请参阅： MP4 以无损方式呈现。 乃至Gif 动画。

点击图片在 Web 浏览器中开始演示并按F11全屏显示。使用PgUp和PgDown、鼠标左键或右键单击、或鼠标滚轮。

使用以下代码编译示例代码

latex svgbeamer
latex svgbeamer
dvisvgm --zoom=-1 --font-format=woff2 --bbox=papersize --page=1- --linkmark=none svgbeamer

示例代码svgbeamer.tex：

\documentclass[dvisvgm,hypertex,aspectratio=169]{beamer}
\usefonttheme{serif}

\usepackage{animate}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% slide navigation via keyboard and mouse left-or-right-click/mouse wheel,
% mouse cursor autohide on idle; navigation symbols <--, -->
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\usepackage{fontawesome5}
\setbeamertemplate{navigation symbols}{}
\AddToHook{shipout/before}{\xdef\currentPageNumber{\inteval{\ReadonlyShipoutCounter+1}}}
\AddToHook{shipout/foreground}{%
  \put(0,0){%
    \raisebox{-\dimexpr\height+0.5ex\relax}[0pt][0pt]{\makebox[\paperwidth][r]{%
      \normalsize\color{structure!40!}%
      \ifnum\currentPageNumber>1%
        \href{\jobname-\zeroPad{\PreviousTotalPages}{\the\numexpr\currentPageNumber-1\relax}.svg}{\faArrowLeft}%
      \else%
        \textcolor{lightgray}{\faArrowLeft}%
      \fi\hspace{0.5ex}%
      \ifnum\currentPageNumber<\PreviousTotalPages%
        \href{\jobname-\zeroPad{\PreviousTotalPages}{\the\numexpr\currentPageNumber+1\relax}.svg}{\faArrowRight}%
      \else%
        \textcolor{lightgray}{\faArrowRight}%
      \fi%
      \hspace{0.5ex}%
    }}%
  }%
  \special{dvisvgm:raw
    <style>svg{cursor: none}</style>%
    <defs>%
    <script type="text/javascript">%
    <![CDATA[%
      var cursorTimer;%
      var downOnLink=false;%
      var downOnRoot=false;%
      function islink(tg){return (tg.tagName=='a') ? true : tg.parentNode ? islink(tg.parentNode) : false;};%
      function ismmedia(tg){return (tg.tagName=='video'||tg.tagName=='audio') ? true : tg.parentNode ? ismmedia(tg.parentNode) : false;};%
      document.addEventListener('mousemove', function(e){%
        if(islink(e.target)||ismmedia(e.target)||e.target.getAttribute('class')=='annot'){%
          e.target.style.cursor='pointer';}else{e.target.style.cursor='default';}%
        try{clearTimeout(cursorTimer);}catch(err){};%
        cursorTimer=setTimeout(function(){e.target.style.cursor='none';},3000);%
      });%
      window.addEventListener('contextmenu', function(e){% capture right click
        if(!islink(e.target)&&!ismmedia(e.target)) e.preventDefault();%
      });%
      document.addEventListener('mousedown', function(e){%
        if(islink(e.target)||ismmedia(e.target)) downOnLink=true;%
        else downOnRoot=true;%
      });%
      document.addEventListener('mouseup', function(e){%
        if(downOnLink||!downOnRoot){downOnLink=false;return;}%
        downOnRoot=false;%
        \ifnum\currentPageNumber<\PreviousTotalPages
          if(!e.shiftKey&&e.button==0) document.location.replace('\jobname-\zeroPad{\PreviousTotalPages}{\the\numexpr\currentPageNumber+1\relax}.svg');%
        \fi%
        \ifnum\currentPageNumber>1
          if(e.shiftKey||e.button>1) document.location.replace('\jobname-\zeroPad{\PreviousTotalPages}{\the\numexpr\currentPageNumber-1\relax}.svg');%
        \fi%
      });%
      document.addEventListener('wheel', function(e){%
        \ifnum\currentPageNumber<\PreviousTotalPages
          if(e.deltaY>0){%
            document.location.replace('\jobname-\zeroPad{\PreviousTotalPages}{\the\numexpr\currentPageNumber+1\relax}.svg');%
          }%
        \fi%
        \ifnum\currentPageNumber>1
          if(e.deltaY<0){%
            document.location.replace('\jobname-\zeroPad{\PreviousTotalPages}{\the\numexpr\currentPageNumber-1\relax}.svg');%
          }%
        \fi%
      });%
      document.addEventListener('keydown',function(e){%
          \ifnum\currentPageNumber<\PreviousTotalPages
            if(e.key=='PageDown'||e.key=='ArrowDown'||e.key=='ArrowRight')%
                document.location.replace('\jobname-\zeroPad{\PreviousTotalPages}{\the\numexpr\currentPageNumber+1\relax}.svg');%
          \fi%
          \ifnum\currentPageNumber>1
            if(e.key=='PageUp'||e.key=='ArrowUp'||e.key=='ArrowLeft')%
              document.location.replace('\jobname-\zeroPad{\PreviousTotalPages}{\the\numexpr\currentPageNumber-1\relax}.svg');%
          \fi%
          if(e.key=='Home')
            document.location.replace('\jobname-\zeroPad{\PreviousTotalPages}{1}.svg');%
          if(e.key=='End')
            document.location.replace('\jobname-\PreviousTotalPages.svg');%
        });%
    ]]>%
    </script>%
    </defs>%
  }%
}%
% helper macro \zeroPad : zero-pads integer according to template,
% e. g. 123 --> 00123 if template is `99999`
% #1: arbitrary integer number as template specifying the
%     width, e. g. `987654' for a width of 6 digits
% #2: the number to be formatted
\def\zeroPad#1#2{\zeroPadI{\zeroTemplate{0}{#1}}{#2}}
%low level macros used by \zeroPad
\def\zeroPadI#1#2{% #1: string of zeros specifying width, #2 number
  \ifnum1#2<1#1
    \zeroPadI{#1}{0#2}%
  \else%
    #2%
  \fi%
}%
\def\zeroTemplate#1#2{% create template (string of zeros) from given num
  \ifnum10#1>1#2
    #1%
  \else%
    \zeroTemplate{0#1}{#2}%
  \fi%
}%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%required by PSTricks example
\usepackage[dvipsnames,svgnames]{pstricks}
\usepackage{pst-node,pst-plot,pst-eucl}
\usepackage{pst-solides3d}
\usepackage{multido}
\usepackage[nomessages]{fp}

\title{Using package \emph{animate} without Adobe}
\subtitle{Use a Web browser and press \framebox{F11}}
\author{AlexG}
\date{\today}

\begin{document}

\frame{\titlepage}

\begin{frame}{Animation}
  trivial example
  \begin{center}
    \begin{animateinline}[controls]{2}
      \multiframe{10}{i=0+1}{\Huge\fbox{\i}}
    \end{animateinline}
  \end{center}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%  PSTricks example by J. Gilg
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\def\R{4}            % Radius des festen Kreises (Length fixed Circle)
\def\r{1}            % Radius des abrollenden Kreises (Length rolling Circle)
\def\A{0.75}         % Abstand erzeugenden Punkt zu Mittelpunkt des abrollenden Kreises (Length Pointer)
\def\winkel{360}     % Winkel: 1 Umlauf entspricht 360 (Angle: 1 revolution corresponds to 360)
\FPdiv{\myDeltaA}{\winkel}{90}%

\def\psBall{\rput(0,0){\psSolid[
  object=sphere,r=0.35,
  hue=0 1,
  RotX=\ai\space,ngrid=12](0,0,0)}}

\def\myFigure{%
  \pstVerb{% erzeugender Punkt (parameterized Hypocycloide)
    /Xcoord \ai\space cos \R\space \r\space sub mul \ai\space \R\space \r\space sub \r\space div mul cos \A\space mul add def % (R-r)cos(a)+A cos[(R/r-1) a]
    /Ycoord \ai\space sin \R\space \r\space sub mul \ai\space \R\space \r\space sub \r\space div mul sin \A\space mul sub def % (R-r)sin(a)-A sin[(R/r-1) a]
  }%

  % erzeugender Punkt (generating point)
  \rput(0,0){\rput(!Xcoord Ycoord){\psBall}}%

  \rput(0,0){\psSolid[object=cube,ngrid=4,
     hue=0 1,
     hollow,
     a=0.5,
     RotZ=-\ai\space](0,0,0)%
  }
}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\begin{frame}[t]{PSTricks Animation}
At the end of a rainbow \dots, by Jürgen Gilg.
\begin{itemize}
  \item best viewed in Blink-based browsers, such as Chromium, Chrome, Opera
  \item frame rate printed to JavaScript console (Ctrl+Shift+I)
\end{itemize}
\begin{center}
  \raisebox{0pt}[0.65\height][0pt]{%
  \pstVerb{/clip {} def}% disable `clip' for much better SVG performance in Firefox
  \begin{animateinline}[measure,loop,controls,height=0.8\textheight]{30}
  \multiframe{90}{i=0+1}{%
    \FPeval{ai}{myDeltaA*\i}%
    \begin{pspicture}(-5,-5)(5,5)\myFigure\end{pspicture}%
  }%
  \end{animateinline}%
}
\end{center}
\end{frame}

\begin{frame}
  \begin{center}\Huge The End\end{center}
\end{frame}

\end{document}

2 动画 SVG 作为 PDF 的文件附件

animate可以导出为独立的 SVG 动画，如https://tex.stackexchange.com/a/136919。SVG 可以作为文件附件嵌入到 PDF 中，并通过单击或触摸在 Web 浏览器中运行：

\usepackage{attachfile} % or attachfile2
...
\textattachfile{animatedImage.svg}{Click!}

或不附加：

\usepackage{hyperref}
...
\href{run:animatedImage.svg}{Click!}

无论哪种情况，都必须配置操作系统/窗口管理器以使用 Web 浏览器作为打开 SVG 文件的默认应用程序。

应使用基于 Chromium 的 Web 浏览器（例如 Chrome、Opera）来查看动画 SVG，因为它们具有极好的渲染性能。洛伦兹吸引子可以作为测试例子。

3 至于 PDF，...

... 有个好消息！开源 PDF 查看器正在迎头赶上。

KDE 的 Okular 现在支持 JavaScript 驱动的动画。请参阅：

https://community.kde.org/GSoC/2019/StatusReports/Jo%C3%A3oNetto

使用 Okular-1.10 (KDE-20.04.1) 测试

我们需要一个开源 PDF 查看器，并添加开源 JavaScript 引擎。所有要素都已具备，例如 Evince、Okular、JavaScript核心来自 webkit.org（苹果网络浏览器 Safari 使用），V8（谷歌浏览器）或蜘蛛猴（火狐）。

多媒体PDF是一个很好的起点，但其集成的 JavaScript 支持还很不完善。

PDF 渲染性能要高，这对于动画来说至关重要。MuPDF 是一个渲染库。另外两个，Okular 和 Evince 是基于 Poppler 库的。

应该选择速度更快的 MuPDF 或 Poppler。

应该有人接受挑战，把一切整合在一起。

相关内容