Seta de tempo com "posição atual" evoluindo com número sobreposto

Question

Estou mostrando slides onde mostro a evolução do tempo através de instantâneos. Cada instantâneo corresponde a um horário específico.

Gostaria de mostrar uma seta do tempo (verticalmente ao lado) com marcadores correspondentes a cada um dos pontos no tempo (espaçados desigualmente). Em cada sobreposição, um desses marcadores é preenchido de forma sólida e a hora atual é especificada, enquanto os outros marcadores são abertos (círculos vazios).

Acho que posso fazer a versão não aminada facilmente com tikz, mas não tenho certeza de como ajustar o estilo dos elementos e a presença do texto do nó dependendo do número da sobreposição.

Aqui está um MWE para uma timearrow estática:

\documentclass[tikz,border=3mm]{standalone}
\usetikzlibrary{arrows.meta}
\begin{document}
\begin{tikzpicture}
  \def\axscale{-0.02}
  \def\thex{0}
  \def\they{0}
  \def\prevy{0}
  \def\times{{-5,2, 12, 22, 32, 44, 76, 116, 182, 300,307}}
  \def\maxt{9}
  \foreach \it in {1,...,\maxt} {
        \pgfmathparse{\axscale*\times[\it-1]}
        \pgfmathsetmacro{\prevy}{\pgfmathresult}
        \pgfmathparse{\axscale*\times[\it]}
        \pgfmathsetmacro{\they}{\pgfmathresult}
        \draw[-{Circle[open]}] (\thex,\prevy) -- (\thex,\they);
        \node[right,anchor=west] at (\thex,\they) {
            $t=\pgfmathparse{\times[\it]}
            \pgfmathprintnumber[    % Print the result
                fixed,
                fixed zerofill,
                precision=0,
                assume math mode=true
            ]{\pgfmathresult}
            $};
  }
  \pgfmathparse{\axscale*\times[\maxt]}
  \pgfmathsetmacro{\prevy}{\pgfmathresult}
  \pgfmathparse{\axscale*\times[\maxt+1]}
  \pgfmathsetmacro{\they}{\pgfmathresult}
  \draw[->] (\thex,\prevy) -- (\thex,\they);
  %\draw(\thex,\prevy) -- (\thex+5,\they);
\end{tikzpicture}
\end{document}

Portanto, os elementos a serem animados são Circle[open]e se o t=...rótulo deve ser exibido.

Answer 1

Acredito que você obteve sua resposta, ou seja, use camadascomTikZ, e ambas as respostas mostram como se pode fazer isso.

Quero mostrar uma maneira diferente de desenhar essa linha do tempo usando algumas guloseimas que o TikZ tem a oferecer, principalmentea /tikz/ychaveonde você pode alterar o comprimento e a direção dosimeixo doxyzsistema de coordenadas (aquele sem unidades).

Em vez de usar \axscalevocê pode simplesmente definir ycomo -0.02cm(onde o padrão é 1cm) e o TikZ multiplica seu valor para transformá-lo notelasistema de coordenadas (aquele com unidades ondesimainda aponta para cima).

Então, há ochainsbiblioteca que na verdade só estou usando para unir nós por não tê-lová à qualquer lugar. Para isso configurei um ponto inicial que está 1mmacimat= 0 e também adicione um último ponto que esteja sempre 1,4mm abaixo do últimot. (Se você precisar que o início superior da linha esteja a uma distância fixa acima do primeirotum ajuste é necessário aqui.) O último também é unido ->para obtermos a ponta real da seta.

Falando em pontas de flecha, enquanto oCircledicaparece uma coisa legal, eles apenas tocam a coordenada especificada em vez de ficarem centralizados neles. Isso pode serfixo, embora eu apenas usasse nós circulares aqui.

Para conscientizar o projetor de diagramas, estou roubando a <.>sintaxe doA resposta de Sam Carterter olabelaparecem ao mesmo tempo que o preenchimento do nó. Como estou usando um nó circular como referência em vez de uma ponta de seta, o nó ficará muito melhor alinhado na minha opinião.

Também poderíamos adicionar o labelao fill, ou seja

alt=<+>{fill, label={$t = \t$}}{}

embora isso faça a imagem saltar, a menos que o rótulo não contribua mais para a caixa delimitadora.
Como a visible onsolução overlay-beamer-stylesdeixará texto oculto no quadro (que pode ser selecionado e copiado), estou usando o próprio beamer \uncoverpara ocultar o texto.

Código

\documentclass{beamer}
\usepackage{tikz}
\usetikzlibrary{arrows.meta, chains, overlay-beamer-styles}
\begin{document}
\begin{frame}
\begin{itemize}[<+->]
\item First.
\item Second.
\end{itemize}

\begin{tikzpicture}[
  y=-.02cm, thick, label position=right, start chain = going {},
  dot/.style={circle, draw, inner sep=+0pt, minimum size=+1.3mm}]
\coordinate[on chain]() at (0, 1mm); % a start (for the line)
\foreach \t in {2, 12, 22, 32, 44, 76, 116, 182, 300}
  \node[dot, on chain, join, alt=<+>{fill},
    label/.expanded={$\uncover<.>{t = \t}$}, % no hidden text in output
%    label={[visible on=<.>]$t = \t$},       % hidden text in output
  ] at (0, \t) {};
% and an end that is below the last dot
\coordinate[on chain, join=by ->]() at ([yshift=-1.4mm] chain-end.south);
\end{tikzpicture}
\end{frame}
\end{document}

Saída (clique para versão completa)

Answer 2

Você pode aproveitar o fato de que comandos tikz, como \draw, reconhecem sobreposição:

\documentclass{beamer}
\usepackage{tikz}
\usetikzlibrary{arrows.meta}

\begin{document}
\begin{frame}
\begin{tikzpicture}
  \def\axscale{-0.02}
  \def\thex{0}
  \def\they{0}
  \def\prevy{0}
  \def\times{{-5,2, 12, 22, 32, 44, 76, 116, 182, 300,307}}
  \def\maxt{9}
  \foreach \it in {1,...,\maxt} {
        \pgfmathparse{\axscale*\times[\it-1]}
        \pgfmathsetmacro{\prevy}{\pgfmathresult}
        \pgfmathparse{\axscale*\times[\it]}
        \pgfmathsetmacro{\they}{\pgfmathresult}
        \draw[-{Circle[open]}] (\thex,\prevy) -- (\thex,\they);
        \draw<+(2)>[-{Circle}] (\thex,\prevy) -- (\thex,\they);
        \node<.(2)>[right,anchor=west] at (\thex,\they) {
            $t=\pgfmathparse{\times[\it]}
            \pgfmathprintnumber[    % Print the result
                fixed,
                fixed zerofill,
                precision=0,
                assume math mode=true
            ]{\pgfmathresult}
            $};
  }
  \pgfmathparse{\axscale*\times[\maxt]}
  \pgfmathsetmacro{\prevy}{\pgfmathresult}
  \pgfmathparse{\axscale*\times[\maxt+1]}
  \pgfmathsetmacro{\they}{\pgfmathresult}
  \draw[->] (\thex,\prevy) -- (\thex,\they);
  %\draw(\thex,\prevy) -- (\thex+5,\they);
\end{tikzpicture}
\end{frame}
\end{document}

Answer 3

Usando a excelente overlay-beamer-stylesbiblioteca, você pode fazer:

\documentclass{beamer}
\usepackage{tikz}
\usetikzlibrary{arrows.meta}
\usetikzlibrary{overlay-beamer-styles}

\begin{document}
\begin{frame}

\begin{tikzpicture}
  \def\axscale{-0.02}
  \def\thex{0}
  \def\they{0}
  \def\prevy{0}
  \def\times{{-5, 2, 12, 22, 32, 44, 76, 116, 182, 300, 307}}
  \def\maxt{9}
  \foreach \it in {1,...,\maxt} {
        \pgfmathparse{\axscale*\times[\it-1]}
        \pgfmathsetmacro{\prevy}{\pgfmathresult}
        \pgfmathparse{\axscale*\times[\it]}
        \pgfmathsetmacro{\they}{\pgfmathresult}
        \draw[alt={<\it>{-{Circle[]}}{-{Circle[open]}}}] (\thex,\prevy) -- (\thex,\they);
        \node[right,anchor=west] at (\thex,\they) {
            $t=\pgfmathparse{\times[\it]}
            \pgfmathprintnumber[    % Print the result
                fixed,
                fixed zerofill,
                precision=0,
                assume math mode=true
            ]{\pgfmathresult}
            $};
  \pgfmathparse{\axscale*\times[\maxt]}
  \pgfmathsetmacro{\prevy}{\pgfmathresult}
  \pgfmathparse{\axscale*\times[\maxt+1]}
  \pgfmathsetmacro{\they}{\pgfmathresult}
  \draw[->] (\thex,\prevy) -- (\thex,\they);
  }
  %\draw(\thex,\prevy) -- (\thex+5,\they);
\end{tikzpicture}

\end{frame}
\end{document}

Ou você pode substituir alt={<\it>{-{Circle[]}}{-{Circle[open]}}}por alt={<\it->{-{Circle[]}}{-{Circle[open]}}}(ou seja, adicionar um -after \it) se quiser manter os pontos anteriores preenchidos.