Closed
Bug 1353434
Opened 8 years ago
Closed 7 years ago
[ux] New download animation for photon + SVG assets
Categories
(Firefox :: Theme, enhancement, P1)
Tracking
()
RESOLVED
FIXED
Iteration:
56.1 - Jun 26
Tracking | Status | |
---|---|---|
firefox55 | --- | affected |
People
(Reporter: jaws, Assigned: amylee)
References
(Blocks 1 open bug)
Details
(Whiteboard: [photon-animation] [ux])
Attachments
(2 files, 17 obsolete files)
The new download animation uses a narrower arrow. We will need the SVG asset for this so we can use it in the animation.
Updated•8 years ago
|
Flags: qe-verify-
Whiteboard: [ux] → [photon] [ux]
Reporter | ||
Updated•8 years ago
|
Whiteboard: [photon] [ux] → [photon-animation]
Reporter | ||
Updated•8 years ago
|
Whiteboard: [photon-animation] → [photon-animation][ux]
Updated•8 years ago
|
Summary: SVG assets for new download icon animation → [ux] SVG assets for new download icon animation
Whiteboard: [photon-animation][ux] → [photon-animation] [ux]
Updated•8 years ago
|
Priority: -- → P2
Updated•8 years ago
|
Assignee: nobody → amlee
Status: NEW → ASSIGNED
Iteration: --- → 55.4 - May 1
Priority: P2 → P1
Assignee | ||
Comment 1•8 years ago
|
||
Assignee | ||
Comment 2•8 years ago
|
||
I've exported a json file to be converted into an SVG sprite. Let me know if this works.
Assignee | ||
Comment 3•8 years ago
|
||
(In reply to Amy Lee [:amylee] UX from comment #2)
> Created attachment 8859288 [details]
> data.json
>
> I've exported a json file to be converted into an SVG sprite. Let me know if
> this works.
Flags: needinfo?(jaws)
Reporter | ||
Comment 4•8 years ago
|
||
Sam, are you able to put this in to AE or do you need more?
Flags: needinfo?(jaws) → needinfo?(sfoster)
Comment 5•8 years ago
|
||
(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #4)
> Sam, are you able to put this in to AE or do you need more?
I've got the source file from :amylee and I've taken a look. I think we'll need this splitting out into different images/spritesheets. ISTM there are a few different states here: there is the arrow which scales down to 100%, then the filling of the icon with blue. Then there is the transfer from the download to the library. Depending on how we're implementing this, that last might need to be split out into an animation on the download icon and an animation on the library icon. Probably we should meet to talk about how to process this so we're not having :amylee go around and around with it as we figure it out.
Flags: needinfo?(sfoster) → needinfo?(jaws)
Reporter | ||
Comment 6•8 years ago
|
||
Yeah, from looking again at the spec, it looks like we only need a sprite for the part where the bookmark shelf gets another book. The "arrow moving in to place" and the "arrow bouncing while the progress indicator moves" can all be done with normal CSS tranforms and CSS animations/transitions.
Flags: needinfo?(jaws)
Comment 7•8 years ago
|
||
:amylee, can you provide a AE file and exported data.json for just the part of the animation where the new book is added to the bookmark shelf. It helps if the total duration in the AE file matches the target duration we want to see in the browser. I'm now able to export data.json file, but probably not competent to be trying to chop the source file up into the time slices we need.
Flags: needinfo?(amlee)
Assignee | ||
Comment 8•8 years ago
|
||
(In reply to Sam Foster [:sfoster] from comment #7)
> :amylee, can you provide a AE file and exported data.json for just the part
> of the animation where the new book is added to the bookmark shelf. It helps
> if the total duration in the AE file matches the target duration we want to
> see in the browser. I'm now able to export data.json file, but probably not
> competent to be trying to chop the source file up into the time slices we
> need.
Hi Sam,
I was just told that the download icon animation will need to be reworked since the original idea was that the download icon would always be beside the library icon but this is no longer the case. The animation will need to be designed so the download icon isn't dependent on being next to the library icon. The new design will probably work more similarly to bookmarks (when the download is finished an arrow will drop into the library is what I'm thinking). Will work on it this week.
Flags: needinfo?(amlee)
Updated•8 years ago
|
Iteration: 55.4 - May 1 → 55.5 - May 15
Assignee | ||
Comment 9•8 years ago
|
||
Part 1 of new download animation - Library
Assignee | ||
Updated•8 years ago
|
Attachment #8859287 -
Attachment is obsolete: true
Assignee | ||
Comment 10•8 years ago
|
||
Part 1 of new download animation - Library
Attachment #8859288 -
Attachment is obsolete: true
Assignee | ||
Comment 11•8 years ago
|
||
70x128 size. Cropped to duration of animation.
Assignee | ||
Comment 12•8 years ago
|
||
Attachment #8864603 -
Attachment is obsolete: true
Assignee | ||
Comment 13•8 years ago
|
||
70x128 size
Assignee | ||
Updated•8 years ago
|
Attachment #8864604 -
Attachment is obsolete: true
Assignee | ||
Comment 14•8 years ago
|
||
Updated•8 years ago
|
Iteration: 55.5 - May 15 → 55.6 - May 29
Updated•8 years ago
|
Summary: [ux] SVG assets for new download icon animation → [ux] New download animation for photon + SVG assets
Comment 15•8 years ago
|
||
Download states
State 1: New download without the download icon starting in the toolbar.
State 2: 1+ Download(s) finished and a new download added
State 3: Download icon starts in toolbar and a new download is added
State 4: A new download is added while there is already a download that is not yet complete
Comment 16•8 years ago
|
||
Includes JSON and SVG files for
1. arrow-progressbar
- svg with the arrow and progressbar-bg in 16x16 space
2. arrow
- the arrow motion alone
3. progressbar
- progress bar alone in 16x16 space
4. progressbar-bg
- progress bar background alone on 16x16 space (in case you need it)
Attachment #8864622 -
Attachment is obsolete: true
Flags: needinfo?(sfoster)
Comment 17•8 years ago
|
||
Attachment #8871775 -
Attachment is obsolete: true
Updated•7 years ago
|
Iteration: 55.6 - May 29 → 55.7 - Jun 12
Comment 18•7 years ago
|
||
(In reply to Eric Pang [:epang] UX from comment #16)
> Includes JSON and SVG files for
>
> 1. arrow-progressbar
> - svg with the arrow and progressbar-bg in 16x16 space
>
> 2. arrow
> - the arrow motion alone
>
> 3. progressbar
> - progress bar alone in 16x16 space
>
> 4. progressbar-bg
> - progress bar background alone on 16x16 space (in case you need it)
Thanks for getting these resized to 16x16 that helps a lot. I'll be in touch about the progressbar animation when I've had a chance to try it out and know more.
Flags: needinfo?(sfoster)
Comment 19•7 years ago
|
||
Updated the progress bar to be 50 frames instead of 100
Attachment #8871915 -
Attachment is obsolete: true
Comment 20•7 years ago
|
||
Attachment #8871436 -
Attachment is obsolete: true
Updated•7 years ago
|
Attachment #8864316 -
Attachment is obsolete: true
Updated•7 years ago
|
Attachment #8864317 -
Attachment is obsolete: true
Updated•7 years ago
|
Attachment #8865588 -
Attachment is obsolete: true
Comment 21•7 years ago
|
||
Comment on attachment 8873541 [details]
Download Motion Specs
(various states)
State 1: New download without the download icon starting in the toolbar.
State 2: 1+ Download(s) finished and a new download added
State 3: Download icon starts in toolbar and a new download is added
State 4: A new download is added while there is already a download that is not yet complete
Attachment #8873541 -
Attachment description: Download states.zip → Download Motion Specs
(various states)
Assignee | ||
Comment 22•7 years ago
|
||
Attachment #8873541 -
Attachment is obsolete: true
Assignee | ||
Comment 23•7 years ago
|
||
Assignee | ||
Updated•7 years ago
|
Attachment #8873143 -
Attachment is obsolete: true
Assignee | ||
Comment 24•7 years ago
|
||
Attachment #8875487 -
Attachment is obsolete: true
Assignee | ||
Comment 25•7 years ago
|
||
Attachment #8875489 -
Attachment is obsolete: true
Updated•7 years ago
|
Iteration: 55.7 - Jun 12 → 56.1 - Jun 26
Assignee | ||
Comment 26•7 years ago
|
||
Missing 4 (in progress, new download). Will attache when ready.
Assignee | ||
Updated•7 years ago
|
Attachment #8875735 -
Attachment is obsolete: true
Assignee | ||
Comment 27•7 years ago
|
||
Added missing asset "5 Completed DL, New DL"
Attachment #8877667 -
Attachment is obsolete: true
Assignee | ||
Updated•7 years ago
|
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
You need to log in
before you can comment on or make changes to this bug.
Description
•