1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1326],{67573:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>u,frontMatter:()=>a,metadata:()=>s,toc:()=>d});var i=t(85893),o=t(11151);const a={sidebar_position:5},r="Other Animations",s={id:"tutorials/dynamic/other",title:"Other Animations",description:"Touying also provides touying-reduce(==touying-diagram), which allows all animations to work natively in CeTZ and Fletcher.",source:"@site/docs/tutorials/dynamic/other.md",sourceDirName:"tutorials/dynamic",slug:"/tutorials/dynamic/other",permalink:"/docs/tutorials/dynamic/other",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/en/tutorials/dynamic/other.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Cover Function",permalink:"/docs/tutorials/dynamic/cover"},next:{title:"Handout Mode",permalink:"/docs/tutorials/dynamic/handout"}},c={},d=[{value:"Simple Animations",id:"simple-animations",level:2},{value:"<code>only</code>,<code>uncover</code> and <code>alternatives</code>",id:"onlyuncover-and-alternatives",level:2},{value:"Callback-Style Bindings",id:"callback-style-bindings",level:2}];function l(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"other-animations",children:"Other Animations"}),"\n",(0,i.jsxs)(n.p,{children:["Touying also provides ",(0,i.jsx)(n.code,{children:"touying-reduce"}),"(==",(0,i.jsx)(n.code,{children:"touying-diagram"}),"), which allows all animations to work natively in CeTZ and Fletcher."]}),"\n",(0,i.jsx)(n.h2,{id:"simple-animations",children:"Simple Animations"}),"\n",(0,i.jsx)(n.p,{children:"Here's an example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.university: *\n#import "@preview/cetz:0.5.2"\n#import "@preview/fletcher:0.5.8" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reduce.with(cetz)\n#let fletcher-diagram = touying-reduce.with(fletcher)\n\n#show: university-theme.with(aspect-ratio: "16-9")\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.img,{alt:"Touying example output",src:t(12387).Z+"",width:"3440",height:"2937"}),"\n",(0,i.jsxs)(n.h2,{id:"onlyuncover-and-alternatives",children:[(0,i.jsx)(n.code,{children:"only"}),",",(0,i.jsx)(n.code,{children:"uncover"})," and ",(0,i.jsx)(n.code,{children:"alternatives"})]}),"\n",(0,i.jsxs)(n.p,{children:["In fact, we can also use ",(0,i.jsx)(n.code,{children:"only"}),",",(0,i.jsx)(n.code,{children:"uncover"})," and even ",(0,i.jsx)(n.code,{children:"alternatives"})," within CeTZ and Fletcher with the same syntax. Since CeTZ and Fletcher are generally position based the diagram will turn out to be the same, but under the hood the act differently. ",(0,i.jsx)(n.code,{children:"only"})," drops the draw command, whereas ",(0,i.jsx)(n.code,{children:"uncover"})," covers it."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'//imports, bindings and theme\n\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import
1cetz.draw: *\n \n rect((0,0), (5,5))\n (pause,)\n\n rect((0,0), (1,1))\n\n (uncover(3, {\n rect((1,1), (2,2))\n rect((2,2), (3,3)) \n }),)\n\n (only(3, line((0,0), (2.5, 2.5), name: "line") ),)\n })\n]\n\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n spacing: 4em,\n node((0, 0), [A], radius: 2em),\n pause,\n uncover("1-2", edge((0, 0), (1, 0), "-|>", stroke: blue)),\n uncover("2-", node((1, 0), [B], radius: 2em)),\n only(3, node((0, 1), [tmp], radius: 1em, fill: orange)),\n )\n]\n'})}),"\n",(0,i.jsxs)(n.p,{children:["Note that commands like ",(0,i.jsx)(n.code,{children:"effect"})," and ",(0,i.jsx)(n.code,{children:"item-by-item"})," might not work as expected."]}),"\n",(0,i.jsx)(n.h2,{id:"callback-style-bindings",children:"Callback-Style Bindings"}),"\n",(0,i.jsxs)(n.p,{children:["If you don't want to have to write the array syntax ",(0,i.jsx)(n.code,{children:"(anim-cmd(), )"})," for CeTZ, you can redefine the commands you need via utils locally in the canvas. This way they output the format CeTZ understands natively. However, then you need to manually count your subslides via ",(0,i.jsx)(n.code,{children:"repeat"}),"!"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import "@preview/cetz:0.5.2"\n#import themes.simple: *\n#show: simple-theme.with(aspect-ratio: "16-9")\n\n#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n Cetz in Touying in subslide #self.subslide:\n\n #cetz.canvas({\n import cetz.draw: *\n let uncover = uncover.with(cover-fn: hide.with(bounds: true))\n \n rect((0,0), (5,5))\n\n uncover("2-3", {\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n })\n\n only(3, line((0,0), (2.5, 2.5), name: "line"))\n })\n])\n'})}),"\n",(0,i.jsx)(n.img,{alt:"Touying example output",src:t(99010).Z+"",width:"3440",height:"1966"}),"\n",(0,i.jsx)(n.p,{children:"(This also works for Fletcher, but there should be no reason to use it really.)"})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},99010:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/a4abf3c3-8183939f21ca3dd8ce23a71ddbeb895c.png"},12387:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/deea0f49-e8bc5675fbac21b3ee25fed8cc098833.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>r});var i=t(67294);const o={},a=i.createContext(o);function r(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.