BestHub
Sign in
Tagged articles
258 articles
Page 2 of 3
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 28, 2022 · Mobile Development

Deep Dive into Compose Animatable API: Creation, animateTo, snapTo, and a Practical Upload Button Example

This article explains the low‑level Android Jetpack Compose Animatable API, its constructor parameters, how to create and configure Animatable instances for various value types, and demonstrates using animateTo and snapTo within coroutines, including listeners and a complete upload‑button use case.

AndroidAnimatableCompose
0 likes · 15 min read
Deep Dive into Compose Animatable API: Creation, animateTo, snapTo, and a Practical Upload Button Example
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 25, 2022 · Frontend Development

ECharts Configuration‑Driven Development: From Basics to Advanced Component Design

This article explains why ECharts is a popular choice for large‑screen dashboards, introduces the configuration‑driven mindset, demonstrates graphic and animation techniques, and walks through building a reusable Vue 3 base component with dynamic resizing, theming, and empty‑state handling.

ConfigurationData visualizationECharts
0 likes · 13 min read
ECharts Configuration‑Driven Development: From Basics to Advanced Component Design
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 16, 2022 · Mobile Development

Understanding RepeatableSpec and InfiniteRepeatableSpec in Jetpack Compose Animations

This article explains the RepeatableSpec and InfiniteRepeatableSpec animation specifications in Jetpack Compose, detailing their constructors, parameters such as iterations, repeatMode, and initialStartOffset, and demonstrates practical Kotlin code examples for creating repeatable and endless animations.

InfiniteRepeatableSpecJetpack ComposeKotlin
0 likes · 11 min read
Understanding RepeatableSpec and InfiniteRepeatableSpec in Jetpack Compose Animations
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 15, 2022 · Frontend Development

Building a Seamless Infinite Scroll Component with Vue 3

This article explains why infinite scrolling is essential for large‑screen dashboards, analyses three implementation strategies, and provides a complete Vue 3 component—including BEM‑styled markup, GSAP‑driven animation, slot‑based content insertion, and optional hover‑pause behavior—to achieve a smooth, endless scrolling list.

BEMComponent DesignGSAP
0 likes · 14 min read
Building a Seamless Infinite Scroll Component with Vue 3
Sohu Tech Products
Sohu Tech Products
Nov 9, 2022 · Mobile Development

Implementing an Expandable TextView with Topic and URL Span Handling in Android

This article demonstrates how to build a custom Android TextView that supports clickable topic spans, URL interception, and smooth expand‑collapse behavior using StaticLayout measurements, custom ButtonSpan labels, and optional height‑animation, providing a reusable solution for rich mobile text displays.

AndroidMobile DevelopmentSpan
0 likes · 10 min read
Implementing an Expandable TextView with Topic and URL Span Handling in Android
网易UEDC
网易UEDC
Oct 25, 2022 · Fundamentals

Mastering Emoji Animation: 12 Principles to Boost User Engagement

This article explains how the NetEase Mail team enriched their "Yi Miao" emoji by applying Disney's twelve animation principles, detailing each principle with examples and GIFs to enhance expressiveness, visual appeal, and user interaction in dynamic emoji design.

12 principlesUser experienceanimation
0 likes · 8 min read
Mastering Emoji Animation: 12 Principles to Boost User Engagement
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 13, 2022 · Mobile Development

Exploring Jetpack Compose Animation Specs: Spring, Tween, Snap, Keyframes, Repeatable and Infinite Repeatable

This article provides a comprehensive tutorial on Jetpack Compose animation specifications, covering Spring, Tween, Snap, Keyframes, repeatable and infinite repeatable specs, explaining their parameters, default values, and demonstrating practical Kotlin code examples with visual GIFs to illustrate each effect.

Jetpack ComposeKotlinTween
0 likes · 15 min read
Exploring Jetpack Compose Animation Specs: Spring, Tween, Snap, Keyframes, Repeatable and Infinite Repeatable
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 13, 2022 · Mobile Development

Deep Dive into animateValueAsState and Custom animateXxxAsState APIs in Jetpack Compose

This article explains how Jetpack Compose’s animateValueAsState underpins the animateXxxAsState family, explores its source code, demonstrates how to create custom animation APIs such as animateDpSizeAsState and animateUploadAsState, and provides practical Kotlin examples for building reusable UI animations on Android.

Jetpack ComposeKotlinanimateValueAsState
0 likes · 12 min read
Deep Dive into animateValueAsState and Custom animateXxxAsState APIs in Jetpack Compose
DaTaobao Tech
DaTaobao Tech
Oct 13, 2022 · Mobile Development

Getting Started with Jetpack Compose: Building a Simple Page

This tutorial walks through building a simple Jetpack Compose page, showing how to define composable functions, manage reactive state, preview UI, add animations, and adapt layouts for portrait and landscape, providing a concise foundation for modern Android UI development.

Android UIDeclarative UIJetpack Compose
0 likes · 11 min read
Getting Started with Jetpack Compose: Building a Simple Page
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 29, 2022 · Mobile Development

Understanding Visibility Animations in Jetpack Compose: A Source‑Code Walkthrough

This article explores Jetpack Compose's visibility animation APIs by dissecting the AnimatedVisibility composable, its EnterTransition and ExitTransition parameters, the underlying Transition system, and related helper functions, while providing concrete Kotlin code examples and explanations of how each component works together to produce smooth UI effects.

AndroidCompose UIJetpack Compose
0 likes · 17 min read
Understanding Visibility Animations in Jetpack Compose: A Source‑Code Walkthrough
Bilibili Tech
Bilibili Tech
Sep 13, 2022 · Frontend Development

Vector Animation Foundations: Path Class, Bézier Curves, and Rational Bézier Geometry

The article explains how Bilibili’s Chronos engine can support vector animation by defining a Path class that stores drawing verbs, points, and conic weights, and by detailing Bézier and rational Bézier curve mathematics, De Casteljau evaluation, subdivision, and flattening techniques needed for resolution‑independent, GPU‑friendly rendering.

Bézier curvesGeometryanimation
0 likes · 22 min read
Vector Animation Foundations: Path Class, Bézier Curves, and Rational Bézier Geometry
ELab Team
ELab Team
Aug 18, 2022 · Frontend Development

How to Create Smooth Drag‑Slider Effects with SVG Bezier Curves

This article explains how to use SVG path commands and JavaScript to draw and animate Bézier curves for a fluid drag‑slider UI, covering background, curve theory, implementation steps, stroke‑dash techniques, offset‑path alternatives, and SMIL animation for interactive effects.

Bezier CurveCSSJavaScript
0 likes · 15 min read
How to Create Smooth Drag‑Slider Effects with SVG Bezier Curves
LOFTER Tech Team
LOFTER Tech Team
Aug 15, 2022 · Game Development

Implement Touch‑Controlled Movement, Directional Walking Animations, and Physics Collisions for a Hero Character in Cocos Creator

This guide demonstrates how to enable touch‑based movement for a hero character, add directional walking animations, integrate animation logic, and implement physics‑based collision detection with walls in Cocos Creator, including code snippets for event handling, animation state management, and physics component setup.

Cocos CreatorCollisionGame Development
0 likes · 18 min read
Implement Touch‑Controlled Movement, Directional Walking Animations, and Physics Collisions for a Hero Character in Cocos Creator
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 5, 2022 · Frontend Development

Liquid Flow Effects with SVG, CSS Masking, and Canvas – A Frontend Development Tutorial

This article demonstrates how to create dynamic liquid‑flow animations for static images using SVG filters (feTurbulence, feDisplacementMap), CSS mask‑image, Canvas drawing, and TweenMax, providing step‑by‑step code for generating hotspots, animating them, and integrating image upload and canvas clearing in a web page.

CSSCanvasMasking
0 likes · 13 min read
Liquid Flow Effects with SVG, CSS Masking, and Canvas – A Frontend Development Tutorial
LOFTER Tech Team
LOFTER Tech Team
Aug 5, 2022 · Game Development

Guide to Creating, Editing, and Using Tiled Maps in Cocos Creator

This tutorial explains how to use the Tiled map editor to design tile‑based levels, import and configure the generated maps in a Cocos Creator project, add animations, replace maps, and switch to curve‑based collision walls for smoother gameplay.

Cocos CreatorCollisionGame Development
0 likes · 16 min read
Guide to Creating, Editing, and Using Tiled Maps in Cocos Creator
ByteFE
ByteFE
Jul 20, 2022 · Frontend Development

Building a Pure JavaScript and CSS Analog Clock with Animation‑Delay

This tutorial demonstrates how to create a functional analog clock using only HTML, CSS keyframe animations, and a small JavaScript snippet that sets negative animation‑delay values so the clock starts synchronized with the current time.

CSSHTMLJavaScript
0 likes · 8 min read
Building a Pure JavaScript and CSS Analog Clock with Animation‑Delay
Zhixing ZXD Design Center
Zhixing ZXD Design Center
Jun 28, 2022 · Mobile Development

How We Revamped a Mobile Loading Animation to Boost User Delight

This article walks through the redesign of a travel app's loading animation, explaining why an upgrade was needed, analyzing industry examples, defining design directions, presenting graphic and IP loading concepts, and sharing the final polished solutions that enhance fun, recognizability, and brand alignment.

Case StudyProduct DesignUI/UX
0 likes · 7 min read
How We Revamped a Mobile Loading Animation to Boost User Delight
58UXD
58UXD
Jun 20, 2022 · Game Development

Master Rigging a 3D Donkey Character in Cinema 4D: Step‑by‑Step Guide

This tutorial walks you through the complete workflow of preparing, optimizing, sculpting, organizing, and rigging a 3D donkey character in Cinema 4D, covering topology tools, sculpt mode, skeleton creation, controller adjustment, skin binding, and final animation tips.

3D ModelingCinema 4DGame Development
0 likes · 5 min read
Master Rigging a 3D Donkey Character in Cinema 4D: Step‑by‑Step Guide
Bilibili Tech
Bilibili Tech
Jun 7, 2022 · Mobile Development

How Bilibili’s Chronos Engine Powers Real‑Time Support Bullet‑Screen Word Clouds on Mobile

This article explains how Bilibili’s Chronos cross‑platform engine enables a new support‑bullet‑screen feature that turns user comments into animated word‑cloud overlays on video, detailing the client‑side layout algorithm, integral‑image optimization, spiral point generation, and worker‑thread rendering to achieve sub‑second performance on mobile devices.

MobileReal-TimeRendering
0 likes · 15 min read
How Bilibili’s Chronos Engine Powers Real‑Time Support Bullet‑Screen Word Clouds on Mobile
Youku Technology
Youku Technology
Jun 1, 2022 · Artificial Intelligence

AI-Powered Restoration of Classic Animation Videos Using Deep Learning

Youku’s Digital Media Lab built an AI‑powered restoration pipeline that uses multi‑frame super‑resolution, denoising, deblocking, deblurring and GAN‑based detail generation to automatically revive classic animated films, removing noise and artifacts while preserving fine lines, enabling high‑definition viewing for modern audiences.

AIDenoisinganimation
0 likes · 8 min read
AI-Powered Restoration of Classic Animation Videos Using Deep Learning
IT Services Circle
IT Services Circle
May 1, 2022 · Frontend Development

Creating an Animated Douyin (TikTok) Logo Using a Single HTML Tag

This article demonstrates how to recreate the Douyin (TikTok) logo with animation using only a single HTML element, by dissecting its geometric components, employing CSS pseudo‑elements, background‑image gradients, variables, blend modes, and hover‑triggered transformations to achieve the full effect.

CSSPseudo-elementsanimation
0 likes · 14 min read
Creating an Animated Douyin (TikTok) Logo Using a Single HTML Tag
Alibaba Terminal Technology
Alibaba Terminal Technology
Apr 26, 2022 · Frontend Development

How Front‑End Developers Can Elevate H5 Game Experience to Native Quality

This article explores how front‑end engineers can improve H5 game experiences by focusing on stable 60 fps rendering, high‑quality assets, multi‑screen compatibility, performance‑aware animation, and intuitive interaction design, while balancing limited resources and trade‑offs to approach native‑like quality.

Game DevelopmentUser experienceanimation
0 likes · 18 min read
How Front‑End Developers Can Elevate H5 Game Experience to Native Quality
Xianyu Technology
Xianyu Technology
Mar 29, 2022 · Mobile Development

Optimizing Flutter Scroll Curve and Performance for Xianyu

Xianyu's team optimized Flutter's scrolling by fixing fling restarts, replacing the default Clamping simulation with Android's Scroller formula, and adding a velocity‑based deceleration curve, resulting in native‑like smoothness and reduced dropped frames, now shipped behind feature flags and evaluated in A/B tests.

Flutteranimationoptimization
0 likes · 11 min read
Optimizing Flutter Scroll Curve and Performance for Xianyu
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 29, 2022 · Game Development

Recreating the Classic Duck Hunt Game with Vue 3 and PixiJS

This article walks through building a browser‑based Duck Hunt‑style shooting game using Vue 3 for the UI framework, PixiJS as the rendering engine, and supporting tools such as Vite, SCSS, mitt, and GSAP to handle asset loading, scene management, animations, hit detection, and responsive scaling.

GSAPGame DevelopmentPixiJS
0 likes · 14 min read
Recreating the Classic Duck Hunt Game with Vue 3 and PixiJS
Taobao Design
Taobao Design
Mar 28, 2022 · User Experience Design

How to Craft Engaging Interaction Animations for Large‑Screen Phones

This article explains why interaction animation is crucial for large‑screen mobile UX, outlines ten animation design principles, showcases common animation patterns such as progressive, scaling, overlay, transition, loading, and guide effects, and recommends tools like Bézier‑based editors and Principle for creating polished motion designs.

Interaction DesignMobile UIanimation
0 likes · 9 min read
How to Craft Engaging Interaction Animations for Large‑Screen Phones
DaTaobao Tech
DaTaobao Tech
Mar 25, 2022 · Artificial Intelligence

Digital Human Technology: Design, Production, and Future Directions

The article surveys digital‑human technology—covering visual form, motion and AI‑driven intelligence—its fast‑growing market, a three‑layer solution stack (hardware/software base, AI platform, application services), end‑to‑end avatar creation workflow, rendering and animation techniques, web‑deployment challenges, and future prospects such as deeper AI, XR/6G and metaverse integration.

3D renderingAIDigital Human
0 likes · 20 min read
Digital Human Technology: Design, Production, and Future Directions
58UXD
58UXD
Mar 18, 2022 · Game Development

How to Create a 3D Tiger IP: From Concept to Animation

This article walks through the complete workflow of designing the Tiger Jiji IP, covering concept research, 3D nude modeling, high‑precision sculpting, UV unwrapping with RizomUV, material creation, lighting and rendering using OC, and final animation implementation with Lottie.

3D ModelingGame DevelopmentUV unwrapping
0 likes · 9 min read
How to Create a 3D Tiger IP: From Concept to Animation
vivo Internet Technology
vivo Internet Technology
Mar 16, 2022 · Mobile Development

Analyzing and Fixing TextView Marquee Reset Issue on Android 6.0+

The article shows how to diagnose the Android 6.0+ TextView marquee jump caused by a button’s setText triggering requestLayout and onMeasure, and fixes it by giving the button a fixed size instead of wrap_content, illustrating a systematic source‑code analysis and debugging workflow for UI issues.

AndroidDebuggingTextView
0 likes · 14 min read
Analyzing and Fixing TextView Marquee Reset Issue on Android 6.0+
Taobao Frontend Technology
Taobao Frontend Technology
Feb 23, 2022 · Frontend Development

How Web Front‑End Teams Build Next‑Gen Digital Humans for the Metaverse

This article, originally presented at the 16th D2 Front‑End Technology Forum, explores the current state, market potential, and core technologies behind virtual digital humans—covering their appearance, behavior, and intelligence—while detailing practical pipelines, rendering techniques, and future challenges for web‑based implementations.

3D renderingWeb Graphicsanimation
0 likes · 23 min read
How Web Front‑End Teams Build Next‑Gen Digital Humans for the Metaverse
php Courses
php Courses
Feb 15, 2022 · Frontend Development

CSS3 Animated Spoon Scooping Tangyuan (Dumpling) Effect

This tutorial demonstrates how to create a festive CSS3 animation of a spoon scooping dumplings, providing complete HTML and CSS code, visual examples, and download links for learners to copy, preview, and use the effect in their own projects.

CSSHTMLanimation
0 likes · 16 min read
CSS3 Animated Spoon Scooping Tangyuan (Dumpling) Effect
58UXD
58UXD
Feb 14, 2022 · Game Development

Mastering C4D VR Promo Videos: From Script to Final Render

This guide walks you through creating a VR promotional video with C4D and Octane, covering project background, pre‑production planning, storyboard creation, 3D modeling, texturing, rigging, animation, lighting, rendering, and post‑production steps such as editing, color grading, audio, and voice‑over.

3D ModelingC4DRendering
0 likes · 6 min read
Mastering C4D VR Promo Videos: From Script to Final Render
Kuaishou Large Model
Kuaishou Large Model
Feb 11, 2022 · Artificial Intelligence

How Motion Retargeting Powers Real‑Time Virtual Humans: Techniques & Insights

Motion retargeting, also known as motion adaptation, transfers source motion to arbitrary virtual characters while preserving semantic features and natural flow, and this article reviews traditional geometry‑based methods, recent deep‑learning approaches, and Kuaishou Y‑Tech’s optimized pipeline that balances quality, contact preservation, and real‑time performance.

Deep Learninganimationcomputer graphics
0 likes · 13 min read
How Motion Retargeting Powers Real‑Time Virtual Humans: Techniques & Insights
Python Programming Learning Circle
Python Programming Learning Circle
Jan 21, 2022 · Fundamentals

Five Non‑Traditional Plotly Visualizations to Level Up Your Data Storytelling

This article introduces five advanced Plotly visualization techniques—including animated bar charts, scatter animations, sunburst diagrams, parallel categories, parallel coordinates, and gauge indicators—showcasing how to create dynamic, interactive graphics in Python to make data stories more compelling and insightful.

Interactive ChartsPythonanimation
0 likes · 9 min read
Five Non‑Traditional Plotly Visualizations to Level Up Your Data Storytelling
Shopee Tech Team
Shopee Tech Team
Dec 30, 2021 · Game Development

Inside Shopee Candy: Building a Scalable Match‑3 H5 Game Architecture

This article walks through the origin, architecture, and tooling of Shopee Candy, a multi‑region match‑3 H5 game, detailing the Algorithm SDK, animation system, map editor, score runner, replayer, and future plans for configurability, performance, anti‑cheat, and AI‑driven level design.

Game DevelopmentH5Tooling
0 likes · 16 min read
Inside Shopee Candy: Building a Scalable Match‑3 H5 Game Architecture
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Dec 16, 2021 · Frontend Development

How to Build Dynamic Atmosphere Bubbles with React‑Transition‑Group vs Swiper

This article explains how to implement real‑time atmosphere bubbles in live‑streaming pages, compares Swiper and react‑transition‑group for animation, provides detailed code examples for Swiper, Transition, CSSTransition, SwitchTransition, and shows a complete React solution using a queue‑based component.

animationfrontendreact-transition-group
0 likes · 23 min read
How to Build Dynamic Atmosphere Bubbles with React‑Transition‑Group vs Swiper
Ctrip Technology
Ctrip Technology
Dec 9, 2021 · Frontend Development

Canvas Animation in React: Principles, Implementation, and Performance Optimization

This article explains the fundamentals of web animation, compares animation techniques such as CSS, SVG, and Canvas, demonstrates how to create frame‑based Canvas animations with JavaScript and Konva, shows how to integrate them into React (including react‑konva), and provides performance‑optimisation strategies for smoother rendering.

CanvasKonvaReact
0 likes · 19 min read
Canvas Animation in React: Principles, Implementation, and Performance Optimization
Beike Product & Technology
Beike Product & Technology
Nov 25, 2021 · Mobile Development

Using Navigator for Local Page Switching in Flutter: Implementation, Issues, and Solutions

This article explains how to implement local page switching in Flutter using the Navigator widget, examines its internal architecture, and addresses common problems such as animation glitches, incorrect pop/push behavior, and back‑button handling, providing practical code‑based solutions and best‑practice recommendations.

animationlocal-page-switchingmobile-development
0 likes · 11 min read
Using Navigator for Local Page Switching in Flutter: Implementation, Issues, and Solutions
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 19, 2021 · Frontend Development

Creating Meta’s 3D Dynamic Logo with Three.js and Blender

This tutorial explains how to recreate Meta’s animated 3D logo by combining Three.js geometry, Blender modeling, FBX loading, custom materials, animation mixers, raycasting for interaction, and progress tracking, providing a complete step‑by‑step guide for web‑based 3D development.

3D ModelingBlenderFBXLoader
0 likes · 16 min read
Creating Meta’s 3D Dynamic Logo with Three.js and Blender
ByteFE
ByteFE
Nov 10, 2021 · Frontend Development

Creating a CSS‑Only Animated Orange Cat with Vite and SCSS

This tutorial demonstrates how to build a playful orange‑cat mood‑changing animation using Vite and SCSS, relying solely on HTML and CSS (including variables, pseudo‑elements, transitions, and keyframe animations) without any JavaScript, and explains each step from project setup to final interactive effect.

CSSHTMLSCSS
0 likes · 9 min read
Creating a CSS‑Only Animated Orange Cat with Vite and SCSS
58UXD
58UXD
Nov 10, 2021 · Fundamentals

How 58 Home’s New Mascot ‘Dun Dun’ Was Designed: From Concept to 3D Animation

From concept to 3D model, this article details how 58 Home’s new mascot ‘Dun Dun’ was conceived, designed, and animated—covering brand‑value integration, color strategy, brainstorming categories, sketch selection, 3D rendering, scene creation, and interactive animations that bring the character to life within the app.

3D ModelingProduct DesignUX
0 likes · 6 min read
How 58 Home’s New Mascot ‘Dun Dun’ Was Designed: From Concept to 3D Animation
Baidu MEUX
Baidu MEUX
Nov 4, 2021 · Game Development

How One Night Werewolf Became a Benchmark Mini‑Game: Design Secrets Revealed

This article walks through the complete design process of the online tabletop game “One Night Werewolf,” covering story world‑building, scenario‑driven gameplay, card visual design, emotion‑focused animation, and technical implementation that together created a compelling, high‑engagement mini‑game experience.

User experienceanimationcard design
0 likes · 7 min read
How One Night Werewolf Became a Benchmark Mini‑Game: Design Secrets Revealed
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 2, 2021 · Frontend Development

Creating Colorful, Smart Shadows with CSS

This tutorial explains how to use HTML, CSS pseudo‑elements, filters, and animations to generate dynamic, colorful shadows behind images, replicating smart‑shadow effects without JavaScript, and provides reusable code snippets for various use cases.

CSSPseudo-elementsShadow Effects
0 likes · 10 min read
Creating Colorful, Smart Shadows with CSS
Shopee Tech Team
Shopee Tech Team
Oct 22, 2021 · Frontend Development

Web UI/UX Design Improvement Guide – Page Presentation (Part 1)

This guide, based on rebuilding Shopee’s Warehouse Management System front‑end, details how to enhance UX through responsive page layouts, strategic content placement, robust empty‑state and image handling, and purposeful transitions and animations, while emphasizing speed, accessibility, and thoughtful design.

Web Designaccessibilityanimation
0 likes · 19 min read
Web UI/UX Design Improvement Guide – Page Presentation (Part 1)
Sohu Tech Products
Sohu Tech Products
Oct 14, 2021 · Mobile Development

Understanding the Physics and Interaction Mechanics of iOS UIScrollView

This article explores the underlying physics, mathematical models, and interaction details of iOS's UIScrollView, analyzing its partial‑display principle, deceleration behavior, bounce dynamics, parameter measurement methods, and practical applications in complex scrolling interfaces.

Mobile UIUIScrollViewanimation
0 likes · 19 min read
Understanding the Physics and Interaction Mechanics of iOS UIScrollView
vivo Internet Technology
vivo Internet Technology
Oct 13, 2021 · Mobile Development

Jetpack Compose Animation Tutorial

This Jetpack Compose animation tutorial demonstrates how to create state‑driven, visibility, size, cross‑fade, single‑value, and composite animations using declarative APIs such as remember, mutableStateOf, AnimatedVisibility, animateContentSize, animate*AsState, and updateTransition, showing concise Kotlin code that simplifies UI animation development.

AndroidComposeJetpack Compose
0 likes · 10 min read
Jetpack Compose Animation Tutorial
Aotu Lab
Aotu Lab
Sep 24, 2021 · Frontend Development

How CSS3 Transforms Create Composite Layers for Faster Animations

This article explains how CSS3 transforms and related properties promote elements to composite layers, detailing the browser rendering pipeline, the role of the GPU, practical demos, performance observations, and techniques for inspecting and optimizing animation performance in modern front‑end development.

CSSanimationfrontend development
0 likes · 9 min read
How CSS3 Transforms Create Composite Layers for Faster Animations
php Courses
php Courses
Sep 18, 2021 · Frontend Development

Pure CSS Sun‑Earth‑Moon Orbital Animation Tutorial

This article demonstrates how to create a pure‑CSS animation of the Sun, Earth and Moon orbital motion using simple HTML divs, Flexbox/Grid layout, gradient colors, and CSS keyframe animations, with full source code and styling details provided.

CSSFlexboxHTML
0 likes · 6 min read
Pure CSS Sun‑Earth‑Moon Orbital Animation Tutorial
58UXD
58UXD
Sep 18, 2021 · Game Development

Mastering C4D Bone Binding for Engaging H5 Game Animations

This guide explains how to create and bind skeletal rigs in Cinema 4D for H5 games, covering IK/FK fundamentals, using the joint tool, mirroring bones, applying the cMotion system, and leveraging Mixamo animation libraries to quickly add lifelike character motions.

C4DH5 gameIK
0 likes · 8 min read
Mastering C4D Bone Binding for Engaging H5 Game Animations
Alibaba Terminal Technology
Alibaba Terminal Technology
Sep 8, 2021 · Game Development

What’s New in Oasis Engine 0.5? Major Animation, Rendering, and Physics Upgrades

Oasis Engine 0.5 introduces a redesigned animation system with Animator, BlendShape support, a revamped PBR material interface using spherical harmonics, new 2D SpriteAtlas tools, enhanced physics APIs, expanded Spine and Lottie components, plus dozens of examples and higher test coverage, setting the stage for the upcoming 0.6 milestone.

Game DevelopmentOasis EnginePhysics
0 likes · 11 min read
What’s New in Oasis Engine 0.5? Major Animation, Rendering, and Physics Upgrades
New Oriental Technology
New Oriental Technology
Jul 19, 2021 · Frontend Development

Implementing a Simple Tween/Easing Library in TypeScript

This article introduces a lightweight TypeScript tween library, explains its core classes HTweenLite and HTween, details the implementation of various easing functions, and demonstrates how to use the library to perform data-driven animations without relying on any specific UI framework.

EasingLibraryTween
0 likes · 15 min read
Implementing a Simple Tween/Easing Library in TypeScript
Taobao Frontend Technology
Taobao Frontend Technology
Jul 5, 2021 · Frontend Development

Alibaba’s 618 Interactive: Front‑End Animation, Shake‑to‑Shake & On‑Device AI

The article details how Alibaba’s 618 e‑commerce interactive event revived the Star Show Cat IP, employing sophisticated front‑end animation techniques with Spine and Lottie, implementing a proximity‑based shake‑to‑shake partnership using GeoHash location matching, and exploring on‑device AI for intelligent user guidance, illustrating the evolution of the Taobao interactive front‑end technology stack.

AIGeoHashMobile
0 likes · 13 min read
Alibaba’s 618 Interactive: Front‑End Animation, Shake‑to‑Shake & On‑Device AI
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 31, 2021 · Frontend Development

How NetEase’s Color Test H5 Was Built: SPA Architecture, Animations, and Result Logic

This article details the technical implementation of NetEase Cloud Music’s color‑test H5, covering its single‑page React architecture, preloading optimizations, canvas and WebGL animation techniques, and the deterministic front‑end algorithm that calculates single‑ or dual‑color results from user choices.

CanvasMatter.jsReact
0 likes · 10 min read
How NetEase’s Color Test H5 Was Built: SPA Architecture, Animations, and Result Logic
ByteFE
ByteFE
May 11, 2021 · Frontend Development

Leveraging CSS @property (Houdini) for Advanced Animations and Custom Property Control

This article introduces the CSS @property at‑rule, explains how it extends the Houdini API to define typed custom properties with defaults and inheritance, and demonstrates a series of practical animations—including gradient transitions, conic‑gradient pie charts, length‑based underline effects, and a full‑screen saver—by rewriting traditional CSS with @property definitions and showcasing the required code snippets.

CSSHoudiniProperty
0 likes · 13 min read
Leveraging CSS @property (Houdini) for Advanced Animations and Custom Property Control
Taobao Frontend Technology
Taobao Frontend Technology
Apr 28, 2021 · Frontend Development

How Alibaba’s Taobao Gold Upgrade Revolutionized Frontend Game Development

This article details the evolution of the Taobao Gold product, the challenges faced during its upgrade to a town-themed experience, and the frontend solutions—including a mixed DOM‑Canvas architecture, layered rendering, animation techniques, performance optimizations, and accessibility implementations for visually impaired users.

CanvasGame Developmentaccessibility
0 likes · 19 min read
How Alibaba’s Taobao Gold Upgrade Revolutionized Frontend Game Development
Aotu Lab
Aotu Lab
Apr 9, 2021 · Frontend Development

Mastering Mini‑Program Animations: From createAnimation to CSS3 and Taro Integration

This article walks through the three animation approaches supported by WeChat mini‑programs—createAnimation, this.animate, and CSS3—provides detailed code examples, shows how to integrate Animate.css, and explains using Taro’s page‑scroll and IntersectionObserver techniques to sequence entrance, emphasis, and exit animations.

TaroWeChat Mini Programanimation
0 likes · 13 min read
Mastering Mini‑Program Animations: From createAnimation to CSS3 and Taro Integration
58UXD
58UXD
Mar 26, 2021 · Game Development

How to Create a High‑Quality 3D Spring Festival Cow Character from Concept to Animation

This article walks through the complete production pipeline for the 2024 Spring Festival ‘Cow’ mascot, covering concept research, original illustration, low‑poly modeling, high‑detail sculpting, UV layout with RizomUV, material setup, lighting and rendering in C4D, and final Lottie‑based animation, offering practical tips and lessons learned.

3D ModelingC4DRendering
0 likes · 9 min read
How to Create a High‑Quality 3D Spring Festival Cow Character from Concept to Animation
Sohu Tech Products
Sohu Tech Products
Mar 17, 2021 · Mobile Development

Understanding CADisplayLink, RunLoop, and CoreAnimation in iOS Rendering

This article explains how CADisplayLink registers VSync signals via a mach port, how RunLoop sources and observers process those signals, the impact of adding multiple display links, and the role of CATransaction in committing layer updates and driving iOS UI animation.

CADisplayLinkCoreAnimationMobile Development
0 likes · 12 min read
Understanding CADisplayLink, RunLoop, and CoreAnimation in iOS Rendering
ByteFE
ByteFE
Mar 14, 2021 · Frontend Development

Exploring @property and Its Animating Powers

This article explains how the CSS @property rule lets developers define the syntax, initial value, and inheritance behavior of custom properties, enabling type‑checked animations and transitions that were previously impossible with plain string‑based CSS variables.

CSSCustom PropertiesProperty
0 likes · 25 min read
Exploring @property and Its Animating Powers
ByteFE
ByteFE
Mar 11, 2021 · Frontend Development

Exploring CSS @property: Type Checking, Animations, and Creative Uses

This article introduces the CSS @property rule, explains how it enables type‑checking for custom properties, and demonstrates a variety of animation techniques—including color cycles, gradients, transforms, and numeric counters—to showcase the powerful new possibilities for modern front‑end development.

CSSPropertyanimation
0 likes · 11 min read
Exploring CSS @property: Type Checking, Animations, and Creative Uses
Top Architect
Top Architect
Feb 25, 2021 · Mobile Development

Why Android Activity onStop/onDestroy Is Delayed by 10 Seconds When an Infinite Animation Is Running

The article explains that an infinite View animation continuously posts invalidate messages to the MessageQueue, preventing the idle handler from running and causing the Activity's onStop and onDestroy callbacks, scheduled with a 10‑second idle timeout, to be delayed until the queue becomes idle.

ActivityLifecycleAndroidIdleHandler
0 likes · 28 min read
Why Android Activity onStop/onDestroy Is Delayed by 10 Seconds When an Infinite Animation Is Running
ByteFE
ByteFE
Dec 23, 2020 · Frontend Development

F2 Source Code Analysis: Chart Library Architecture and Mobile Adaptation

This article provides a comprehensive analysis of AntV's F2 chart library, covering its graphics grammar foundation, modular architecture, implementation details, and mobile adaptation challenges, offering valuable insights for developers working with data visualization.

AntVCanvasChart Library
0 likes · 39 min read
F2 Source Code Analysis: Chart Library Architecture and Mobile Adaptation
58UXD
58UXD
Nov 16, 2020 · Game Development

Why Blender Is the Ultimate Free 3D Creation Suite for Creators

This article explores Blender’s open‑source origins, key advantages like cross‑platform support and comprehensive toolsets, guides beginners through installation and interface basics, showcases its capabilities from modeling to VFX, and offers practical tips for maximizing productivity in 3D projects.

3D ModelingBlenderGame Development
0 likes · 9 min read
Why Blender Is the Ultimate Free 3D Creation Suite for Creators
Beike Product & Technology
Beike Product & Technology
Nov 13, 2020 · Mobile Development

Master Flutter Animations: From Basics to Advanced Transitions

This article explains Flutter's animation system, covering core concepts like Animation, AnimationController, CurvedAnimation, Tween, and listeners, then demonstrates basic and combined animations, introduces system widgets such as AnimatedContainer and AnimatedCrossFade, and shows how to create custom page transitions with PageRouteBuilder and Hero.

DARTFlutterMobile Development
0 likes · 19 min read
Master Flutter Animations: From Basics to Advanced Transitions
Aotu Lab
Aotu Lab
Oct 22, 2020 · Frontend Development

October Tech Highlights: NPM 7, HTTP/3, Webpack 5 Federation, iOS Scroll Physics

This article reviews October's key tech updates, covering NPM v7's new workspace and peer‑dependency features, Chrome's rollout of HTTP/3 over QUIC, Webpack 5's Module Federation for JavaScript architecture, the physics behind iOS UIScrollView animations, Chinese web‑font handling, the lightweight SVGA animation format, and a 1 KB JavaScript 3D game demo.

QUICanimationhttp3
0 likes · 6 min read
October Tech Highlights: NPM 7, HTTP/3, Webpack 5 Federation, iOS Scroll Physics
Aotu Lab
Aotu Lab
Oct 22, 2020 · Frontend Development

Master CSS Animations: From Simple Transitions to Advanced SVG Loading Effects

This article provides a comprehensive guide to CSS animation techniques, covering basic transition and animation properties, continuous scrolling, bounce effects, like button bursts, SVG‑based loading and progress bars, typing simulations, frame‑by‑frame sprite animations, and the use of steps() for timing control, all illustrated with practical code examples.

CSSSVGWeb
0 likes · 13 min read
Master CSS Animations: From Simple Transitions to Advanced SVG Loading Effects
58UXD
58UXD
Sep 8, 2020 · Product Management

Designing Live-Streaming Dating Gifts: From Emotional Metrics to 3D Animation

An in‑depth look at how 58’s local‑market live‑stream dating product designs interactive gifts, defines emotional metrics, and creates visual and animation assets—from sketch to 3D—aimed at boosting user engagement and revenue in the under‑served single‑person segment.

User experienceanimationemotional metrics
0 likes · 7 min read
Designing Live-Streaming Dating Gifts: From Emotional Metrics to 3D Animation
58UXD
58UXD
Aug 27, 2020 · Mobile Development

Avoid Common SVGA Animation Pitfalls: A Practical Guide for Mobile Developers

This article summarizes the key challenges and solutions when using SVGA animations in mobile live‑gift scenarios, covering import issues, frame extraction, compression, composition size, frame‑rate rules, and supported effects to help developers create smooth, lightweight animations.

MobileSVGAanimation
0 likes · 9 min read
Avoid Common SVGA Animation Pitfalls: A Practical Guide for Mobile Developers
JD.com Experience Design Center
JD.com Experience Design Center
Aug 10, 2020 · Frontend Development

How JD’s ‘My Exclusive’ 618 Page Boosted Conversions with Front‑End Innovations

The article details JD.com’s “My Exclusive” 618 page redesign, describing how user‑centric browsing flows, exclusive visual atmospheres, and front‑end techniques like SVG gradients, IntersectionObserver animations, and dynamic gift‑pack effects boosted conversion rates and service growth during the promotion.

animationconversion optimizatione‑commerce
0 likes · 12 min read
How JD’s ‘My Exclusive’ 618 Page Boosted Conversions with Front‑End Innovations
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Aug 6, 2020 · Frontend Development

APNG Animation Implementation: Canvas 2D and WebGL Rendering

The article explains APNG’s file structure and decoding process, then demonstrates how to render animated PNGs on the web using both Canvas 2D (with drawImage, clearRect, getImageData, putImageData) and WebGL (via multiple textures and custom disposal/blending handling) for efficient, controllable animation playback.

APNGCanvas 2DJavaScript
0 likes · 12 min read
APNG Animation Implementation: Canvas 2D and WebGL Rendering
Tencent Music Tech Team
Tencent Music Tech Team
Jul 2, 2020 · Mobile Development

Lottie Animation Principles and Implementation Overview

The article thoroughly examines Lottie animation technology, describing how After Effects projects are converted into JSON, parsed into Objective‑C data models such as LOTComposition and LOTLayer, and rendered on iOS/Android via Core Animation, detailing asset handling, layer hierarchy, frame interpolation, and implementation specifics.

AndroidCoreAnimationJSON
0 likes · 13 min read
Lottie Animation Principles and Implementation Overview
Liangxu Linux
Liangxu Linux
Jun 21, 2020 · Fundamentals

How 120,000 Lines of Code Became a Dancing Cai Xukun Animation

A Bilibili creator named NyeJu generated 120,000 lines of compilable C++ code that, through precise color‑coded patterns, animates a singing, dancing, rap‑performing version of Cai Xukun, detailing the workflow from theme selection to frame‑by‑frame color mapping and automated code generation.

C++Code GenerationPython
0 likes · 5 min read
How 120,000 Lines of Code Became a Dancing Cai Xukun Animation
Xianyu Technology
Xianyu Technology
May 22, 2020 · Mobile Development

Implementing Lottie Animations in Flutter and Android: Architecture and Code Overview

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.

FlutterGraphicsLottie
0 likes · 20 min read
Implementing Lottie Animations in Flutter and Android: Architecture and Code Overview
WecTeam
WecTeam
May 13, 2020 · Frontend Development

How to Build Complex CSS Animations for a Real‑World Mini‑Game

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.

BezierVueanimation
0 likes · 26 min read
How to Build Complex CSS Animations for a Real‑World Mini‑Game
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jan 18, 2020 · Frontend Development

How We Overcame Video and Audio Pitfalls in a Holiday Web Event

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.

animationaudiofrontend
0 likes · 14 min read
How We Overcame Video and Audio Pitfalls in a Holiday Web Event
Alibaba Cloud Developer
Alibaba Cloud Developer
Jan 7, 2020 · Game Development

Designing Candy: A Lightweight Flutter Game Engine for In‑App Mini‑Games

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.

Event SystemFlutterGUI
0 likes · 12 min read
Designing Candy: A Lightweight Flutter Game Engine for In‑App Mini‑Games