809342 - [System] Need a shutdown animation implementation

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::System, defect, P1)

Description

[Peter La]

This is the dev/implementation counterpart of Bug 805302 (to create the visual assets).

Tim Chein to implement the design.

Comment 1

[Peter La]

Ps. Visual assets still need to be created.

Comment 2

[Tim Guan-tin Chien [:timdream] (please needinfo)]

This should be a blocking feature.

Comment 3

[David Scravaglieri [:scravag]]

Chris, is this a blocking feature ?

Comment 4

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Attachment: WIP

This is the work based on visual design v1.

Comment 5

[Peter La]

Attachment: Shutdown Animation

This is a 1.5 second animation to be played after the user has selected 'Restart' or 'Shutdown'.

Comment 6

[Peter La]

The final animation is shown in the above attachment (see Shutdown Animation).

This animation is to be created in CSS with the following specifications.

Size and Position of Rings:

1st Ring
y = 120
outer diameter = 60 pixels
inner diameter = 40 pixels
color = #e66000

2nd Ring
y = 240
outer diameter = 60 pixels
inner diameter = 45 pixels
color = #dc4e00

3rd Ring
y = 360
outer diameter = 60 pixels
inner diameter = 50 pixels
color = #d24500

Each Ring will have the following animation characteristics:

.40 second fade in
.50 second fade out

1st Ring starts fading in at 0   seconds.
2nd Ring starts fading in at .25 seconds.
3rd Ring starts fading in at .50 seconds.

Fade in is defined by the following keyframes:
1  opacity = .20
2  opacity = .40
3  opacity = .60
4  opacity = .80
5  opacity = .87
6  opacity = .92
7  opacity = .96
8  opacity = .99

Fade out is defined by the following keyframes:
1  opacity = 1.00
2  opacity =  .90
3  opacity =  .80
4  opacity =  .70
5  opacity =  .60
6  opacity =  .50
7  opacity =  .40
8  opacity =  .30
9  opacity =  .20
10 opacity =  .10

During the fadeout, each circle's inner diameter also increases linearly, to create the effective of the ring getting thinner.  This is defined by the following keyframes (different for each circle):

1st Ring
1  inner diameter = 40
2  inner diameter = 42
3  inner diameter = 44
4  inner diameter = 46
5  inner diameter = 48
6  inner diameter = 50
7  inner diameter = 52
8  inner diameter = 54
9  inner diameter = 56
10 inner diameter = 58

2nd Ring
1  inner diameter = 45
2  inner diameter = 46.5
3  inner diameter = 48
4  inner diameter = 49.5
5  inner diameter = 51
6  inner diameter = 52.5
7  inner diameter = 54
8  inner diameter = 55.5
9  inner diameter = 57
10 inner diameter = 59.5

3rd Ring
1  inner diameter = 50
2  inner diameter = 51
3  inner diameter = 52
4  inner diameter = 53
5  inner diameter = 54
6  inner diameter = 55
7  inner diameter = 56
8  inner diameter = 57
9  inner diameter = 58
10 inner diameter = 59

Please email me if there is any part of this that you don't understand.

Thanks!

Comment 7

[Chris Lee [:clee]]

Renom'ing and would like to see this +'ed.

Comment 8

[Tim Guan-tin Chien [:timdream] (please needinfo)]

:rexboy, can you take this feature and complete it by 19 nov? I am overloaded with stuff due next week.

Comment 9

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Attachment: Implementation

Implementation is here based on the WIP and details above.

Comment 10

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Comment on attachment 681348 [details]
Implementation

r=me with all gjslint errors fixed. Thanks!

Comment 11

[KM Lee [:rexboy] (inactivate after Sep. 22)]

https://github.com/mozilla-b2g/gaia/pull/6388

Fixed gislint errors and merged.  Thank you, Tim!

Comment 12

[rafael.marquez]

Gecko-cfad7c9
Gaia-6c53dfd

Comment 13

[Jason Smith [:jsmith]]

Use verified fixed in this case - there was a patch here.