BestHub
Sign in
Tagged articles
258 articles
Page 3 of 3
Watermelon Video Tech Team
Watermelon Video Tech Team
Nov 29, 2019 · Mobile Development

Scene: ByteDance’s Open‑Source Android Single‑Activity Navigation and Composition Framework

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.

AndroidFragmentScene
0 likes · 14 min read
Scene: ByteDance’s Open‑Source Android Single‑Activity Navigation and Composition Framework
37 Interactive Technology Team
37 Interactive Technology Team
Nov 27, 2019 · Frontend Development

Building a Front-End Animation Library: Process, Implementation, and Case Studies

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.

Case StudyLibraryanimation
0 likes · 10 min read
Building a Front-End Animation Library: Process, Implementation, and Case Studies
58UXD
58UXD
Nov 20, 2019 · Product Management

Designing a Ceremony‑Driven Honor System: Medals, Visuals, and Animation Pipelines

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.

DesignProduct DesignUX
0 likes · 9 min read
Designing a Ceremony‑Driven Honor System: Medals, Visuals, and Animation Pipelines
FangDuoduo UEDC
FangDuoduo UEDC
Nov 14, 2019 · Mobile Development

Creative Loading Designs: Turning App Wait Times into Engaging Experiences

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.

animationapp performanceloading UI
0 likes · 6 min read
Creative Loading Designs: Turning App Wait Times into Engaging Experiences
Ctrip Technology
Ctrip Technology
Nov 14, 2019 · Mobile Development

Exploring Easing Curves: Physics‑Based Animation, Common Curves, MATLAB Curve Fitting, and Linear Interpolation for iOS Apps

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.

MATLABPhysicsUI animation
0 likes · 19 min read
Exploring Easing Curves: Physics‑Based Animation, Common Curves, MATLAB Curve Fitting, and Linear Interpolation for iOS Apps
360 Tech Engineering
360 Tech Engineering
Aug 23, 2019 · Frontend Development

Evolution of 360 Search Easter Egg Development and Automated Animation Tools

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.

Lottieanimationeaster egg
0 likes · 9 min read
Evolution of 360 Search Easter Egg Development and Automated Animation Tools
Seewo Tech Circle
Seewo Tech Circle
Jul 30, 2019 · Frontend Development

Create Smooth Parabolic Drop Animations with Dynamic Blur in JavaScript

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.

JavaScriptanimationdynamic blur
0 likes · 11 min read
Create Smooth Parabolic Drop Animations with Dynamic Blur in JavaScript
网易UEDC
网易UEDC
Mar 4, 2019 · Frontend Development

Turning Designer‑Written Code into Seamless Front‑End Animations for NetEase Music’s 2018 Listening Report

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.

CSSDesignSVG
0 likes · 12 min read
Turning Designer‑Written Code into Seamless Front‑End Animations for NetEase Music’s 2018 Listening Report
360 Tech Engineering
360 Tech Engineering
Jan 29, 2019 · Frontend Development

Building a Fun Lottery Program with HTML, CSS, and JavaScript

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.

Lotteryanimation
0 likes · 14 min read
Building a Fun Lottery Program with HTML, CSS, and JavaScript
Qunar Tech Salon
Qunar Tech Salon
Dec 4, 2018 · Mobile Development

Zero‑Adapter Multi‑Item RecyclerView Library for Android

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.

AdapterAndroidMulti‑Item
0 likes · 12 min read
Zero‑Adapter Multi‑Item RecyclerView Library for Android
JD Tech
JD Tech
Aug 23, 2018 · Frontend Development

Implementing Smooth Paper‑Plane Animations with CSS3, Canvas and Bezier Curves in a Mini‑Program

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.

BezierCanvasanimation
0 likes · 10 min read
Implementing Smooth Paper‑Plane Animations with CSS3, Canvas and Bezier Curves in a Mini‑Program
JD Retail Technology
JD Retail Technology
Jul 16, 2018 · Mobile Development

Android RenderThread and Asynchronous Animation Rendering: Deep Dive

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.

AndroidHardware accelerationRenderThread
0 likes · 15 min read
Android RenderThread and Asynchronous Animation Rendering: Deep Dive
网易UEDC
网易UEDC
Jul 16, 2018 · Frontend Development

Mastering SVG Animations: From Code to Interactive H5 Effects

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.

MaskingSMILWeb Development
0 likes · 24 min read
Mastering SVG Animations: From Code to Interactive H5 Effects
Tencent Music Tech Team
Tencent Music Tech Team
Jul 13, 2018 · Mobile Development

Analysis and Solutions for a Memory Leak Caused by a Repeating Animation in iOS

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.

CAAnimationObjective‑Canimation
0 likes · 10 min read
Analysis and Solutions for a Memory Leak Caused by a Repeating Animation in iOS
360 Zhihui Cloud Developer
360 Zhihui Cloud Developer
Jun 20, 2018 · Frontend Development

Unlock Stunning Canvas Animations with SpriteJS – A Complete Beginner’s Guide

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.

CanvasGraphicsJavaScript
0 likes · 32 min read
Unlock Stunning Canvas Animations with SpriteJS – A Complete Beginner’s Guide
360 Tech Engineering
360 Tech Engineering
Jun 20, 2018 · Frontend Development

Introducing SpriteJS: A Cross‑Platform Canvas Rendering Library for Animations and Data Visualization

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.

CanvasData visualizationJavaScript
0 likes · 27 min read
Introducing SpriteJS: A Cross‑Platform Canvas Rendering Library for Animations and Data Visualization
Yuewen Frontend Team
Yuewen Frontend Team
May 28, 2018 · Frontend Development

Master Simple Easing: Plug‑and‑Play Animation Algorithm for UI

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.

EasingJavaScriptUI
0 likes · 12 min read
Master Simple Easing: Plug‑and‑Play Animation Algorithm for UI
JD Tech
JD Tech
May 22, 2018 · Frontend Development

Creating Animated Wave Effects with WebGL and requestAnimationFrame

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.

ShaderWebGLanimation
0 likes · 9 min read
Creating Animated Wave Effects with WebGL and requestAnimationFrame
Tencent Cloud Developer
Tencent Cloud Developer
Apr 12, 2018 · Artificial Intelligence

AI Generates Flintstones-Style Videos from Text Descriptions

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.

AIPersonalityTextToVideo
0 likes · 4 min read
AI Generates Flintstones-Style Videos from Text Descriptions
Baixing.com Technical Team
Baixing.com Technical Team
Dec 18, 2017 · Mobile Development

Simplify Complex UICollectionView Layouts with IGListKit

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.

IGListKitListAdapterSwift
0 likes · 17 min read
Simplify Complex UICollectionView Layouts with IGListKit
Tencent Music Tech Team
Tencent Music Tech Team
Sep 8, 2017 · Mobile Development

Lottie Animation Library: Introduction, Usage, Implementation Details, and Performance on Android

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.

AndroidJSONLottie
0 likes · 14 min read
Lottie Animation Library: Introduction, Usage, Implementation Details, and Performance on Android
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jul 27, 2017 · Frontend Development

Create Stunning Wave Effects with Pure CSS, SVG, and Canvas

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.

CSSSCSSSVG
0 likes · 7 min read
Create Stunning Wave Effects with Pure CSS, SVG, and Canvas
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jul 5, 2017 · Frontend Development

Mastering CSS conic-gradient: From Basics to Stunning Visual Effects

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.

CSSPolyfillSCSS
0 likes · 10 min read
Mastering CSS conic-gradient: From Basics to Stunning Visual Effects
21CTO
21CTO
Jun 28, 2017 · Fundamentals

Unveiling the GIF Format: Structure, iOS Quirks, and Animation Mechanics

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.

File StructureGIFLZW
0 likes · 12 min read
Unveiling the GIF Format: Structure, iOS Quirks, and Animation Mechanics
Hujiang Technology
Hujiang Technology
Feb 23, 2017 · Frontend Development

Understanding CSS Timing Functions: cubic-bezier() and steps()

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.

animationcubic-bezierfrontend
0 likes · 20 min read
Understanding CSS Timing Functions: cubic-bezier() and steps()
Hujiang Design Center
Hujiang Design Center
Jan 19, 2017 · Fundamentals

What Will Define Visual Design in 2017? Key Trends and Insights

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.

animationdesign trendsgradient
0 likes · 9 min read
What Will Define Visual Design in 2017? Key Trends and Insights
Qudian (formerly Qufenqi) Technology Team
Qudian (formerly Qufenqi) Technology Team
Jan 17, 2017 · Frontend Development

Why requestAnimationFrame Beats setTimeout for Smooth Animations – A Deep Dive

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.

Webanimationfrontend
0 likes · 9 min read
Why requestAnimationFrame Beats setTimeout for Smooth Animations – A Deep Dive
Qunar Tech Salon
Qunar Tech Salon
Jan 13, 2017 · Frontend Development

Building Smooth Animations: Understanding FPS, Browser Rendering Process, and Performance Optimization Techniques

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.

BrowserRenderinganimation
0 likes · 24 min read
Building Smooth Animations: Understanding FPS, Browser Rendering Process, and Performance Optimization Techniques
Tencent TDS Service
Tencent TDS Service
Jan 5, 2017 · Mobile Development

Mastering RecyclerView: From Basics to Advanced Features

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.

AdapterAndroidItemDecoration
0 likes · 23 min read
Mastering RecyclerView: From Basics to Advanced Features
CSS Magic
CSS Magic
Dec 19, 2016 · Frontend Development

Quick Q&A #5: CSS Backgrounds, Animation Compatibility, and Front‑End Career Tips

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.

CSSJavaScriptVue.js
0 likes · 8 min read
Quick Q&A #5: CSS Backgrounds, Animation Compatibility, and Front‑End Career Tips
Aotu Lab
Aotu Lab
Dec 9, 2016 · Frontend Development

Mastering CSS3 Animations: Practical Tips, Timing & Advanced Techniques

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.

Web Developmentanimationanimation-delay
0 likes · 9 min read
Mastering CSS3 Animations: Practical Tips, Timing & Advanced Techniques
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Sep 26, 2016 · Frontend Development

Responsive Mobile Event Promotion Pages: Full‑Screen Layouts, Background‑Size Tricks & Animation Tips

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.

CSSResponsive Designanimation
0 likes · 10 min read
Responsive Mobile Event Promotion Pages: Full‑Screen Layouts, Background‑Size Tricks & Animation Tips
Tencent Music Tech Team
Tencent Music Tech Team
May 25, 2016 · Mobile Development

Understanding Material Design: Concepts, Components, and Animation Implementations in Android

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.

Android UICoordinatorLayoutMaterial Design
0 likes · 18 min read
Understanding Material Design: Concepts, Components, and Animation Implementations in Android
Tencent TDS Service
Tencent TDS Service
Apr 14, 2016 · Frontend Development

Build a Simple Canvas Particle Engine from Scratch

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.

CanvasJavaScriptParticle Engine
0 likes · 12 min read
Build a Simple Canvas Particle Engine from Scratch
Aotu Lab
Aotu Lab
Mar 31, 2016 · Frontend Development

Mastering CSS3 Animations: Transforms, Timing Functions, and Keyframes Explained

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.

animationkeyframestransform
0 likes · 5 min read
Mastering CSS3 Animations: Transforms, Timing Functions, and Keyframes Explained
ITPUB
ITPUB
Dec 1, 2015 · Mobile Development

Meizu’s Hybrid Mobile App Blueprint: Integration, Build Workflow, and Performance Hacks

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.

Hybrid AppMobile DevelopmentPerformance Optimization
0 likes · 13 min read
Meizu’s Hybrid Mobile App Blueprint: Integration, Build Workflow, and Performance Hacks
Meiyou UED
Meiyou UED
Sep 1, 2015 · Fundamentals

How Flat Design Transforms ACG: From Anime to Game Art

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.

ACGVisual Perceptionanimation
0 likes · 8 min read
How Flat Design Transforms ACG: From Anime to Game Art
Suning Design
Suning Design
Oct 29, 2014 · Mobile Development

How Apple’s Teams Prototype iOS Apps Using Only Keynote

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.

KeynoteUXanimation
0 likes · 7 min read
How Apple’s Teams Prototype iOS Apps Using Only Keynote
Suning Design
Suning Design
May 15, 2014 · Frontend Development

9 Proven Web Design Techniques to Make Your Mobile Sites Stand Out

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.

CSSMobileResponsive
0 likes · 4 min read
9 Proven Web Design Techniques to Make Your Mobile Sites Stand Out