Lottie & Micro-interactions

Small motion details that lift UX: keyframe vector animation (how Lottie works), like particles, toggles and ripple feedback, replayed frame by frame with live values.

Tech: Canvas 2D, 关键帧插值, spring 弹簧

Lottie Animation — Lottie Practise: By key frame position for each layer, Zoom, Rotates to do plugins.
Like & Feedback — I'm more than happy, Collect ; to put away for safekeeping; to bookmark, .. Charg.
Toggles & Ripples — Toggle, Checkbox Placement 425 cancel, Material thallium with load button.
Heartbeat Like — The praised heart beats like the heart - quickly magnifying and then falling back, like a "push-up."
Bouncy Checkbox — When clicking the check box, narrow the box first, And then it goes Dominica, XII External, over the original size, and then it 25
Paper Plane Send — When you click "Send," the paper airplane icon in the button goes up a double Bézier curve and leaves a trail. The button text becomes "Send" and then
Copied! — Click on a copy button at the top right corner of the code block, the code will be highlighted once (means selected), the button icon will change from "two sheets of paper" to "tick" and the bottom will pop up "
Download Progress — A progress bar per document, from 0% to 100%.
Skeleton Screen — While the data is still being loaded, the broad contour of the page is drawn with a grey circle and long bars, and a high light is swept from the left to the right, telling the user that it is being loaded.
Toast — The operation will result in a short hint at the bottom of the screen and will automatically disappear after a few seconds without interrupting the user.
Bouncing Badge — icon.
Draggable Card — Pressing the card allows for drag, and the card slightly magnifies, deepens the shadows and tilts in the direction of the drag; when it is released, the card bounces back to its original position as if it had been pulled by a spring.
Long-press Confirm — Dangerous operations (e.g. deletions) do not wish to be misdirected, Evolution is required for a period of time.
Shake Hint — When the password is lost wrong, the input box will shake a few times around the right or the left and turn red, with an error hint below.
Slide to Verify — There's a gap in the puzzle shape, the user drags down slides, the puzzle blocks move horizontally, and if the puzzle is smaller than the gap, verify
Double-tap Zoom — Two quick clicks on the picture, the picture is smoother and amplified (like a mobile phone album) with a double click back.
Magnetic Hover — When the pointer enters the sensor range around the button, the button moves a little bit in the direction of the pointer, and the text on the button moves even more (to create a sense of hierarchy) and bounces back to its place after leaving.
Press Ripple — When you click the button, draw a circle from where you click, and the radius of the circle becomes rapidly larger, Colours fade and are cut inside the rounded rectangle of buttons.
Spring Toggle — The switch's dots do not slip at a flat pace, but rather do it over the head like a spring and come back and hold it steady.