Closed Bug 809342 Opened 7 years ago Closed 7 years ago

[System] Need a shutdown animation implementation

Categories

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

All
Other
defect

Tracking

(blocking-basecamp:+)

VERIFIED FIXED
B2G C1 (to 19nov)
blocking-basecamp +

People

(Reporter: pla, Assigned: rexboy)

References

Details

(Keywords: feature)

Attachments

(3 files)

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

Tim Chein to implement the design.
Ps. Visual assets still need to be created.
This should be a blocking feature.
Assignee: nobody → timdream+bugs
blocking-basecamp: --- → ?
Keywords: feature
Chris, is this a blocking feature ?
blocking-basecamp: ? → -
Flags: needinfo?(clee)
Attached file WIP
This is the work based on visual design v1.
Attached image Shutdown Animation
This is a 1.5 second animation to be played after the user has selected 'Restart' or 'Shutdown'.
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!
Component: Gaia → Gaia::System
Renom'ing and would like to see this +'ed.
blocking-basecamp: - → ?
Flags: needinfo?(clee)
blocking-basecamp: ? → +
Priority: -- → P1
Target Milestone: --- → B2G C1 (to 19nov)
:rexboy, can you take this feature and complete it by 19 nov? I am overloaded with stuff due next week.
Assignee: timdream+bugs → rexboy
Attached file Implementation
Implementation is here based on the WIP and details above.
Attachment #681348 - Flags: review?(timdream+bugs)
Comment on attachment 681348 [details]
Implementation

r=me with all gjslint errors fixed. Thanks!
Attachment #681348 - Flags: review?(timdream+bugs) → review+
https://github.com/mozilla-b2g/gaia/pull/6388

Fixed gislint errors and merged.  Thank you, Tim!
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Gecko-cfad7c9
Gaia-6c53dfd
Resolution: FIXED → WORKSFORME
Use verified fixed in this case - there was a patch here.
Status: RESOLVED → VERIFIED
Resolution: WORKSFORME → FIXED
You need to log in before you can comment on or make changes to this bug.