►
From YouTube: Using Abstract Algebra to derive a better Animation Library / Brandon Kase (O(1) Labs)
Description
Saint AppsConf 2019
21 и 22 октября 2019, Санкт-Петербург
Подробности и билеты на сайте https://appsconf.ru/spb/2019
AppsConf 2018
Зал «Зал 2. Без тормозов»
8 октября, 12:00
Тезисы и презентация:
http://appsconf.ru/2018/abstracts/3724
Designing simple and expressive libraries is hard, but is a worthy goal. It's too easy to accidentally add complexity. Math can fix that. Math can give us guide-rails that point us to an ideal simple and expressive design. In this talk, we'll use basic abstract algebra to guide us toward a simple and expressive animation library. We'll use animations to help us understand abstract algebra as we discover the true algebraic structure of animations. Only after thinking hard about the structure, do we begin an implementation. In the end, I'll present some examples of working with this animation library we derived over the talk.
--------
Нашли ошибку в видео? Пишите нам на support@ontico.ru
A
What's
up
so
yeah
I
I
work
on
a
cryptocurrency
protocol
called
coda
now.
So,
if
you
want
to
talk
to
me
about
that,
come
up
to
me
or
we
can
talk
about
animations
or
we
can
talk
about
functional
programming,
I
like
all
that
stuff,
so
algebraic
animations,
are
you
ready
before
we
get
into
algebra?
Let's?
A
Let's
just
talk
about
animations,
so
they're
important
right,
they're
important,
because
if
we
do
them
right,
we
make
our
apps
fun
to
use,
and
if
our
apps
are
fun
to
use,
then
people
will
use
them
and
your
product
will
be
successful.
Yadda,
yadda
yadda,
but
specifically
you
can't
just
throw
animations
everywhere
without
thinking
you
have
to
be
principled.
A
You
have
to
be
consistent,
it's
extremely
important,
so
you
know
decent
sized
organizations
a
lot
of
them
have
this
sort
of
design
language
built
out
where
you
know
this
is
the
way
we
fade
out
it
lasts
for
this
long.
It
has
this
easing
curve.
This
is
the
way
we
translate.
This
is
the
way
we
rotate,
etc
and
and
I
think
enforcing.
That
is
a
little
bit
hard
right
now
and
if
we
thought
a
little
bit
more
about
our
animations,
maybe
we
could
do
better
so
anyway.
Keep
that
in
mind.
A
I
want
to
use
this
simple
animation
as
a
our
playground,
all
right.
So
it's
it's
complicated
enough
to
illustrate
some
problems
with
maybe
existing
animation
api's
on
iOS,
but
simple
enough
that
we
have
time
to
talk
about
it.
So
if
we,
if
we
look
what's
going
on
first
well,
let's
wait
for
it
to
finish
right.
First,
we
fade
in
two
views.
We
shrink
a
circle,
we
rotate
a
square
and
then
we
grow
the
circle
and
we
rotate
back.
Okay,
it's
very
simple
I
think,
there's
a
natural
way
to
describe
this.
A
So
this
this
sequencing,
I'm
gonna,
denote
with
multiplication
alright,
but
you
know
if
I
didn't
use
those
operators.
This
is
sort
of
like
a
natural
way
to
explain
an
animation
right
like
maybe
you
could
get
this
from
your
designer.
Why
is
this
a
good
way
to
describe
things?
Well,
we
can
think
about
the
pieces
separately.
We
think
about
the
left
on
the
left.
We
think
about
the
right.
A
We
can
have
two
different
engineers
build
those
we
can
have
a
third
engineer
combine
the
pieces
later,
there's
nothing
about
the
left
and
the
right
that
leaks
into
the
notion
of
running
them.
At
the
same
time,
I
don't
care
if
the
animation
is
on
different
views
like
if
the
left
is
on
one
view.
The
right
is
on
another
view:
I,
don't
care
if
it's
two
properties
on
the
same
view,
it
shouldn't
matter
right,
I
just
want
to
combine
them
and
and
being
able
to
not
care
about
the
sort
of
underlying
pieces
for
animation.
A
Just
makes
it
easy
to
build
complex
things
and
make
it
easy
to
refactor
it's
scales.
We
can
have
multiple
engineers
look
at
it.
We
can
have
you
over
multiple
months.
Look
at
it
and
I
have
a
talk
where
I
go
more
into
this,
but
you
can
you
can
click
on
that
later,
so
this
description,
I
say
is
natural
and
scalable.
Alright,
hopefully
you
you
believe
me
so
so
remember
this
is
describing
this
animation.
It's
pretty
straight
forward.
We're
fading
in
shrinking
a
circle
rotating
a
square
and
going
back.
Alright,
it
should
be
easy
to
build.
A
It
should
be,
let's
try
and
build
it
on
iOS,
let's
use
UI
view
animate.
First,
so
I
want
to
shrink
a
circle
from
100
to
10,
with
an
easing
out
curve.
Okay,
we
do
UI
view
dot,
animate
and
Xcode.
We
get
some
autocomplete.
You
know
we
pick
an
overload.
This
one
looks
nice.
We
can
specify
an
ease
and
out
curve
you
pass
what
you
want
to
do
to
this
animation
block
I'm,
hiding
it
behind
a
function,
because
it's
not
important
and
we
have
a
completion.
A
So
this
this
is
like
how
you
do
animations
with
UI
view,
animate
and
and
when
the
instruction
pointer
hits
this
line
of
code,
the
animation
happens,
and
maybe
that's
what
you
want,
but
that's
not
what
I
want
I
what
what
we
want
to
sort
of
build
out.
The
animation
as
described
is
a
way
to
refer
to
this
thing
and
use
it
multiple
times,
so
we
can
wrap
it
in
a
function
to
do
that,
so
we
can
wrap
it
in
a
function
called
left.
A
Let's
say,
and
this
is
the
left
animation
and-
and
you
know,
maybe
we
also
want
to
pass
a
completion
Handler
through,
so
that
we
can
change
something
on
the
end
of
this.
So
that's
the
left,
the
right.
We
want
to
rotate
a
square
from
0
to
2pi
degrees,
with
a
high
ease
out
curve,
maybe
with
custom
control
points.
Ok,
so
we
have
this
boilerplate.
We
already
figured
out.
We
do
UI
view
animate,
hey,
we
autocomplete
there's
an
ease
out
curve
and
we
say
what
we
want
to
do
in
the
animation
block.
A
We've
passed
the
completion
Handler
through,
but
this
is
not
what
we
want.
Okay,
this
is
not
what
we
want,
because
we
want
custom
control
points.
We
don't
want
apples
ease
out
curve.
We
want
our
designers
ease
out
curve.
How
do
we
do
that?
We
use
CA
media
timing
function.
We
pass
it
a
bunch
of
control
points,
it's
cut
off
because
it's
that's
the
point
right.
It's
is
a
long
function
name.
Then
we
set
some
global
mutable
state
because
who
doesn't
love
global
mutable
state.
We
begin
to
see
a
transaction.
A
We
set
our
timing
function,
we
do
what
we
want
to
do
when
we
commit-
and
this
will
this
will
do
what
we
want:
I'm,
not
a
fan
of
side-effects,
but
whatever
cool,
let's
think
about
parallel
composition.
So
I
just
want
to
reiterate
nothing.
You
know
I
shouldn't
have
to
care
if
we're
running
in
parallel,
doing
two
animations
on
the
same
view
or
on
different
views
in
this
case
we're
growing
a
circle
and
fading
out
at
the
same
time-
and
this
is
what
it
looks
like
right,
UI
view
animate,
it
tries
to
make
this
easy.
A
You
can
just
set
the
properties
you
want
to
set,
and
you
know
if
you
want
to
do
multiple
things.
You
set
multiple
properties.
This
is
what
they
tell
you
right,
but,
okay,
let's
let's
try
it
well.
We
want
to
do
it
with
this
left
and
right
we
define
before
and
we
want
to
loop
it.
Okay,
we
can
call
our
functions
that
we
wrote,
but
that's
not
right.
You
know
this.
This.
These
functions
call
UI
view
animate
inside
of
themselves,
so
we
could
rip
that
out.
A
But
then
we
have
to
use
the
same
easing
curve
for
the
two
animations
and
and
that's
not
what
we
want
either.
So
what
we
can
do
is
we
can
make
a
function
again
and
and
then
just
call
the
animations
on
the
two
views
and
then
you
know,
and
then
we
pass
a
completion
Handler
through
and
we
need
to
make
sure
to
feed
it
to
the
one
that
finishes
last,
and
so
we
sort
of
break
this
black
box
in
in
this
case
the
animations
are
the
same.
A
You
know
run
at
the
same
time,
so
it's
fine
and
then
and
then
okay.
Now
we
want
to
loop
it.
We
want
to
run
it
backwards.
How
do
we
do
that?
I?
Don't
know
I
I,
don't
think
you
can
not
not
as
described
like
this.
So
all
right,
let's,
let's
look
at
sequential
composition,
so
here
it's
acting
on
the
same
view
again
where
this
example
we're
growing
a
circle
and
fading
it
out.
Okay,
we're
doing
two
animations,
but
we're
thinking
about
it
as
one.
A
This
is
what
I
mean
so
in
what
we
actually
want
to
do
for
for
this
animation
that
we're
trying
to
build.
We
want
to
fade
in
all
the
views
and
then
do
all
that
other
stuff
that
we
already
talked
about.
Well,
we
can
just
use
a
callback,
so
if
we
have
this
fada
and
all
that
we
build
in
a
similar
way,
we
can
pass
things
through
and
just
tab
a
bunch
of
times.
A
If
we
want
to
chain
lots
of
things
and-
and
you
know,
there's
even
a
way
around
this
there's
this
anime
keyframes
thing
and
you
can
feed
it
a
bunch
of
keyframes
and
then
you
don't
have
to
tap
when
you
want
to
run
a
bunch
of
things
in
sequence.
But
this
is
horrible
and
I'll.
Tell
you
why
I
think
it's
horrible,
it's
not
obviously
horrible,
but
but
if
you,
if
you
think
about
it
for
a
second,
it's
it's
a
nightmare.
Okay,
so
we
have
relative
start
time
and
relative
duration
on
all
of
the
keyframes
right.
A
What
does
this
mean?
This
means
I
have
to
know
the
entire
timeline
of
my
animation.
Okay,
so
get
rid
of
the
black
box.
I
need
to
know
how
long
each
each
bit
is
and
let's
say,
I
want
to
refactor
and
move
something
at
the
end
to
the
front.
Well,
I
have
to
change
all
the
numbers
again,
so
that's
kind
of
bad
and
then
all
right,
even
besides
that,
let's
say
I
define
some
animation
sequencing.
A
bunch
of
things
with
keyframes
and
I
want
to
do
that
as
a
keyframe.
A
Before
something
else
turns
out,
you
can't
do
that,
so
these
we
say
it
doesn't
compose,
doesn't
compose
at
all.
So
this
is
horrible
right.
This
simple
animation,
just
totally
kind
of
fell
apart.
We
couldn't
do
the
looping
and
we
had
lots
of
nastiness,
because
the
side
effects
side
effects
are
the
devil,
they're
bad,
and
if
we
had
this
callback
based
sequencing
and
we
couldn't
use
the
anim
keyframes
to
get
around
it
and
I
think
the
reason
that
this
is
hard
to
use,
at
least
in
the
way
that
I'd
like
to
use.
A
It
is
because
animations
aren't
values
in
in
in
this
case.
Well,
we
had
to
wrap
it
in
a
function
to
sort
of
make
it
a
value,
but
but
we
can't
manipulate
animations
uiview
animate
just
runs
when
the
instruction
pointer
hits
it.
So
there's
this
other
thing
there's
core
animation.
This
is
the
like
advanced
thing
from
Apple
there's.
This
implied
trade-off
between
like
power
and
easiness.
So
this
is
the
powerful
thing.
Let's,
let's
do
it
again?
Let's,
let's
try
the
thing
on
the
Left.
A
We
want
to
shrink
a
circle
from
100
to
10,
with
an
easing
out
curve.
All
right,
we
make
a
see
a
basic
animation.
We
set
the
timing
function,
there's
a
constant
for
what
we
need.
That's
great.
We
can
set
from
a
to
a
duration,
okay
and
then
you
know
we
also
have
this
extra
stuff,
yeah,
that's
yellow
and
it's
hard
to
see.
That's
the
point.
You
know
that
was
not
the
point
it's
an
accident,
but
but
it
doesn't
matter
right.
The
point
is
there's
just
extra
stuff.
A
We
have
to
stick
on
the
end
and
you
can
say:
okay.
Well,
you
don't
have
to
well
I,
say
99%
of
the
time
you
want
to
what
that
does
that
fill
mode
for
words
and
that
Buhl
that
you
have
to
set
also
when
you
set
fill
mode
for
words,
it
makes
it
so
when
the
animation
finishes,
we
sort
of
update
our
model
to
that
value
which
is
honestly
like
when
do
not
want
that.
Personally,
okay,
and
and
but
what's
cool
about
this,
we
have
a
value.
A
Now
we
have
a
see
a
animation,
it's
a
thing,
it's
a
thing:
we
can
poke
and
manipulate,
and,
and
that
will
give
us
more
power
and
it
doesn't
run
until
we
add
it
to
a
layer.
So
great,
that's
good!
We
can
do
the
thing
on
the
right.
It
works
fine,
whatever,
let's
not
talk
about
it
all
right,
we
have
values,
it
would
be
cool
if
we
could
define
a
function
that
takes
two
CIA
animations
and
returns
a
new
CIA
animation
that
runs
the
both
animations
at
the
same
time
yeah.
A
A
Well,
we
can
make
a
function
again.
We
can
because
they're
these
values
we
poked
at
them-
and
we
say:
hey
you
should
auto
reverse,
and
then
we
get
that
looping
and
and
again
we.
We
add
it
to
the
the
layers
that
we
care
about.
So
we
add
the
left
of
the
circle
and
the
right
to
the
square,
but
this
this
isn't
so
great.
Why
is
this
not
great?
We,
we
destructively
modify
the
animations
that
we
defined
earlier.
A
This
is
not
good
for
code
reuse,
you
know
if
someone
else
is
using
left
and
right
what
what
happens
and
and
we
didn't
really
black
box
here.
We
sort
of
I
mean
it's
the
same
sort
of
thing:
we're
digging
in
and
mutating
these
underlying
animations
I,
don't
like
it
sequential
composition,
all
right
specifically.
What
we're
trying
to
do
here
is
fade
in
all
the
views
and
then
run
some
animations.
So
there
is
this
thing
see
a
animation
group.
It
seems
like
the
solution
to
this
problem.
We
can
feed
it
an
array
of
CI
animations.
A
We
have
to
open
our
black
box
a
little
bit
because
we
have
to
set
a
duration,
but
you
would
expect
this
to
work,
maybe
and-
and
it
maybe
kind
of
does
but
well
it
doesn't.
It
doesn't
for
a
couple
of
reasons.
One
we
cannot.
We
couldn't
create
a
CI
animation
for
that.
Animations
variable
we
had
to
make
it
a
function.
So,
like
you
know
what
are
we
even
doing?
But
let's
say
we
could
this
won't
work,
because
the
underlying
CIA
animations
act
on
different
views,
and
so
that's
a
no-no.
A
When
you
see
a
animation
group
cool,
how
do
we
actually
do
sequential
composition?
Well,
we
again
destructively
modify
the
left
and
the
right
we
set
the
begin
time.
We
set
it
to
now
the
ca
current
media
time
plus
the
duration
of
the
fade.
Then
we
take
the
circle
in
the
square
and
we
add
the
fade
to
those
layers
of
the
underlying
views
and
then
we
call
our
function
and
our
function
uses
left
and
right
and
we've
already
mutated
it
to
change
its
begin
time.
A
Now
we're
going
to
mutate
it
and
set
Auto
reverses
on
it
and
then
execute
it,
and
it's
just
a
pile
of
mush.
It's
all
side
effects
and
Global's
and
whatever,
but
at
least
we
got
it
all
right,
so
yeah
side
effects
hidden
state
bad.
This
is
a
recipe
for
not
reusable
code,
a
recipe
for
things
that
don't
scale
it's
a
recipe
for
making
composition,
hard
and
ad
hoc
and
making
it
so
it's
hard
to
reuse
code
and
that's
bad.
So
this
thing
was
supposed
to
be
easy.
It's
look
at
it.
A
A
If
we
linearly
interpolate
from
100
to
10
in
two
seconds
and
then
let's,
let's
stretch
time
in
the
beginning,
squeeze
it
in
the
middle
stretch
it
at
the
end,
hey
look
it's
easing
out
now
and
then,
as
values
are
pumping
out
just
feed
them
into
something
that
resizes
a
circle.
Okay,
let's
look
at
the
right.
I
want
to
rotate
a
square
from
0
to
2pi
degrees,
with
a
high
ease
out
curve
with
specific
parameters.
A
A
Okay,
how
do
we
fade
in
all
the
views?
We
didn't
even
talk
about
this
and
in
the
other
places,
but
it's
pretty
simple.
We
linearly
interpolate
between
0
and
1.
We
can
adjust
time.
We
can
squeeze
it
and
stretch
it
get
our
easing
curve
that
we
care
about
and
then
we
can
bind
the
values
to
the
Container
parent.
It's
it's
alpha
property
and
that
will
you
know,
make
it
change
opacity
over
time.
So
how
do
we
compose?
How
do
we
say?
I
have
a
left,
animation
and
a
right
animation.
A
I
want
to
run
them
at
the
same
time
and
loop.
It
once
well.
We
can
say,
left
+
right,
dot,
looped,
that's
that's
nice.
What
about
I
want
to
fade
in
and
then
do
a
bunch
of
stuff
well
I
fade
in
and
then
do
the
stuff.
It's
the
same.
So
all
the
code
for
that
animation
fits
on
a
slide
and
and
that's
good,
so
so
this
the
code
mirrors
the
natural
description,
the
one
that
is
scalable.
A
This
is
cool.
Animations
are
values
right
like
in
core
animation,
but
unlike
in
core
animation,
they're
immutable
values,
and
we
never
have
to
poke
them
in
such
a
way
that
that
mutates
them
and
because
of
this
they
compose
cleanly
and-
and
so
that
leads
to
a
nice,
scalable
abstraction
and
there's
this
really
rich
algebraic
structure,
underneath
this
and
and
and
that
I
think
sort
of
helps,
it's
a
helps.
A
The
the
the
power
you
know,
I
it's
kinda
hard
to
expect,
but
I'm
gonna
go
in
a
little
little
aside
here
and
just
talk
about
library,
design
in
general
I
mean
we
can
still
think
about
animations,
but
I
I.
Think
because
this
this
scalability
I
keep
saying
scalability
is
so
so
nice,
you
know
it's.
It
makes
your
code
easy
to
refactor.
It
makes
it
easier
to
do
brain
dump,
so
it
makes
it
easier
for
you
to
to
change.
Well,
let's
refactoring,
but
you
know
it's
it's
good,
so
it
lets
us
define
animations
on
one
slide.
A
I
think
it's
important
to
think
about
composition.
First,
when,
when
you're
thinking
about
a
library
when
you're
designing
an
API,
so
so,
let's
not
think
about
what
the
animation
is,
but
we
want
to
think
about
how
the
animation
behaves
so
typically
I
guess
with
animations.
You
can
either
combine
them
and
say
five
of
two
animations
I
can
run
them
at
the
same
time.
That's
the
plus
or
I
can
do
one
and
then
the
other
and
that's
the
the
multiply.
A
But
then
you
know
we
can
think
about
how
these
operations
behave,
and
this
is
the
the
algebra.
So
there's
this
thing,
I
call
algebra,
driven
design,
I'm
sure
someone
else's
has
called
something
like
this
that
before,
but
again,
there's
a
video
where
I
go
into
this
in
more
detail.
I
want
to
really
quickly
blast
through
these
algebraic
laws.
This
is
the
these.
Are
the
the
the
thinking
framework
behind
thinking
about
how
these
operations
behave.
So
there's
gonna
be
a
lot
of
jargon.
A
Maybe
I
heard
in
Russia
you,
you
learn
abstract
algebra
in
in
school,
like
everyone
does,
so
that's
that's
awesome.
I
wish
I'd
learned
it
in
school.
I
just
said
that
we
read
read
Wikipedia
a
lot,
but
whatever
you
just
memorize
all
these
words,
so
whatever
I'll
I'll
tell
you
okay,
so
the
first
thing.
Well,
we
have
this
binary
operation,
the
sequence.
Okay,
it's
binary.
It
acts
on
two
animations.
Well,
what
happens
if
we
want
to
combine
three
animations
in
sequence?
A
Well,
you
know
we
can
only
combine
two
at
a
time,
so
we
have
to
decide
how
to
parenthesize
so
in
in
in
all
of
these
diagrams
that
I'm
going
to
show
I
have
this
equation
at
the
bottom
to
sort
of
illustrate
what
I'm
talking
about
so
so
in
this
case
we're
growing
a
circle,
we're
turning
it
red
and
then
we're
fading
out.
Okay,
we're
doing
three
primitive
atomic
animations
and
we're
combining
them
together
into
one
so
yeah.
So
we
have
these
three
things.
We
need
to
run
this
operation
twice.
A
A
I
mean
you
just
kind
of
think
about
it,
like
I,
have
three
things
and
like
I'm
doing
them
one
after
another,
after
another,
I
can
do
like
the
first
two
and
then
the
next
one
or
like
the
first
one
and
then
the
next
two,
so
yeah
and
and
if
your
operation
has
this
property,
where
it
the
same
thing
where
it,
when
it's
parenthesized
the
first
two
or
the
second
two,
then
we
say
it's
associative,
okay
and
and
moreover,
if
it's
a
binary
operation,
then
we
say
the
sequence:
operation
forms
a
semi-group.
All
right
jargon
awesome.
A
So
now,
let's
think
about
another
next
thing
and
identity
all
right.
So
what
is
the
animation
where,
if
we
combine
it
in
the
beginning
with
anything
or
at
the
end,
with
anything
it's
as
if
we
hadn't
done
anything
at
all
right,
so
we
think
a
bit
in
this
case
we're
growing
a
circle
and
we
want
something
that
we
can
put
at
the
beginning
in
the
end
and
doesn't
change
what
growing
the
circle
means.
A
Well,
what?
If
we
coupled
duration
with
the
animation
specification?
Okay,
so
then
we
could
say
in
an
animation
with
duration,
zero
doesn't
matter
what
we're
doing
if
it
has
a
duration,
zero,
we
can
stick
it
at
the
beginning
or
the
end
in
sequence,
and
it
doesn't
change
what
the
resulting
animation
looks
like.
So
that's
our
identity
and
because
we
also
have
the
fact
that
the
sequence
is
a
semi-group.
When
we
add
the
identity,
we
now
have
a
Mon
right,
all
right
cool
cancellation.
A
Well,
we
can,
we
can
ask
ourselves
again:
is
there
something
that
when
I
combine
it
in
sequence,
I
can
get
back?
Just
this
like
special
thing
and
and
I
think
there
is.
Let's
say
we
have
a
cancelled
animation.
It's
just
a
magic
value
that
I'm
making
up
out
of
thin
air,
but
let's
say
it
existed
and
and
its
behavior
is
such
that
if
I
have
cancelled
and
I
multiply
with
anything
I
get
back,
canceled.
Okay,
why?
Why
do
you
want
this?
A
Maybe
is
what
you're
thinking
I
you
can
kind
of
think
when
you're
multiplying
integers,
sometimes
you
multiply
by
zero
on
purpose
in
your
code
right,
it's
it's
the
same
sort
of
thing
you
can
imagine.
Maybe
we
build
up
this
crazy
animation
and
then
we
have
a
conditional
and
and
in
one
branch,
the
conditional.
We
want
to
cancel
everything
and
run
nothing.
So
we
we
times
cancelled
and
the
other
branch
we
keep
it.
So
there's
there's
one
one
use
case
next,
all
right,
parallel
composition,
again
we're
adding
things
two
at
a
time.
A
We
need
to
make
a
decision.
How
do
we
parenthesize
again?
It
doesn't
matter
if
we're
doing
like
growing
a
circle,
turning
red
and
fading
out
all
at
the
same
time?
Well,
they're,
all
at
the
same
time,
so
we
can
say
like
do
these
at
the
same
time
and
the
third
one
at
the
same
time
or
the
first
one
at
the
same
time
with
the
second
two
that
are
all
at
the
same
time.
So
parallel
composition
forms
a
semi
group
all
right
again,
we
can
ask
what
is
an
identity?
A
Well,
we
already
have
this
cancelled
animation,
I,
think
that
makes
a
good
parallel
identity.
Don't
you
if
we
have
any
animation
and
we
run
it
at
the
same
time
as
a
canceled
animation,
then
we
just
see
the
thing
that
wasn't
cancelled,
right,
yeah,
but
I.
Think
that
makes
sense.
So
parallel
composition
forms
a
mono
agent
great
now
we
can
ask.
Does
it
commute?
A
A
Now
we
can
ask
the
question:
how
does
sequence
interact
with
parallel?
Well,
one
way
to
phrase
this
question
is:
does
it
distribute?
Is
it
true
that
look
at
that
equation
at
the
bottom
grow
times
the
quantity
of
red
+
fade
like
doing
turning
red
and
fading
at
the
same
time?
Is
that
the
same
as
growing
and
then
turning
red
at
the
same
time
as
growing
and
then
fading
alright?
And
we
think
you
know,
maybe
it
is
if
I
define
grow,
+
grow
to
do
the
same
thing
as
grow
by
itself.
A
So
we
have
that
extra
condition,
but
but
then
then
I
think
this
makes
sense,
and
you
know
I
didn't
pull
these
laws
out
of
thin
air
there's
sort
of
the
the
components
of
a
semi
ring
as
told
by
Wikipedia,
but
also
mathematicians,
so
a
semi
ring
has
all
of
the
all
the
qualities
that
we
sort
of
described
it
it.
So
what
is
a
semi
ring?
It's
something
that
demands
you
define
addition
multiplication,
zero
and
one
all
right.
A
In
our
case,
zero
is
going
to
be
cancelled
and
one
is
going
to
be
the
the
trivial
to
animation
that
has
no
duration,
okay
and
then
it
demands
that
all
these
operations
behave
in
the
ways
that
we
already
talked
about
and-
and
if
that's
true,
it's
a
simmer
alright.
So
this
is
really
cool.
I'm,
like
freaking
out
at
this
point
right,
because
it's
well,
the
story
is
I
was
like
hey.
Animations
should
have
this
algebraic.
You
know
this
algebraic
nice
shape.
What
what
is
that
shape?
A
A
So
now
you
use
creativity
and
you
work
with
smart
people,
so
I
met
up
with
Chris
I'd,
often
Brandon
Williams,
and
we
like
iterated
on
a
bunch
of
designs
that
they're
both
into
this
algebra
stuff
too,
and-
and
we
came
up
with
something-
that's
really
cool
I-
think
so
I
will
share
it.
Are
you
ready?
What
is
an
animation?
What
is
it
right?
What
is
it
it's
a
value
that
changes
over
time.
That's
that's
an
animation,
a
value
that
changes
over
time.
A
How
cool
is
that
it's
so
general
and
nice,
it's
a
nice
little
phrase,
but
we
can.
We
can
be
a
little
bit
more
detailed
because
we
just
did
a
bunch
of
work
to
figure
out
the
behavior
of
animations.
We
know
we
want
duration
in
there
somehow.
So
what
is
an
animation?
It's
either
a
value
that
changes
over
time,
coupled
with
a
nonzero
duration,
all
right
or
I,
cancelled
animation.
This
is
our
additive
identity
or
a
trivial
animation.
That
is
one
that
has
no
duration.
A
This
is
our
multiplicative
identity
and
our
and
our
well
yeah
or
multiplicative
identity.
The
additive
identity
is
also
our
multiplicative
Annihilator,
okay,
so
right
so
the
this
just
captures
that
that
duration
and
adds
the
cancelled.
So
now
we
can
take
this
description
and
there's
a
mechanical
way
to
transform
it
into
a
swift,
datatype
well
into
a
data
type
in
any
programming
language.
That's
good!
In
my.
You
know
for
some
definition
of
good
the
there's.
A
There's
these
tools,
there's
the
algebra
of
datatypes
in
parametric
Z
and
I-
don't
wanna
get
into
it,
but
this
is
what
it
looks
like
when
we
do
this
mechanical
transformation.
All
right.
We
have
we're
in
animation
over
what
did
I
say:
it's
a
value
changing
over
time,
a
value
okay.
So
it's
generic
over
a
the
value
cool.
It's
either
cancelled
it's
trivial
or
it's
a
runnable
animation
with
a
non-zero
duration
on
iOS.
We
can
use
CF
absolute
time
for
this
and
it's
a
value
changing
over
time.
A
Well,
that's
a
function
from
time
to
value,
but
it
turns
out
if
you
use
time
as
a
number
from
0
to
1
a
floating-point
number,
then
it's
really
useful.
So
so,
let's
say
a
function
from
0
to
1,
to
a
ok
cool.
Look
at
that!
Isn't
that
cool!
It's
it's
like!
So
so
short!
So,
what's
cool
about
this?
Alright,
it's
immutable!
That's
awesome!
Immutability
is
good.
I
mean
yell
at
me
later.
If
you
don't
think
that,
but
think
it
it's
it's
true.
Ok!
So
how
do
we
actually
get
the
animation
to
run
right?
I?
A
Guess
that's
important!
On
iOS!
We
can
use
this
thing,
see
a
display
link
and
and
that
we
can
get
a
callback
every
time
a
frame
is
painted
and
we
can
just
call
our
function
and
do
what
we
need
to
do
so
that
that's
how
you
get
animations
that
look
like
animations
that
were
all
aware
of
when
you
press
a
button.
It
does
something
cool,
but
we
can
also
call
this
function.
As
let's
say,
we
move
our
finger
across
the
screen
of
a
phone.
A
A
A
One
is
the
trivial
animation
we
already
talked
about
that
zero
is
the
canceled
animation
we
already
talked
about
that.
Then
we
can
think
about
combining
two
animations
and
sequence
left
hand,
side
on
the
right
hand,
side,
and
we
return
a
new
animation.
We
switch
if
one
of
them
is
cancelled,
it's
cancelled
because
it's
our
Annihilator.
If
one
of
them
is
trivial,
then
we
take
the
other
side
because
that's
our
identity,
then
we
could
have
two
runnable
functions
with
two
nonzero
durations
and
two
value
functions.
What
do
we
do?
A
We
sum
the
durations
because
we're
doing
you
know
this
and
then
that
and
then
one
of
them
might
be
shorter.
So
so,
let's
figure
out
you
know
what
percent
of
the
resulting
animation
is
the
first
one,
that's
the
ratio,
and
then
we
can
return
a
new
animation
that
is
runnable
whose
duration
is
the
sum
and
in
our
value
function
we're
going
to
check
the
ratio
and
if
it's
less
than
the
ratio,
we're
going
to
use
the
first
value
function
and
if
it's
bigger,
we're
gonna
use
the
second
value
function.
A
So
this
is
how
we
can
you
know
as
we're.
You
know
50%
way
through
we
switched
to
the
the
other
animation
and
then
it
essentially
runs
both
cool,
great
parallel
composition.
There's
this
extra
little
thing
like
we
said
you
know.
Well
maybe
we
didn't
say
it
yet,
but
we
need
to
be
able
to
combine
our
A's
okay,
because
this
a
is
a
generic
thing.
A
You'll
you'll
you'll
you'll
see
where
that
comes
up,
but
that's
all
that
commutative
semi-group
nonsense
means
we
want
to
implement
parallel
composition
of
two
animations
we're
returning
an
we
switch
if
it's
canceled
in
trivial,
trivial
and
canceled
or
trivial
and
trivial
return
trivial.
You
know
just
do
that.
It
makes
sense.
I
think
we
have
to
cancelled,
we
return,
canceled,
yeah,
I,
guess
0,
plus
0
is
0.
That's
kind
of
why
I
think
that
makes
sense.
Ok,
if
we
have
to
runnable
functions
with
two
nonzero
durations
and
two
value
functions.
A
Well,
we
just
take
that
okay
cool
we're
done
now.
We
validate
our
laws.
What's
cool
about
this
algebra
driven
design?
Is
your
tests
are
like
insanely
fun
to
write
and
they're
super
awesome
and
catch
every
bug?
So
you
there's
a
library
called
quick
check-in
in
quick
check.
You
can
say
you
know
for
all
X
Y
&,
Z
animations
x
times
y
times,
z,
parenthesized,
one
way
equals
x
times,
parenthesis
y
times
z.
You
know
you,
you
literally
can
write
out
the
properties,
it's
cool
and
and
then
we
have
pasted
into
the
core
of
the
library.
A
There's
one
extra
bit
that
you
need
category
theory,
that's
sort
of
I
guess
know
about,
or
whatever
I
mean,
we've
all
seen
map
before.
So
this
is
really
useful,
because
if
we
have
an
animation
that
computes
floating
point
numbers
over
time,
that's
a
value
over
time.
That's
an
animation.
I'd
say
like
maybe
you
can
print
it
out
to
console,
but
it's
not
something
we
want
to
do.
Often.
A
However,
it's
useful
maybe
to
map
that
into
something
that
sets
the
radius
of
a
circle
in
a
view,
and
then
we
actually
have
an
animation
that
we
want
to
use
so
okay.
This
is
like
the
core
of
the
all
right,
and
if
you
build
a
library
like
this,
you
can
have
a
Combinator
layer
that
you
include
in
your
library.
So,
for
example,
we
can
have
a
reverse
property.
What
does
this
do?
A
A
We
can
implement
linearly
interpolate
from
his
CG
float
to
another
CG
float
in
a
certain
amount
of
time
and
give
me
back
an
animation
of
CG
floats
that
when
you
combine
two
that
are
the
same,
they
average,
but
then
you
get
something
where
grow
grow,
plus
grow
equals
grow,
and
so
so
that's
cool,
but
yeah
this.
This
is
sort
of
the
thing,
the
library
that
you
distribute
right.
A
Other
people
download
your
library,
hopefully
whatever
and
then
what's
cool
is
you
can
have
your
design
team
or
that
one
engineer
that
works
really
closely
with
your
designers
and
doesn't
build
out
product
features
build
this
this
consistency
layer,
so
we
can
have
the
fade
out.
This
is
the
one
and
only
fade
out
that
our
app
uses
it
has
this
specific
duration.
It
has
this
specific
easing
curve
attached
to
it.
This
is
our
translate.
This
is
our
rotate
and
you
check
it
with
your
designer.
A
You
make
sure
it's
right
and
then
on
when
you're
hacking
away
on
product
features
or
someone
else's.
Maybe
someone
who
doesn't
care
so
much
about
the
the
design
guidelines
they
just
use
these
primitives
and
their
to
spec.
Naturally,
so
that's
really
cool
I
think
so
you
know
building
a
library
like
this,
you
you
empower
consumers
to
do
cool
stuff
at
this
point,
I
would
have
liked
to
maybe
show
a
complex
animation
here,
but
I'm,
not
a
designer,
so
I
did
something
else
that
I
thought
I
think
is
cool.
A
So
because
we
have
this
algebraic
structure
for
animation,
we
can
take
the
free
version
of
the
semi-ring.
We
can
make
a
free
semi-ring,
all
you
algebra
students,
maybe
remember
I
don't
want
to
go
into
it,
but
it's
a
way
to
declare
the
structure
in
such
a
way
that
we
can
inspect
it
later
and
then
we
can.
We
can
build
a
system,
as
you
see
here
where
I
can
say.
Okay,
I
have
three
actors:
I
want
to
Center
them
in
the
screen
and
then
I
want
to
to
make
this
Timeline
view.
A
That
shows
what
animation
is
happening
at
a
certain
amount
of
time
and
and
then,
as
the
animation
goes,
it
paints
in
okay-
and
this
was
really
easy
to
write.
Surprisingly
I
mean
really.
This
is
like
the
meat
of
it.
It's
this
intervals
function,
so
you
feed
it
a
free,
semi-ring
description
of
the
animation.
It
gives
you
back
an
array
of
intervals
with
a
name
and
a
start
and
end
point,
and
from
that
it's
very
easy
to
paint
the
the
timeline
as
the
animation
goes
on.
A
It's
not
easy
enough
that
you
don't
make
a
mistake
like
I
did
see
those
bottom
two.
The
way
that
it
animates
in
is
buggy
and
I
fixed
that
but
I
didn't
rerender
this
mp4
video.
But
the
point
is
whatever
it's
cool
takeaways
solving
problems
by
composing
small
independent
pieces
is
awesome,
its
natural,
its
scalable,
its
makes
it
easier
to
refactor
code.
Life
is
good,
everyone's
happy,
UI
view
animate
and
core
animation.
A
So,
like
come
talk
to
me
and
we
can
talk
about
other
cool
applications
of
this
and
these
types
of
libraries
empower
your
API
consumers
to
not
just
build,
let's
say
complicated
animations
in
a
way
that
makes
your
code
not
complicated,
but
also
you
know
you
can
like
make
a
free
structure
in
Traverse
it
to
build
out
that
those
diagrams
cool.
Thank
you.
That's
my
name.
That's
my
twitter.
Here's
a
link
to
the
library
there's
a
link
to
the
slide
deck.
D
C
Advised
to
come
here
never
regret,
I
am
previously
cocos2d
developer.
You
probably
know
it's
like
famous
game
in
giant
and
in
gaming
giants.
There
is
natural
concept
of
time
like
there
is
a
run
loop
that
comes
with
the
like
timeframe,
and
you
update
everything
to
the
time
point
of
the
time
and
we
had
like
the
concept
of
actions
like
with.
C
There
is
an
action
that
goes
like
moving
to
the
stuff
and
it's
just
funny
how
I
actually
did
basically
just
the
same
that
you
did
like
few
years
ago,
because
I
wanted
to
like
I
had
like
different
motivation.
I
wanted
to
eliminate
a
RC
overhead
of
Swift,
so
I
made
all
the
actions.
Value
types
and
I
had
like
an
animation
that
you
can
call
and,
and
it
returns
combines,
is
another
one
you
can
call
like
then
or
scale.
C
D
A
A
Ok,
maybe
I
shouldn't
go
back
to
this?
Ok,
what
if,
instead
of
instead
of
implementing
the
basically
we
can
change
the
value
type
like
we
can
change
the
representation
of
the
value
without
changing
the
semi-ring
all
right.
Imagine
if
we
define
one
zero
multiplication
in
addition,
over
a
type
that
represents
core
animation
instructions
that
we
feed
to.
A
You
know
that
we
can
feed
to
the
the
animation
thread
or
even
even
more
interesting.
What
if
we
build
up
this
abstract
syntax
tree
that,
then
we
can
perform
optimizations
on,
for
example,
because
we
have
the
distributive
law,
because
you
know
grow
times.
The
quantity
of
red
plus
fade
is
the
same
as
grow
times.
Red
plus
Rho
times
fade.
You
can
imagine,
a
user
might
find
grow,
plus
whatever
it.
The
the
second
one,
the
one
work
grow
is
twice
more
cleaner
to
write
in
their
code.
A
A
D
D
A
E
A
E
A
Just
using
CA
display
link
is
a
thing
that
people
do
so
that's
why
I
think
it's
okay
to
do,
but
I
actually
don't
know
what
the
what
the
the
performance
trade-offs
is
with
using
something
like
C
a
display
link
to
do
your
animations
versus
obviously
core
animations
faster,
but
I,
don't
know
the
specifics
of
when
you'd
want
to
use
one
other
over
the
other,
but
I'm
sure
like
people
who
are
really
good
at
iOS,
will
know
the
answer
to
that.
So
there's
kind
of
an
answer:
Thanks.