var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var l=e=>t(e,"__esModule",{value:!0});var N=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),k=(e,n)=>{l(e);for(var s in n)t(e,s,{get:n[s],enumerable:!0})},g=(e,n,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of m(n))!u.call(e,c)&&c!=="default"&&t(e,c,{get:()=>n[c],enumerable:!(s=h(n,c))||s.enumerable});return e},y=e=>g(l(t(e!=null?p(d(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);var r=N((M,i)=>{i.exports=_jsx_runtime});var v={};k(v,{default:()=>x,frontmatter:()=>w});var a=y(r()),w={title:"React Native Animated Spiral",date:"2022-12-13",lastmod:"2022-12-13",tags:["react-native","react","react-native-skia"],draft:!1,layout:"PostLayout",accessCode:"b2f8469684bb4b781da921617aecd4fcb4f4b65ea949d513b2c4309e57f15953",vimeoId:"780888454"};function o(e){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",em:"em",strong:"strong",h3:"h3",math:"math",semantics:"semantics",mrow:"mrow",mi:"mi",mo:"mo",annotation:"annotation",code:"code",pre:"pre",ol:"ol",li:"li"},e.components),{VideoPlayer:s}=n;return s||b("VideoPlayer",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.h2,{id:"introduction",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#introduction",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Introduction"]}),` `,(0,a.jsx)(n.p,{children:"Before reading this tutorial, I highly recommend you to download the source code from Patreon. It will help you to understand the code better."}),` `,(0,a.jsxs)(n.p,{children:["Have you opened it? I know what you're thinking. ",(0,a.jsx)(n.em,{children:`"That's it? Just a single file needed to build this animation?"`})," Yes, that's it. I'm not kidding. This is the power of ",(0,a.jsx)(n.strong,{children:"React Native Skia"}),"."]}),` `,(0,a.jsx)(s,{video:e.vimeoId}),` `,(0,a.jsxs)(n.h3,{id:"the-approach",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-approach",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"The approach"]}),` `,(0,a.jsx)(n.p,{children:`Of course, that's not the amount of code we write that defines the complexity around it. It's the approach that we take to build the animation. First of all, we need to create a spiral. In this specific use case I was deeply inspired by the definition of logarithmic spiral.`}),` `,(0,a.jsx)(n.p,{children:(0,a.jsx)(n.span,{className:"math math-inline",children:(0,a.jsxs)(n.span,{className:"katex",children:[(0,a.jsx)(n.span,{className:"katex-mathml",children:(0,a.jsx)(n.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,a.jsxs)(n.semantics,{children:[(0,a.jsxs)(n.mrow,{children:[(0,a.jsx)(n.mi,{children:"r"}),(0,a.jsx)(n.mo,{children:"="}),(0,a.jsx)(n.mi,{children:"a"}),(0,a.jsx)(n.mo,{children:"\u22C5"}),(0,a.jsx)(n.mi,{children:"exp"}),(0,a.jsx)(n.mo,{children:"\u2061"}),(0,a.jsx)(n.mo,{stretchy:"false",children:"("}),(0,a.jsx)(n.mi,{children:"k"}),(0,a.jsx)(n.mo,{children:"\u22C5"}),(0,a.jsx)(n.mi,{children:"\u03B8"}),(0,a.jsx)(n.mo,{stretchy:"false",children:")"})]}),(0,a.jsx)(n.annotation,{encoding:"application/x-tex",children:"r = a \\cdot \\exp(k \\cdot \\theta)"})]})})}),(0,a.jsxs)(n.span,{className:"katex-html","aria-hidden":"true",children:[(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.4306em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"r"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,a.jsx)(n.span,{className:"mrel",children:"="}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.4445em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",children:"a"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,a.jsx)(n.span,{className:"mbin",children:"\u22C5"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,a.jsx)(n.span,{className:"mop",children:"exp"}),(0,a.jsx)(n.span,{className:"mopen",children:"("}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.03148em"},children:"k"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,a.jsx)(n.span,{className:"mbin",children:"\u22C5"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"\u03B8"}),(0,a.jsx)(n.span,{className:"mclose",children:")"})]})]})]})})}),` `,(0,a.jsxs)(n.p,{children:["Where ",(0,a.jsx)(n.span,{className:"math math-inline",children:(0,a.jsxs)(n.span,{className:"katex",children:[(0,a.jsx)(n.span,{className:"katex-mathml",children:(0,a.jsx)(n.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,a.jsxs)(n.semantics,{children:[(0,a.jsx)(n.mrow,{children:(0,a.jsx)(n.mi,{children:"r"})}),(0,a.jsx)(n.annotation,{encoding:"application/x-tex",children:"r"})]})})}),(0,a.jsx)(n.span,{className:"katex-html","aria-hidden":"true",children:(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.4306em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"r"})]})})]})})," is the radius, ",(0,a.jsx)(n.span,{className:"math math-inline",children:(0,a.jsxs)(n.span,{className:"katex",children:[(0,a.jsx)(n.span,{className:"katex-mathml",children:(0,a.jsx)(n.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,a.jsxs)(n.semantics,{children:[(0,a.jsx)(n.mrow,{children:(0,a.jsx)(n.mi,{children:"a"})}),(0,a.jsx)(n.annotation,{encoding:"application/x-tex",children:"a"})]})})}),(0,a.jsx)(n.span,{className:"katex-html","aria-hidden":"true",children:(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.4306em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",children:"a"})]})})]})})," is the constant, ",(0,a.jsx)(n.span,{className:"math math-inline",children:(0,a.jsxs)(n.span,{className:"katex",children:[(0,a.jsx)(n.span,{className:"katex-mathml",children:(0,a.jsx)(n.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,a.jsxs)(n.semantics,{children:[(0,a.jsx)(n.mrow,{children:(0,a.jsx)(n.mi,{children:"k"})}),(0,a.jsx)(n.annotation,{encoding:"application/x-tex",children:"k"})]})})}),(0,a.jsx)(n.span,{className:"katex-html","aria-hidden":"true",children:(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.6944em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.03148em"},children:"k"})]})})]})})," is the growth factor and ",(0,a.jsx)(n.span,{className:"math math-inline",children:(0,a.jsxs)(n.span,{className:"katex",children:[(0,a.jsx)(n.span,{className:"katex-mathml",children:(0,a.jsx)(n.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,a.jsxs)(n.semantics,{children:[(0,a.jsx)(n.mrow,{children:(0,a.jsx)(n.mi,{children:"\u03B8"})}),(0,a.jsx)(n.annotation,{encoding:"application/x-tex",children:"\\theta"})]})})}),(0,a.jsx)(n.span,{className:"katex-html","aria-hidden":"true",children:(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.6944em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"\u03B8"})]})})]})})," is the angle."]}),` `,(0,a.jsx)(n.p,{children:"In the source code, as you can, see I didn't use the polar system, but instead I used the cartesian system. Therefore we need to convert the polar system to the cartesian system."}),` `,(0,a.jsx)(n.p,{children:(0,a.jsx)(n.span,{className:"math math-inline",children:(0,a.jsxs)(n.span,{className:"katex",children:[(0,a.jsx)(n.span,{className:"katex-mathml",children:(0,a.jsx)(n.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,a.jsxs)(n.semantics,{children:[(0,a.jsxs)(n.mrow,{children:[(0,a.jsx)(n.mi,{children:"x"}),(0,a.jsx)(n.mo,{children:"="}),(0,a.jsx)(n.mi,{children:"r"}),(0,a.jsx)(n.mo,{children:"\u22C5"}),(0,a.jsx)(n.mi,{children:"cos"}),(0,a.jsx)(n.mo,{children:"\u2061"}),(0,a.jsx)(n.mo,{stretchy:"false",children:"("}),(0,a.jsx)(n.mi,{children:"\u03B8"}),(0,a.jsx)(n.mo,{stretchy:"false",children:")"}),(0,a.jsx)(n.mo,{separator:"true",children:";"}),(0,a.jsx)(n.mi,{children:"y"}),(0,a.jsx)(n.mo,{children:"="}),(0,a.jsx)(n.mi,{children:"r"}),(0,a.jsx)(n.mo,{children:"\u22C5"}),(0,a.jsx)(n.mi,{children:"sin"}),(0,a.jsx)(n.mo,{children:"\u2061"}),(0,a.jsx)(n.mo,{stretchy:"false",children:"("}),(0,a.jsx)(n.mi,{children:"\u03B8"}),(0,a.jsx)(n.mo,{stretchy:"false",children:")"})]}),(0,a.jsx)(n.annotation,{encoding:"application/x-tex",children:"x = r \\cdot \\cos(\\theta); y = r \\cdot \\sin(\\theta)"})]})})}),(0,a.jsxs)(n.span,{className:"katex-html","aria-hidden":"true",children:[(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.4306em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",children:"x"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,a.jsx)(n.span,{className:"mrel",children:"="}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.4445em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"r"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,a.jsx)(n.span,{className:"mbin",children:"\u22C5"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,a.jsx)(n.span,{className:"mop",children:"cos"}),(0,a.jsx)(n.span,{className:"mopen",children:"("}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"\u03B8"}),(0,a.jsx)(n.span,{className:"mclose",children:")"}),(0,a.jsx)(n.span,{className:"mpunct",children:";"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,a.jsx)(n.span,{className:"mrel",children:"="}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.4445em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"r"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,a.jsx)(n.span,{className:"mbin",children:"\u22C5"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,a.jsx)(n.span,{className:"mop",children:"sin"}),(0,a.jsx)(n.span,{className:"mopen",children:"("}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"\u03B8"}),(0,a.jsx)(n.span,{className:"mclose",children:")"})]})]})]})})}),` `,(0,a.jsxs)(n.p,{children:["To be more precise, we can replace ",(0,a.jsx)(n.span,{className:"math math-inline",children:(0,a.jsxs)(n.span,{className:"katex",children:[(0,a.jsx)(n.span,{className:"katex-mathml",children:(0,a.jsx)(n.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,a.jsxs)(n.semantics,{children:[(0,a.jsx)(n.mrow,{children:(0,a.jsx)(n.mi,{children:"r"})}),(0,a.jsx)(n.annotation,{encoding:"application/x-tex",children:"r"})]})})}),(0,a.jsx)(n.span,{className:"katex-html","aria-hidden":"true",children:(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.4306em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"r"})]})})]})})," with the previous value:"]}),` `,(0,a.jsx)(n.p,{children:(0,a.jsx)(n.span,{className:"math math-inline",children:(0,a.jsxs)(n.span,{className:"katex",children:[(0,a.jsx)(n.span,{className:"katex-mathml",children:(0,a.jsx)(n.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,a.jsxs)(n.semantics,{children:[(0,a.jsxs)(n.mrow,{children:[(0,a.jsx)(n.mi,{children:"x"}),(0,a.jsx)(n.mo,{children:"="}),(0,a.jsx)(n.mi,{children:"a"}),(0,a.jsx)(n.mo,{children:"\u22C5"}),(0,a.jsx)(n.mi,{children:"exp"}),(0,a.jsx)(n.mo,{children:"\u2061"}),(0,a.jsx)(n.mo,{stretchy:"false",children:"("}),(0,a.jsx)(n.mi,{children:"k"}),(0,a.jsx)(n.mo,{children:"\u22C5"}),(0,a.jsx)(n.mi,{children:"\u03B8"}),(0,a.jsx)(n.mo,{stretchy:"false",children:")"}),(0,a.jsx)(n.mo,{children:"\u22C5"}),(0,a.jsx)(n.mi,{children:"cos"}),(0,a.jsx)(n.mo,{children:"\u2061"}),(0,a.jsx)(n.mo,{stretchy:"false",children:"("}),(0,a.jsx)(n.mi,{children:"\u03B8"}),(0,a.jsx)(n.mo,{stretchy:"false",children:")"}),(0,a.jsx)(n.mo,{separator:"true",children:";"}),(0,a.jsx)(n.mi,{children:"y"}),(0,a.jsx)(n.mo,{children:"="}),(0,a.jsx)(n.mi,{children:"a"}),(0,a.jsx)(n.mo,{children:"\u22C5"}),(0,a.jsx)(n.mi,{children:"exp"}),(0,a.jsx)(n.mo,{children:"\u2061"}),(0,a.jsx)(n.mo,{stretchy:"false",children:"("}),(0,a.jsx)(n.mi,{children:"k"}),(0,a.jsx)(n.mo,{children:"\u22C5"}),(0,a.jsx)(n.mi,{children:"\u03B8"}),(0,a.jsx)(n.mo,{stretchy:"false",children:")"}),(0,a.jsx)(n.mo,{children:"\u22C5"}),(0,a.jsx)(n.mi,{children:"sin"}),(0,a.jsx)(n.mo,{children:"\u2061"}),(0,a.jsx)(n.mo,{stretchy:"false",children:"("}),(0,a.jsx)(n.mi,{children:"\u03B8"}),(0,a.jsx)(n.mo,{stretchy:"false",children:")"})]}),(0,a.jsx)(n.annotation,{encoding:"application/x-tex",children:"x = a \\cdot \\exp(k \\cdot \\theta) \\cdot \\cos(\\theta); y = a \\cdot \\exp(k \\cdot \\theta) \\cdot \\sin(\\theta)"})]})})}),(0,a.jsxs)(n.span,{className:"katex-html","aria-hidden":"true",children:[(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.4306em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",children:"x"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,a.jsx)(n.span,{className:"mrel",children:"="}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.4445em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",children:"a"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,a.jsx)(n.span,{className:"mbin",children:"\u22C5"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,a.jsx)(n.span,{className:"mop",children:"exp"}),(0,a.jsx)(n.span,{className:"mopen",children:"("}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.03148em"},children:"k"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,a.jsx)(n.span,{className:"mbin",children:"\u22C5"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"\u03B8"}),(0,a.jsx)(n.span,{className:"mclose",children:")"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,a.jsx)(n.span,{className:"mbin",children:"\u22C5"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,a.jsx)(n.span,{className:"mop",children:"cos"}),(0,a.jsx)(n.span,{className:"mopen",children:"("}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"\u03B8"}),(0,a.jsx)(n.span,{className:"mclose",children:")"}),(0,a.jsx)(n.span,{className:"mpunct",children:";"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,a.jsx)(n.span,{className:"mrel",children:"="}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"0.4445em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",children:"a"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,a.jsx)(n.span,{className:"mbin",children:"\u22C5"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,a.jsx)(n.span,{className:"mop",children:"exp"}),(0,a.jsx)(n.span,{className:"mopen",children:"("}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.03148em"},children:"k"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,a.jsx)(n.span,{className:"mbin",children:"\u22C5"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"\u03B8"}),(0,a.jsx)(n.span,{className:"mclose",children:")"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,a.jsx)(n.span,{className:"mbin",children:"\u22C5"}),(0,a.jsx)(n.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,a.jsxs)(n.span,{className:"base",children:[(0,a.jsx)(n.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,a.jsx)(n.span,{className:"mop",children:"sin"}),(0,a.jsx)(n.span,{className:"mopen",children:"("}),(0,a.jsx)(n.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"\u03B8"}),(0,a.jsx)(n.span,{className:"mclose",children:")"})]})]})]})})}),` `,(0,a.jsxs)(n.p,{children:["This two equations are the key to our animation, and are wrapped in the ",(0,a.jsx)(n.code,{children:"logarithmicSpiral"})," function."]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"logarithmicSpiral"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," angle",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," index ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," angle",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"number"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," index",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"number"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," a ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," index ",(0,a.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,a.jsx)(n.span,{className:"token number",children:"4"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," k ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"0.005"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" x",(0,a.jsx)(n.span,{className:"token operator",children:":"})," a ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"exp"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"k ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," angle",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"cos"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"angle ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," index",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" y",(0,a.jsx)(n.span,{className:"token operator",children:":"})," a ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"exp"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"k ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," angle",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"sin"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"angle ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," index",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,a.jsxs)(n.h2,{id:"the-circles-path",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-circles-path",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"The Circles Path"]}),` `,(0,a.jsx)(n.p,{children:"All this theory is great, but how can we use it in our animation?"}),` `,(0,a.jsx)(n.p,{children:"Well, we need to create a loop that iterates over the angle and calculate the position of each circle. In particular, each Circle is added to the same Skia Path."}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," path ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," circles ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Skia"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Path"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Make"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"for"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword",children:"let"})," index ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," index ",(0,a.jsx)(n.span,{className:"token operator",children:"<"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1500"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," index",(0,a.jsx)(n.span,{className:"token operator",children:"++"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," x",(0,a.jsx)(n.span,{className:"token operator",children:":"})," initialX",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," y",(0,a.jsx)(n.span,{className:"token operator",children:":"})," initialY ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"logarithmicSpiral"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" angle",(0,a.jsx)(n.span,{className:"token operator",children:":"})," initialAngle",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" index",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," x",(0,a.jsx)(n.span,{className:"token operator",children:":"})," finalX",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," y",(0,a.jsx)(n.span,{className:"token operator",children:":"})," finalY ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"logarithmicSpiral"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" angle",(0,a.jsx)(n.span,{className:"token operator",children:":"})," finalAngle",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" index",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," x ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"interpolate"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"progress",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"initialX",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," finalX",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Extrapolate"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token constant",children:"CLAMP"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," y ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"interpolate"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"progress",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"initialY",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," finalY",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Extrapolate"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token constant",children:"CLAMP"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" circles",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"addCircle"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"x",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," y",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"}),` circles `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"progress",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," initialAngle",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," finalAngle",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["As you can see, we're defining from the beginning, for each circle, the coordinates of the initial and final position. Then we interpolate the coordinates between the initial and final position using the ",(0,a.jsx)(n.code,{children:"interpolate"})," function."]}),` `,(0,a.jsxs)(n.p,{children:["This is the reason why we need to use a ",(0,a.jsx)(n.code,{children:"useComputedValue"})," hook. It will allow us to create a new path every time the progress changes."]}),` `,(0,a.jsx)(n.p,{children:"You're wondering, why do we need to create a new path every time the progress changes? Well, we need to create a new path because we need to update the coordinates of each circle. If we don't do that, the circles will not move."}),` `,(0,a.jsxs)(n.p,{children:["By checking the animation, you can see that the circles are bigger in the center. To get this behavior we need to calculate the distance of each circle from the center. Then we can use the ",(0,a.jsx)(n.code,{children:"interpolate"})," function to map the distance to the radius of the circle. This is the code that does that:"]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," path ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," circles ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Skia"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Path"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Make"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"for"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword",children:"let"})," index ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," index ",(0,a.jsx)(n.span,{className:"token operator",children:"<"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1500"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," index",(0,a.jsx)(n.span,{className:"token operator",children:"++"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," x",(0,a.jsx)(n.span,{className:"token operator",children:":"})," initialX",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," y",(0,a.jsx)(n.span,{className:"token operator",children:":"})," initialY ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"logarithmicSpiral"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" angle",(0,a.jsx)(n.span,{className:"token operator",children:":"})," initialAngle",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" index",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," x",(0,a.jsx)(n.span,{className:"token operator",children:":"})," finalX",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," y",(0,a.jsx)(n.span,{className:"token operator",children:":"})," finalY ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"logarithmicSpiral"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" angle",(0,a.jsx)(n.span,{className:"token operator",children:":"})," finalAngle",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" index",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," x ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"interpolate"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"progress",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"initialX",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," finalX",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Extrapolate"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token constant",children:"CLAMP"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," y ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"interpolate"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"progress",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"initialY",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," finalY",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Extrapolate"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token constant",children:"CLAMP"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," distanceFromCenter ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"sqrt"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"x ",(0,a.jsx)(n.span,{className:"token operator",children:"**"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," y ",(0,a.jsx)(n.span,{className:"token operator",children:"**"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," radius ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"interpolate"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" distanceFromCenter",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token constant",children:"MAX_DISTANCE_FROM_CENTER"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token number",children:"1.2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"0.2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Extrapolate"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token constant",children:"CLAMP"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" circles",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"addCircle"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"x",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," y",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," radius",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"}),` circles `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"progress",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," initialAngle",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," finalAngle",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["So how do we evaluate the ",(0,a.jsx)(n.strong,{children:"MAX_DISTANCE_FROM_CENTER"}),"? That's simply the distance from the center to the corner of the screen. We can calculate it using the Pythagorean theorem."]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," width",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," height ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Dimensions"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"get"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:"'window'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"MAX_DISTANCE_FROM_CENTER"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"sqrt"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"width ",(0,a.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"**"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"height ",(0,a.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"**"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,a.jsxs)(n.h3,{id:"behind-the-scenes",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#behind-the-scenes",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Behind the scenes"]}),` `,(0,a.jsxs)(n.p,{children:["While building this animation I didn't start with the idea of putting all the circles in the same path. I started with the idea of putting each circle in a different path by using the Circle component from Skia. ",(0,a.jsx)(n.strong,{children:"This approach was working fine with a small amount of circles, but when I increased the number of circles, the performance was really bad"}),". I tried to optimize the code, but I couldn't get a good performance. Then I decided to put all the circles in the same path, and the performance was much better."]}),` `,(0,a.jsx)(n.p,{children:"For the sake of clarity, the approach was something like this:"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token keyword",children:"new"})," ",(0,a.jsx)(n.span,{className:"token class-name",children:(0,a.jsx)(n.span,{className:"token builtin",children:"Array"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"1500"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"fill"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"_",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," index",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"AnimatedCircle"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"index"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"index",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"..."})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["To let you imagine what's the difference between the two approaches, imagine that you're using Photoshop and you want to draw ",(0,a.jsx)(n.strong,{children:"1500"})," circles. With this approach you're creating ",(0,a.jsx)(n.strong,{children:"1500"})," layers, and you're drawing each circle in a different layer. With the second approach you're creating only one layer and you're drawing all the circles in the same layer."]}),` `,(0,a.jsx)(n.p,{children:"The second approach is much more performant since, by running the animation, you're just updating a single layer."}),` `,(0,a.jsxs)(n.h2,{id:"how-to-animate-things",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-animate-things",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"How to animate things?"]}),` `,(0,a.jsx)(n.p,{children:"In the code snippet that we've seen before, we've used the progress value to interpolate the coordinates of each circle."}),` `,(0,a.jsxs)(n.p,{children:["This progress, is just a ",(0,a.jsx)(n.strong,{children:"Skia Value"}),", as are ",(0,a.jsx)(n.em,{children:"initialAngle"})," and ",(0,a.jsx)(n.em,{children:"finalAngle"}),"."]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," progress ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," finalAngle ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token constant",children:"PI"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"random"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," initialAngle ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token constant",children:"PI"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,a.jsx)(n.p,{children:"The point is that we want to:"}),` `,(0,a.jsxs)(n.ol,{children:[` `,(0,a.jsx)(n.li,{children:"Animate the progress value from 0 to 1;"}),` `,(0,a.jsx)(n.li,{children:"Set the initialAngle equal to the finalAngle value at the end of the animation;"}),` `,(0,a.jsx)(n.li,{children:"Set the finalAngle equal to a random value at the end of the animation."}),` `]}),` `,(0,a.jsxs)(n.p,{children:["All this logic is handled by the ",(0,a.jsx)(n.code,{children:"useTouchHandler"})," hook:"]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," touchHandler ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useTouchHandler"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"onStart"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" progress",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"runTiming"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"progress",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," duration",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2500"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"current",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"current ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" initialAngle",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," finalAngle",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" progress",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" finalAngle",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token constant",children:"PI"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"random"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,a.jsxs)(n.h2,{id:"final-touches",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#final-touches",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Final touches"]}),` `,(0,a.jsxs)(n.p,{children:["I've simply added a ",(0,a.jsx)(n.strong,{children:"SweepGradient"})," and a ",(0,a.jsx)(n.strong,{children:"BlurMask"})," to the animation for graphic purposes."]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Canvas"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," flex",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," backgroundColor",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'#0C0718'"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onTouch"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"touchHandler",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Group"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"transform"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" translateX",(0,a.jsx)(n.span,{className:"token operator",children:":"})," width ",(0,a.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" translateY",(0,a.jsx)(n.span,{className:"token operator",children:":"})," height ",(0,a.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Path"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"path"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"path",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SweepGradient"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"c"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token function",children:"vec"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"colors"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token string",children:"'cyan'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token string",children:"'magenta'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token string",children:"'yellow'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token string",children:"'cyan'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"BlurMask"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"blur"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"5"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsxs)(n.span,{className:"token special-attr",children:[(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),(0,a.jsx)(n.span,{className:"token value css language-css",children:"solid"}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,a.jsxs)(n.h2,{id:"conclusion",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conclusion",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,a.jsxs)(n.p,{children:["In this article, we've seen how to create a beautiful animation using Skia and React Native. We've seen how to create a path with a lot of circles and how to animate it. We've also seen how to use the ",(0,a.jsx)(n.strong,{children:"useTouchHandler"})," hook to handle the touch events."]}),` `,(0,a.jsx)(n.p,{children:"I hope you enjoyed this article. If you have any questions, feel free to ask them through Patreon."})]})}function f(e={}){let{wrapper:n}=e.components||{};return n?(0,a.jsx)(n,Object.assign({},e,{children:(0,a.jsx)(o,e)})):o(e)}var x=f;function b(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return v;})(); ;return Component;