This article explains two Android Canvas spray‑effect techniques—one using Gaussian blur and another using fog‑image masks—detailing their challenges, implementation steps, full source code, performance trade‑offs, and tips for fixing density issues.
This article explores the importance of motion design in product interfaces, detailing its benefits such as reduced learning cost, brand differentiation, user conversion, and engagement, while providing practical guidance on tools, optimal animation durations, physical motion principles, output formats like GIF and Lottie, and effective handoff documentation for developers.
This article showcases six recent UI animation case studies from popular Chinese apps—Gaode, Meituan, Didi, Tongcheng, Xianyu, and Didi Carpool—detailing their design techniques, user feedback mechanisms, and AI integration to inspire designers seeking effective, engaging product experiences.
This tutorial demonstrates how to create a visually striking card component with light‑following and 3D parallax effects using React, Tailwind CSS, and custom hooks, covering setup of three boxes, mouse event handling, CSS transforms, and reusable hook encapsulation.
This article recounts a developer's hands‑on experiment using ChatGPT to generate Flutter code for drawing a yellow five‑pointed star, iteratively refining the design, adding explosion particle animation, and reflecting on the strengths and quirks of in‑context learning AI.
This article explains why UI motion effects are crucial for mobile apps, details the four main animation curves, shares practical techniques for maintaining animation consistency, recommends After Effects scripts for curve adjustment and batch keyframe copying, and outlines export formats and duration guidelines.
This article walks through the process of creating both simple and advanced UI animations in an e‑commerce setting using imgcook, covering animation decomposition, state handling, transition delays, keyframe usage via Element.animate, and practical tips for avoiding repeated triggers.
This tutorial explains how to create a smooth, animated carousel in Android using MotionLayout and its Carousel helper, covering core concepts, state definitions, XML layout and MotionScene configurations, Kotlin adapter implementation, and practical tips for handling view ordering and visual effects.
This article provides a step‑by‑step guide on using MotionLayout in Android, covering dependency setup, layout and MotionScene creation, defining start and end states, adding keyframe animations, gesture handling with OnSwipe, and common attributes for building complex UI transitions.
This article explores how dynamic design—rooted in animation principles from film and nature—enhances mobile user interfaces by clarifying page relationships, highlighting important information, adding warmth to interactions, and providing practical guidelines such as elasticity, easing, anticipation, and fine‑grained details.
This article explains why interactive animation tools are essential at every project stage, reviews the market landscape, highlights Protopie's unique advantages, and provides a step‑by‑step guide to quickly create high‑fidelity prototypes and apply them to real‑world design scenarios.
This article explains what motion design is, categorizes its types, outlines its benefits for guiding users, reducing wait perception, and adding personality, and offers practical guidelines such as optimal duration and appropriate easing to create effective UI animations.
This article examines why easing curves matter for user experience, derives them from physical formulas, presents common easing functions with full source code, analyses Apple ScrollView dynamics using MATLAB curve fitting, and demonstrates how to recreate app animations through linear interpolation and practical tooling.
This tutorial explains the geometric derivation and step‑by‑step algorithm for calculating the tangent points of two circles of different radii and using them to construct quadratic Bézier curves that create the popular one‑click dismiss animation on mobile interfaces.
The article explores the importance of motion design in product interfaces, detailing how thoughtful animations can enhance comfort, reduce friction, add delight, maintain attention, and subtly improve feedback, while providing practical examples and guidelines for effective UI animation.
