Everyone here is a product manager。
A few days ago, someone introduced axure8's photo amplification design step
Http://www. Woshipm. Com/rp/246879. HTML), which is good. Unfortunately, my axure is not currently used for eight, but it's so high that i'd rather do it with the existing 7. 0 and share it with you, and look at the next step
Preparatory work
The preparatory work was concluded。
Let's see what else is missing from the elements necessary to magnify the picture. Well, that's the magnifier! Of course, there's a pretty good magnifier, and the mouse on the thumbnails is magnifying the picture
Add magnifying glass
Yeah, magnifier's done. Let's see the preview. Huh? What's wrong? Calm down, no dynamic effects added to the magnifier。
Magnifying mirror animation effects: mouse moves into the picture display magnifier; mouse moves out of the hidden magnifier; magnifiers follow the mouse
Let's have a preview. Well, it's okay to move, but at the beginning, the magnifier shows. Are you kidding? Nono, forget one step。
All right, let's give it a preview, make sure it's okay. If it's not working, it's really not my problem, it's not mine
The magnifier is finished, the magnifying image is not yet available, and the magnifying image is set below。
Add magnification
The picture is set, and then we'll see how it moves with the magnifier. Don't be afraid. It's simple:
. Left represents x-coordinates of the large map, . Tops represent y-coordinates of the large map, and cursor. X and . Y represent x- and y-coordinates of the current position of the magnifying glass (with 20 in front, so with 20 above). (big graph coordinates - small graph coordinates)* amplification multiple = part of the current magnification figure, with the function *5 above being the magnification multiplier of the picture, preferably > = the magnification multiplier of the function
Let's get this over with
When you're done with this, you feel so cute
Author provides source:
Official sources:
