This article introduces a straightforward method for producing animated line, bar, and pie charts in Python using Matplotlib's FuncAnimation, guiding readers through required imports, data preparation, chart parameterization, animation setup, and saving the resulting GIFs.
The Xianyu team built a pure‑Dart Lottie library for Flutter, featuring a three‑layer architecture (base, interface, component), a custom RenderLottie RenderObject for canvas drawing, full text‑animation support via TextPainter, cubic‑Bezier interpolation matching Android, and plans for interactive property controllers.
This article reviews the CSS animation techniques used in the 京喜工厂 mini‑game, covering animation principles, comparisons with SVG and JavaScript, detailed implementations of linear and step‑based animations, path animations using offset‑path and layered timing functions, and tools for visualizing and fine‑tuning keyframes.
This article walks through the complete implementation of a match‑3 (three‑in‑a‑row) game using Vue, covering the core grid logic, swap mechanics, combo detection, crushing, sorting, filling new tiles, move‑possibility checks, and the Vue rendering pipeline with animation states.
This article demonstrates how to import Bitcoin price data, preprocess it, and use Matplotlib's fill_between, bar, and FuncAnimation functions to generate static and animated area charts, including code snippets, parameter explanations, and tips for exporting the animation as GIF or MP4.
This article details the end‑to‑end development of the JDR DESIGN portal, covering the chosen front‑end stack, project architecture, development workflow, performance optimizations such as lazy loading and webpack splitting, and the implementation of complex Lottie‑based animations.
This article details the challenges and solutions encountered while implementing inline video playback, audio handling, canvas snow effects, progressive animations, and performance optimizations for a Christmas-themed year‑end activity page, providing practical code snippets and best‑practice recommendations for front‑end developers.
This article explains why Alibaba’s Xianyu team created the Candy interactive engine, outlines the challenges of embedding mini‑games in apps, and details the engine’s architecture—including framework, game system, lifecycle, rendering, GUI, event, animation, and resource subsystems—along with sample Flutter code.
Scene is an open‑source Android framework from ByteDance’s Xigua video team that provides lightweight, view‑based page navigation and composition for Single‑Activity applications, addressing Activity/Fragment limitations with flexible stack management, shared‑element animations, and ViewModel‑based communication.
The team created a reusable front‑end animation library by researching common effects, packaging them into an npm module, building a Vue‑based management backend, and integrating the library into business pages, which boosted user stay time by ~30%, performance by ~10% and cut bounce rates by ~60%, as demonstrated in the Douluo Dalu and Dark Angel case studies.
This article details a comprehensive case study of an honor‑system design project launched in August, explaining how virtual medals are defined, categorized, and visually expressed through ceremony‑focused UI, environment design, and a unified animation workflow using Lottie and AE.
This article examines why loading screens are essential in mobile apps, outlines common loading scenarios such as title‑bar, pull‑to‑refresh, and placeholder images, and showcases various visual loading animations—from spinning circles to creative mascot effects—to improve user satisfaction.
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 shows how to use Matplotlib's animation module to create a Game of Life visualisation in Python, covering the rules, grid setup, code implementation, and how to generate and display the animated plot for data‑science applications.
The article chronicles the development of 360 Search's Easter eggs—from early on‑demand implementations to a reusable seasonal egg framework and automated animation tools using Adobe Animate, After Effects, bodymovin, and lottie‑web—highlighting how automation reduced front‑end effort and enabled interactive web animations.
This article explains how to calculate object positions using a parabolic formula, generate multiple translucent shadows to simulate motion blur, and implement the entire effect with JavaScript, covering parameter selection, acceleration calculations, and practical code examples for smooth front‑end animations.
This article walks through the concept sketching, abstract design, low‑poly 3D modeling, rigging with Mixamo, Octane rendering setup, lighting techniques, hair cloth simulation, and post‑processing steps used to create a promotional video for the youth‑focused FoxFriend social app.
This article explains what SVG is, outlines its key advantages such as broad browser support, small file size, scalability, CSS styling, animation, transparency, and SEO benefits, and shows why designers and frontend developers should adopt SVG to improve website performance and visual quality.
An in‑depth look at how the NetEase Music 2018 Listening Report’s rich, emotion‑driven animations were crafted, from designer‑written CSS code and thousands of lines of motion design to practical decisions on formats like GIF, SVG, Lottie, and the custom BX‑AE2CSS tool that exports After Effects animations directly to CSS.
This article walks through creating an engaging, fair lottery program for an annual event using plain JavaScript, including random shuffling, localStorage persistence, and a horse‑race animation built with HTML and CSS, complete with reusable functions and step‑by‑step code explanations.
This article explains how Flutter renders animations by repeatedly calling setState, describes the roles of Animatable, Animation, Tween, and AnimationController, and provides a complete example of creating a custom BezierTween to achieve a bezier‑curve motion with full source code.
This article introduces an open‑source Android library that eliminates the need for custom RecyclerView adapters by using a ViewHolderManager system to handle multiple item types, headers, footers, click listeners, load‑more pagination, and animations, with complete code examples and usage guidelines.
This article introduces the Lottie animation library, explaining its background, how it converts After Effects designs into lightweight JSON, its advantages and limitations, practical usage via npm or CDN, and suitable scenarios such as UI guides, loading and transition animations.
This tutorial walks you through using Blender's Python API to set up a plane, a torus chain, and a wall of cubes as rigid bodies, then shows how to tweak the code and parameters to produce a dramatic wrecking‑ball collision animation.
This article explains how to create smooth, multi‑path paper‑plane flight animations for a mini‑program using CSS3 keyframes, transform versus position, canvas drawing, a reusable Game class, Bezier curve calculations, and inverse‑trigonometric rotation to achieve realistic motion and design flexibility.
This article explains how to create a smooth, multi‑mode paper‑plane animation for a JD mini‑program by comparing position and transform, writing CSS3 keyframes, combining translateX/Y, using canvas with a reusable Game class, defining quadratic and cubic Bézier curves, calculating points with a parametric function, and rotating the plane with atan2 for realistic motion.
This article walks through Flutter’s Image.network implementation, explaining its constructors, the ImageState lifecycle, how resolveImage creates an ImageStream, the caching strategy in ImageProvider, the NetworkImage download flow, and multi‑frame handling for animated images.
This article explains Android's RenderThread, its role in hardware-accelerated UI rendering, how it enables asynchronous animation via ViewPropertyAnimator, and provides code examples demonstrating RenderThread-driven animation that remains smooth even when the UI thread is blocked.
This article walks through the fundamentals of SVG, explains its advantages over raster formats, demonstrates how to create shapes and apply SMIL animations with code examples, and shows practical techniques such as masking, referencing, and animating transforms to build rich, lightweight web graphics.
The article explains how a repeating iOS animation caused a hidden memory leak by retaining its view controller through a strong CABasicAnimation delegate and a performSelector‑afterDelay timer, and shows how replacing the delegate‑based animation with a CAKeyframeAnimation/CAAnimationGroup and using weak references or cancelling pending selectors eliminates the retain cycle.
This article introduces SpriteJS, a cross‑platform canvas library from 360 Qiwang Team, showing how to create structured UI, draw shapes, apply transitions, use the Web Animation API, work with textures, paths, groups, events, D3 integration, physics engines and particle systems, all with practical JavaScript code examples.
SpriteJS is an open‑source, cross‑platform JavaScript library that simplifies canvas drawing by providing a DOM‑like API for creating sprites, paths, groups, and animations, integrating seamlessly with tools such as D3, Matter‑JS, Proton, and CurveJS for rich interactive visualizations.
BindingX introduces an Expression‑Binding architecture that moves gesture calculations to the native layer, drastically reducing JS‑native round‑trips, enabling fluid animations, scroll effects, gyroscope updates, and more across Weex and React Native applications.
This article introduces a lightweight easing algorithm that moves an element by half the remaining distance each frame, provides a requestAnimationFrame polyfill, a reusable Math.easeout function, and shows real‑world usage in Qidian's scroll‑to‑top and other UI effects.
This tutorial walks through building a dynamic wave animation in WebGL by converting canvas coordinates, generating point vertices with sine functions, using requestAnimationFrame for smooth updates, and customizing point sizes via buffer attributes, providing complete JavaScript code snippets and shader modifications.
Researchers created Craft, an AI that learns from 25,000 annotated clips to generate Flintstones‑style videos from textual prompts, while a separate study using the Big Five model links high neuroticism, high conscientiousness, low agreeableness, and extraversion to greater risk of smart‑device addiction.
This article explains how IGListKit can replace cumbersome UICollectionView data‑source code with a data‑driven framework, showing step‑by‑step Swift examples for building a two‑column video grid, handling ads, animations, diffing, and advanced section controllers.
Lottie, Airbnb’s open‑source animation library, parses After Effects‑exported JSON to render vector animations natively on Android, iOS, and React Native, letting developers share a single asset across platforms, simplify code, manage assets from assets, SD card or network, while balancing modest APK size increase against performance limits for complex scenes.
This article explains why pure CSS wave effects are challenging, demonstrates how to achieve them using SVG and Canvas, and then provides a step‑by‑step pure‑CSS technique—including border‑radius tricks, animations, and SCSS code—to build wave backgrounds and progress charts.
This article explains how to create a mobile‑friendly bread‑machine game where layers of bread scroll upward, users shake the phone to drop random loaves, and CSS3 animations combined with JavaScript timing are used to manage movement, dropping, and performance optimizations.
This case study describes how a three‑week H5 promotion for a university English‑vocabulary app was conceived, designed, and animated around a playful “Exam God” character, using expressive emojis, GIF key‑frame animation, and visual tricks to boost user engagement and sharing.
Explore the CSS conic-gradient function in depth—its syntax, differences from linear and radial gradients, practical examples like color wheels, pie charts, animated backgrounds, and polyfill support—while learning how to combine percentages, background-size, and blend modes to create dynamic, cross-browser visual designs.
This article explains the GIF image format’s LZW compression, container structure, and data blocks, highlights its limitations and iOS playback issues, details the file’s header, logical screen descriptor, color tables, and extension blocks, and demonstrates how animation timing and transparency are controlled.
This article walks through the concept, setup, core modules, and various asynchronous techniques—callbacks, promises, generators, and async/await—used to create a live, animated resume that updates text and styles in real time on a web page.
This article details the end‑to‑end process of creating a compelling opening video for a product launch, covering story planning, style exploration, storyboard creation, animation and sound production, and summarizing key lessons for designers and product managers.
This article explains CSS timing functions, covering the theory behind transition‑timing‑function and animation‑timing‑function, the role of Bézier curves, how to craft custom cubic‑bezier() values—including out‑of‑range curves for bounce effects—and the use of steps() for discrete animations, with browser support tables and practical examples.
This article explains how iOS CoreAnimation works behind UIView animations, detailing the role of CALayer, the actionForLayer:forKey: delegate method, animation overlapping behavior, and the distinction between presentationLayer and modelLayer during screen refreshes.
The 2017 visual design trend report from HJUED outlines a two‑phase research process—reviewing last year's keywords and exploring new directions across typography, material, shape, layout, and motion—providing concept overviews, real‑world examples, and visual illustrations for each emerging style.
An in‑depth investigation compares requestAnimationFrame and setTimeout for web animations, revealing how the former syncs with browser repaint cycles, why it outperforms setTimeout, the limits of manually adjusting frame rates, compatibility issues across browsers and platforms, and practical fallback implementations.
This article explains what FPS and 60 fps mean, walks through the browser's rendering pipeline from HTML/CSS to the render tree and layers, and provides practical techniques such as avoiding forced synchronous layout, using transform/opacity, GPU acceleration, requestAnimationFrame, and proper event handling to achieve fluid animations.
This article provides a comprehensive guide to Android's RecyclerView, covering its core concepts, differences from ListView, standard implementation steps, custom adapters, item decorations, layout managers, animators, header/footer integration, empty views, drag-and-swipe handling, nested scrolling, and performance optimizations, with code examples and diagrams.
In this fifth Quick Q&A episode, the author answers several front‑end questions covering how to make a background image adapt to a container, CSS animation compatibility across browsers, clearfix techniques, learning resources for JavaScript, choosing a Vue.js framework, and practical career advice for aspiring developers.
This guide explores real‑world uses of CSS3 animation properties—animation‑delay, animation‑fill‑mode, animation‑direction, animation‑play‑state, and animation‑timing‑function—showing how to build timelines, carousels, sequence effects, and debugging tricks with clear code examples.
Learn how to create responsive, full‑screen mobile event promotion pages by mastering background‑size techniques, viewport ratios, CSS positioning, animation integration, and handling special cases like transform conflicts and viewport‑height units, ensuring consistent layouts across diverse devices.
Material Design, Google’s visual language built on paper‑like metaphors, depth, and purposeful animation, defines a three‑dimensional environment with elevation and shadows, while Android’s libraries such as CoordinatorLayout, AppBarLayout, DrawerLayout, and ActivityOptionsCompat provide concrete components and behaviors—like toolbar hide‑on‑scroll, navigation‑drawer toggling, and shared‑element transitions—to implement these concepts in apps.
This article walks through building a reusable canvas‑based drop component that renders realistic rain and snow animations, explains the underlying JavaScript architecture, and provides complete source code with usage examples and future enhancement ideas.
This tutorial walks you through creating a lightweight Canvas particle engine—including world, launcher, and grain components, physics forces, rendering loop, and core JavaScript modules—so you can experiment with interactive particle effects in web projects.
This article explains CSS3 animation fundamentals, covering the four transform types, a variety of timing functions including cubic‑bezier, the role of @keyframes as the keyframe container, and how these concepts relate to traditional animation techniques such as timelines and storyboard planning.
This article explains how to create a smooth train animation on a web page by sampling track points, using linear interpolation for position and angle, and dynamically adjusting speed, with JavaScript code examples illustrating the implementation.
This article shares Meizu’s team experience building hybrid Android‑H5 apps, covering product requirements, two resource‑loading strategies, the fis3‑based build pipeline, parallel development workflow, a fis3 plugin for switching mock and real code, and practical performance‑optimization tips.
This article explores how the flat design movement, sparked by iOS 7, influences ACG (animation, comics, games), examining visual perception, contrast, and the distinction between flat symbolism and artistic abstraction, while highlighting examples from anime, CG artist Craig Mullins, and the award‑winning game Journey.
This article shares practical H5 design lessons from JDC, covering font choices, layout focus, motion and audio effects, responsive adaptation, and different H5 types to help creators build engaging mobile experiences while balancing performance and shareability.
Apple’s internal prototyping team creates realistic iOS app mock‑ups by leveraging Keynote’s static layout, animation, and “magic move” transition features, then exports images to a device and adds minimal Xcode code for interactive gestures, offering a fast, code‑free workflow.
This article explores how motion design revitalizes flat web interfaces by improving usability and engagement, and reviews practical CSS3, SVG, Canvas, and JavaScript animation techniques and libraries for creating compelling front‑end experiences across desktop and mobile devices.
This article outlines nine practical design strategies—ranging from subtle shadows and hover effects to responsive layouts and purposeful animations—that help modern web pages look polished, user‑friendly, and fully compatible with today’s mobile devices.
This article outlines six core iOS UI design standards—controls, layout, modal scenarios, gesture interactions, animations, and typography—providing practical sizing, spacing, and interaction recommendations for designers seeking to create consistent and user‑friendly mobile experiences.
