The document discusses the technical challenges of developing a streaming radio alarm clock app for iOS. It describes using Adobe Edge Animate for designing animations, recreating them with Core Animation, playing radio streams in the background, implementing background processing and location tracking, registering for VOIP services to keep the app running, and converting CSS animations to Core Animation keyframes. The app was delivered within 3 weeks but required significant engineering to allow the desired functionality within iOS restrictions.
2. ¡ Streaming
radio
alarm
clock
app
¡ Simple
app
but
with
technical
challenges
for
iOS
¡ High
level
of
design
3.
4.
5. ¡ Layout
and
animations
designed
in
Adobe
Edge
Animate
¡ HTML5
+
CSS3
animation
tool
(Free!)
6. ¡ Triggering
alarm
in
background
¡ Recreating
CSS3
animations
using
Core
Animation
§ Movements,
shadows,
opacity
7. ¡ Easy
to
play
radio
stream
in
background
–
as
long
as
it
has
been
started
while
the
application
is
in
foreground
§ Background
processing
thread
§ GPS
location
§ Voice
over
IP
¡ Use
info.plist
to
set
‘Required
background
modes’
8. ¡ Can
be
used
to
run
for
up
to
10
minutes
when
app
goes
into
background
¡ Expiration
handler
gets
called
if
task
does
not
end
itself
within
allowed
time
¡ If
expiration
handler
doesn’t
end
task,
process
is
killed!
bgTask
=
[application
beginBackgroundTaskWithExpirationHandler:^{
[application
endBackgroundTask:bgTask];
bgTask
=
UIBackgroundTaskInvalid;
}];
9. ¡ Can
register
app
for
‘significant
changes
in
distance’.
¡ In
practice
updates
usually
come
every
5
minutes
¡ App
will
be
notified
when
location
changes
by
significant
amount
¡ App
will
also
be
started
if
it
has
been
killed
self.locationManager
=
[[CLLocationManager
alloc]
init];
[self.locationManager
startMonitoringSignificantLocationChanges];
10. ¡ Apps
registered
as
providing
VOIP
services
have
the
following
abilities
§ Get
automatically
restarted
if
killed
§ Get
woken
up
if
data
arrives
on
VOIP
control
socket
§ Can
register
for
‘keep
alive’
updates
▪ Intended
to
refresh
socket
connections
if
needed
▪ Minimum
10
minutes
between
updates
12. ¡ All
animations
defined
in
Edge
Animate
as
CSS3
property
animations
¡ Timeline
with
each
property
having
start
/
end
values
on
timeline
§ Position
§ Scale
§ Opacity
§ Shadow
¡ Different
easing
functions
available
13. ¡ CABasicAnimation
for
animating
layer
properties
¡ CAAnimationGroup
for
animating
properties
at
the
same
time
¡ CAKeyframeAnimation
for
custom
easing
functions
14. ¡ Tools
to
take
the
CSS3
animations
and
convert
them
into
Core
Animation
keyframe
animations
¡ Currently
a
manual
operation,
but
could
be
automated
considerably
15. ¡ Simple
app
but
quite
a
lot
of
engineering
required
to
get
the
required
result
¡ App
delivered
within
3
weeks
¡ Working
with
client
on
v2.0
which
will
get
a
public
release