前端面试题手册

Garfish 的路由管理系统是微前端架构的核心组件之一，负责协调主应用和子应用之间的路由关系。路由管理核心功能1. 路由注册子应用路由配置：每个子应用需要声明自己的路由规则路由前缀：为子应用设置独立的路由前缀，避免冲突路由映射：建立 URL 与子应用的映射关系示例配置：Garfish.run({ apps: [ { name: 'app1', entry: '//localhost:3001', activeWhen: '/app1', routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] } ]});2. 路由监听与分发监听 URL 变化：自动监听浏览器路由变化路由匹配：根据 URL 匹配对应的子应用路由分发：将路由信息传递给对应的子应用支持多种路由模式：History API、Hash 模式3. 路由同步主子应用同步：保持主应用和子应用的路由状态一致跨应用导航：支持从子应用导航到其他子应用路由参数传递：在应用切换时传递路由参数面包屑导航：支持跨应用的面包屑导航4. 路由守卫全局前置守卫：在路由切换前执行逻辑应用级守卫：针对特定子应用的路由守卫权限控制：基于路由的权限验证示例：Garfish.router.beforeEach((to, from) => { if (to.path === '/admin' && !hasPermission()) { return '/login'; }});路由隔离策略1. 路由前缀隔离每个子应用拥有独立的路由前缀避免路由冲突便于路由管理和维护2. 路由作用域子应用只能访问自己的路由空间防止子应用间的路由干扰确保路由的独立性和安全性3. 路由降级在子应用加载失败时提供降级路由显示错误页面或重定向到安全页面提升用户体验最佳实践统一路由规范：制定统一的路由命名和结构规范路由懒加载：结合路由懒加载优化性能路由缓存：合理使用路由缓存减少重复加载错误处理：完善路由错误处理机制SEO 优化：确保路由配置支持 SEO通过有效的路由管理，可以实现子应用间的无缝切换和协同工作。

Garfish 的错误处理和降级机制确保微前端应用在出现异常时能够优雅降级，提供良好的用户体验。错误处理机制1. 子应用加载错误错误类型：网络错误、资源加载失败、脚本执行错误处理策略：自动重试机制提供错误提示加载备用版本配置示例：{ name: 'app1', entry: '//localhost:3001', errorBoundary: { onError: (error) => { console.error('子应用加载失败:', error); // 上报错误日志 reportError(error); }, fallback: () => { // 显示降级页面 return <ErrorPage message="应用加载失败，请稍后重试" />; } }}2. 运行时错误错误类型：JavaScript 运行时错误、组件渲染错误处理策略：使用错误边界捕获隔离错误影响范围提供错误恢复机制示例：// React 错误边界class ErrorBoundary extends React.Component { componentDidCatch(error, errorInfo) { // 捕获子应用错误 Garfish.emit('app-error', { error, errorInfo }); } render() { if (this.state.hasError) { return <ErrorFallback />; } return this.props.children; }}3. 生命周期错误错误类型：bootstrap、mount、unmount 执行失败处理策略：捕获生命周期函数错误确保资源正确清理提供错误回调示例：export async function mount(container) { try { ReactDOM.render(<App />, container); } catch (error) { // 清理已渲染的内容 container.innerHTML = ''; throw error; }}降级策略1. 应用级降级策略：当子应用加载失败时，显示降级页面实现方式：配置 fallback 组件显示静态内容提供重试按钮示例：{ name: 'app1', entry: '//localhost:3001', fallback: { component: () => ( <div className="fallback"> <h3>应用暂时不可用</h3> <button onClick={() => window.location.reload()}> 重新加载 </button> </div> ) }}2. 功能级降级策略：当部分功能失败时，降级到简化版本实现方式：检测功能可用性提供替代方案逐步恢复功能示例：// 检测 API 可用性async function checkApiAvailability() { try { await fetch('/api/health'); return true; } catch { return false; }}// 根据可用性选择实现const Component = apiAvailable ? FullFeature : SimplifiedFeature;3. 性能降级策略：在性能不足时降低功能复杂度实现方式：禁用动画效果减少数据加载量使用简化版组件示例：// 检测设备性能const isLowPerformance = /low-performance/.test(navigator.userAgent);// 根据性能选择组件const AnimationComponent = isLowPerformance ? SimpleAnimation : FullAnimation;错误监控与日志1. 错误收集收集所有子应用的错误信息记录错误上下文统一错误格式2. 错误上报实时上报错误到监控系统批量上报减少网络请求支持离线缓存3. 错误分析统计错误频率和类型分析错误影响范围生成错误报告最佳实践1. 错误预防完善的单元测试和集成测试代码审查和质量检查预发布环境验证2. 错误恢复提供自动重试机制实现手动恢复选项保存用户状态避免数据丢失3. 用户体验友好的错误提示清晰的错误说明提供解决方案建议4. 监控告警设置错误阈值告警实时监控错误率快速响应严重错误通过完善的错误处理和降级机制，可以确保微前端应用的稳定性和可靠性。

Garfish 是一个轻量级的微前端框架，主要用于解决大型前端项目的复杂性和维护性问题。它通过沙箱技术隔离不同子应用的运行环境，确保各个微应用之间的独立性和安全性。核心特点包括：沙箱隔离：使用 JavaScript 沙箱隔离不同子应用的全局变量和副作用，防止应用间相互干扰多种加载方式：支持异步加载和预加载，优化整体性能和用户体验框架无关：兼容 React、Vue、Angular 等主流前端框架，允许不同技术栈的应用共存生命周期管理：提供完整的生命周期钩子，包括 bootstrap、mount、unmount 等路由管理：内置路由系统，支持子应用的路由注册和切换样式隔离：通过 CSS 作用域或其他机制确保子应用样式不冲突Garfish 的优势在于：轻量级设计，性能开销小灵活的架构，易于集成到现有项目完善的开发工具和调试支持活跃的社区和持续的更新维护使用场景包括企业级后台管理系统、电商平台、多团队协作的大型项目等。

Garfish 支持多种子应用加载方式，以适应不同的场景和性能需求。加载方式1. 同步加载特点：在主应用启动时立即加载子应用适用场景：核心子应用、必须立即使用的功能优势：首次访问速度快，无需等待劣势：主应用启动时间长，资源占用大配置示例：{ name: 'core-app', entry: '//localhost:3001', activeWhen: '/core', loadMode: 'sync'}2. 异步加载特点：在需要时才加载子应用适用场景：非核心功能、按需加载的模块优势：减少初始加载时间，节省资源劣势：首次访问子应用时需要等待加载配置示例：{ name: 'feature-app', entry: '//localhost:3002', activeWhen: '/feature', loadMode: 'async'}3. 预加载特点：在主应用空闲时提前加载子应用适用场景：可能被访问的子应用、提升用户体验优势：访问时无需等待，用户体验好劣势：占用网络和内存资源配置示例：{ name: 'dashboard', entry: '//localhost:3003', activeWhen: '/dashboard', loadMode: 'preload', preloadDelay: 2000 // 延迟2秒后预加载}4. 懒加载特点：首次访问时才开始加载适用场景：低频使用的功能、大型模块优势：最大化节省资源劣势：首次访问有延迟配置示例：{ name: 'settings', entry: '//localhost:3004', activeWhen: '/settings', loadMode: 'lazy'}加载策略选择基于业务重要性核心业务：同步加载或预加载次要业务：异步加载辅助功能：懒加载基于访问频率高频访问：预加载或同步加载中频访问：异步加载低频访问：懒加载基于资源大小小型应用：同步加载中型应用：异步加载大型应用：懒加载性能优化技巧1. 资源压缩压缩 JavaScript 和 CSS 文件使用 Webpack 的代码分割功能启用 Gzip 或 Brotli 压缩2. 缓存策略合理设置 HTTP 缓存头使用 Service Worker 缓存资源实现子应用缓存机制3. 并行加载支持多个子应用并行加载使用 CDN 加速资源加载优化网络请求4. 加载优先级设置子应用的加载优先级优先加载关键资源延迟加载非关键资源监控与调试加载状态监控监听子应用加载事件记录加载时间和成功率统计加载失败原因错误处理实现加载失败的降级方案提供友好的错误提示自动重试机制合理选择加载策略可以显著提升微前端应用的性能和用户体验。

Garfish 提供了完整的生命周期管理机制，确保子应用的加载、挂载、更新和卸载过程可控且可预测。生命周期钩子1. bootstrap（初始化）触发时机：子应用首次加载时作用：执行子应用的初始化逻辑，如配置加载、依赖注入只执行一次：在子应用生命周期中只调用一次示例：export function bootstrap() { console.log('子应用初始化'); return Promise.resolve();}2. mount（挂载）触发时机：子应用需要渲染到页面时作用：将子应用渲染到指定的容器中可多次调用：每次路由切换到该子应用时都会触发示例：export function mount(container) { ReactDOM.render(<App />, container); return Promise.resolve();}3. unmount（卸载）触发时机：子应用需要从页面移除时作用：清理子应用的 DOM、事件监听、定时器等资源必须执行：确保完全清理，避免内存泄漏示例：export function unmount(container) { ReactDOM.unmountComponentAtNode(container); return Promise.resolve();}4. update（更新）触发时机：子应用需要更新时（可选）作用：处理子应用的更新逻辑非必需：不是所有子应用都需要实现示例：export function update(props) { // 处理属性更新 return Promise.resolve();}生命周期流程首次加载：bootstrap → mount路由切换：unmount（旧应用）→ mount（新应用）重新激活：直接调用 mount（不重复 bootstrap）完全卸载：unmount + 清理所有资源最佳实践异步处理：所有生命周期函数都应返回 Promise错误处理：在生命周期中添加错误捕获逻辑资源清理：在 unmount 中彻底清理所有副作用性能优化：避免在 mount 中执行耗时操作状态管理：合理管理子应用的状态，避免重复初始化通过合理使用生命周期钩子，可以确保子应用的稳定运行和资源的有效管理。

JavaScript 与 SVG 的结合可以实现强大的动态交互功能。以下是 JavaScript 操作 SVG 的主要方法：1. 选择 SVG 元素使用标准 DOM 方法选择 SVG 元素。// 通过 ID 选择const circle = document.getElementById('myCircle');// 通过类名选择const circles = document.querySelectorAll('.circle');// 通过标签名选择const allRects = document.querySelectorAll('rect');// 通过属性选择const filledElements = document.querySelectorAll('[fill="red"]');2. 创建 SVG 元素使用 createElementNS 创建 SVG 元素（注意命名空间）。const svgNS = 'http://www.w3.org/2000/svg';// 创建 SVG 元素const circle = document.createElementNS(svgNS, 'circle');circle.setAttribute('cx', '100');circle.setAttribute('cy', '100');circle.setAttribute('r', '50');circle.setAttribute('fill', 'blue');// 添加到 SVGconst svg = document.querySelector('svg');svg.appendChild(circle);3. 修改 SVG 属性使用 setAttribute 和 getAttribute 方法。const circle = document.querySelector('circle');// 修改属性circle.setAttribute('fill', 'red');circle.setAttribute('r', '60');circle.setAttribute('stroke', 'black');circle.setAttribute('stroke-width', '3');// 获取属性const fill = circle.getAttribute('fill');const radius = circle.getAttribute('r');4. 修改 SVG 样式使用 style 属性或 classList。const circle = document.querySelector('circle');// 直接设置样式circle.style.fill = 'green';circle.style.opacity = '0.5';circle.style.transform = 'scale(1.2)';// 使用 classListcircle.classList.add('highlight');circle.classList.remove('normal');circle.classList.toggle('active');5. 事件监听为 SVG 元素添加事件监听器。const circle = document.querySelector('circle');// 鼠标事件circle.addEventListener('click', function() { console.log('Circle clicked!'); this.setAttribute('fill', 'red');});circle.addEventListener('mouseover', function() { this.style.cursor = 'pointer';});circle.addEventListener('mouseout', function() { this.style.cursor = 'default';});// 键盘事件（需要 tabindex）circle.setAttribute('tabindex', '0');circle.addEventListener('keydown', function(event) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); console.log('Circle activated!'); }});6. 动画实现使用 JavaScript 实现 SVG 动画。const circle = document.querySelector('circle');// 使用 requestAnimationFramelet progress = 0;function animate() { progress += 0.01; const x = 100 + Math.sin(progress * 2 * Math.PI) * 50; circle.setAttribute('cx', x); if (progress < 1) { requestAnimationFrame(animate); }}animate();// 使用 CSS 过渡circle.style.transition = 'all 0.5s ease';circle.setAttribute('fill', 'red');circle.setAttribute('r', '60');7. 获取鼠标位置获取鼠标在 SVG 中的相对位置。const svg = document.querySelector('svg');svg.addEventListener('click', function(event) { const point = svg.createSVGPoint(); point.x = event.clientX; point.y = event.clientY; const svgPoint = point.matrixTransform(svg.getScreenCTM().inverse()); console.log(`SVG coordinates: x=${svgPoint.x}, y=${svgPoint.y}`);});8. 拖拽功能实现 SVG 元素的拖拽。let selectedElement = null;let offset = { x: 0, y: 0 };function getMousePosition(evt) { const CTM = svg.getScreenCTM(); return { x: (evt.clientX - CTM.e) / CTM.a, y: (evt.clientY - CTM.f) / CTM.d };}function startDrag(evt) { selectedElement = evt.target; offset = getMousePosition(evt); offset.x -= parseFloat(selectedElement.getAttribute('cx')); offset.y -= parseFloat(selectedElement.getAttribute('cy'));}function drag(evt) { if (selectedElement) { evt.preventDefault(); const coord = getMousePosition(evt); selectedElement.setAttribute('cx', coord.x - offset.x); selectedElement.setAttribute('cy', coord.y - offset.y); }}function endDrag(evt) { selectedElement = null;}const svg = document.querySelector('svg');svg.addEventListener('mousedown', startDrag);svg.addEventListener('mousemove', drag);svg.addEventListener('mouseup', endDrag);svg.addEventListener('mouseleave', endDrag);9. 动态创建复杂图形使用 JavaScript 动态创建复杂的 SVG 图形。function createStar(cx, cy, spikes, outerRadius, innerRadius) { const svgNS = 'http://www.w3.org/2000/svg'; const polygon = document.createElementNS(svgNS, 'polygon'); let points = []; for (let i = 0; i < spikes * 2; i++) { const radius = i % 2 === 0 ? outerRadius : innerRadius; const angle = (Math.PI / spikes) * i; const x = cx + Math.cos(angle) * radius; const y = cy + Math.sin(angle) * radius; points.push(`${x},${y}`); } polygon.setAttribute('points', points.join(' ')); polygon.setAttribute('fill', 'gold'); polygon.setAttribute('stroke', 'orange'); polygon.setAttribute('stroke-width', '2'); return polygon;}const svg = document.querySelector('svg');const star = createStar(100, 100, 5, 50, 25);svg.appendChild(star);10. 数据可视化使用 SVG 和 JavaScript 创建数据可视化。const data = [10, 25, 40, 30, 50];const svg = document.querySelector('svg');const barWidth = 40;const gap = 20;data.forEach((value, index) => { const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); const x = 20 + index * (barWidth + gap); const y = 200 - value * 3; rect.setAttribute('x', x); rect.setAttribute('y', y); rect.setAttribute('width', barWidth); rect.setAttribute('height', value * 3); rect.setAttribute('fill', `hsl(${index * 60}, 70%, 50%)`); svg.appendChild(rect);});最佳实践：使用 createElementNS 创建 SVG 元素合理使用事件委托优化动画性能，使用 requestAnimationFrame注意命名空间考虑使用 SVG 库（如 D3.js）处理复杂场景测试跨浏览器兼容性

Expo应用的国际化（i18n）是面向全球用户的重要功能。Expo支持多种国际化解决方案，使开发者能够轻松实现多语言支持。国际化库选择：i18next最流行的国际化库，功能强大且易于使用。安装：npm install i18next react-i18next expo-localization配置i18next：// i18n.tsimport i18n from 'i18next';import { initReactI18next } from 'react-i18next';import { getLocales } from 'expo-localization';const resources = { en: { translation: { welcome: 'Welcome', login: 'Login', logout: 'Logout', 'hello.name': 'Hello, {{name}}!', }, }, zh: { translation: { welcome: '欢迎', login: '登录', logout: '退出', 'hello.name': '你好，{{name}}！', }, },};i18n .use(initReactI18next) .init({ resources, lng: getLocales()[0]?.languageCode || 'en', fallbackLng: 'en', interpolation: { escapeValue: false, }, });export default i18n;使用i18next：import { useTranslation } from 'react-i18next';function WelcomeScreen() { const { t, i18n } = useTranslation(); const changeLanguage = (lang: string) => { i18n.changeLanguage(lang); }; return ( <View> <Text>{t('welcome')}</Text> <Text>{t('hello.name', { name: 'John' })}</Text> <Button title="English" onPress={() => changeLanguage('en')} /> <Button title="中文" onPress={() => changeLanguage('zh')} /> </View> );}expo-localizationExpo官方的本地化库，用于获取设备语言设置。使用expo-localization：import * as Localization from 'expo-localization';function getDeviceLanguage() { const locale = Localization.locale; const languageCode = Localization.locale.split('-')[0]; console.log('Locale:', locale); console.log('Language:', languageCode); return languageCode;}获取本地化信息：function getLocalizationInfo() { const locale = Localization.locale; const timezone = Localization.timezone; const isoCurrencyCodes = Localization.isoCurrencyCodes; return { locale, timezone, currency: isoCurrencyCodes[0], };}React Native Localization轻量级的国际化解决方案。安装：npm install react-native-localize配置：import * as RNLocalize from 'react-native-localize';const translations = { en: require('./en.json'), zh: require('./zh.json'),};const fallback = { languageTag: 'en', isRTL: false };const { languageTag } = RNLocalize.findBestAvailableLanguage(Object.keys(translations)) || fallback;i18n.init({ resources: { [languageTag]: translations[languageTag], }, lng: languageTag, fallbackLng: 'en',});多语言资源管理：JSON文件结构// locales/en.json{ "common": { "ok": "OK", "cancel": "Cancel", "save": "Save" }, "auth": { "login": "Login", "logout": "Logout", "register": "Register", "forgotPassword": "Forgot Password?" }, "home": { "title": "Home", "welcome": "Welcome back!", "recentActivity": "Recent Activity" }}// locales/zh.json{ "common": { "ok": "确定", "cancel": "取消", "save": "保存" }, "auth": { "login": "登录", "logout": "退出", "register": "注册", "forgotPassword": "忘记密码？" }, "home": { "title": "首页", "welcome": "欢迎回来！", "recentActivity": "最近活动" }}命名空间组织// 使用命名空间i18n.init({ resources: { en: { common: require('./locales/en/common.json'), auth: require('./locales/en/auth.json'), home: require('./locales/en/home.json'), }, zh: { common: require('./locales/zh/common.json'), auth: require('./locales/zh/auth.json'), home: require('./locales/zh/home.json'), }, },});// 使用命名空间const { t } = useTranslation('common');<Text>{t('ok')}</Text>// 跨命名空间<Text>{t('auth:login')}</Text>日期和时间本地化：import { format } from 'date-fns';import { zhCN, enUS } from 'date-fns/locale';function formatDate(date: Date, locale: string) { const localeMap = { en: enUS, zh: zhCN, }; return format(date, 'PPP', { locale: localeMap[locale] || enUS, });}function formatDateTime(date: Date, locale: string) { return format(date, 'PPPppp', { locale: locale === 'zh' ? zhCN : enUS, });}数字和货币本地化：function formatCurrency(amount: number, locale: string) { return new Intl.NumberFormat(locale, { style: 'currency', currency: locale === 'zh' ? 'CNY' : 'USD', }).format(amount);}function formatNumber(number: number, locale: string) { return new Intl.NumberFormat(locale).format(number);}function formatPercent(value: number, locale: string) { return new Intl.NumberFormat(locale, { style: 'percent', minimumFractionDigits: 2, }).format(value);}RTL（从右到左）支持：import { I18nManager } from 'react-native';function setupRTL(locale: string) { const isRTL = locale === 'ar' || locale === 'he'; if (I18nManager.isRTL !== isRTL) { I18nManager.allowRTL(isRTL); I18nManager.forceRTL(isRTL); // 需要重启应用 Updates.reloadAsync(); }}动态语言切换：function LanguageSwitcher() { const { i18n } = useTranslation(); const [currentLang, setCurrentLang] = useState(i18n.language); const changeLanguage = async (lang: string) => { await i18n.changeLanguage(lang); setCurrentLang(lang); // 保存用户偏好 await AsyncStorage.setItem('userLanguage', lang); // 如果需要RTL支持 setupRTL(lang); }; const languages = [ { code: 'en', name: 'English' }, { code: 'zh', name: '中文' }, { code: 'es', name: 'Español' }, ]; return ( <View> {languages.map((lang) => ( <Button key={lang.code} title={lang.name} onPress={() => changeLanguage(lang.code)} disabled={currentLang === lang.code} /> ))} </View> );}最佳实践：资源文件组织按功能模块组织翻译文件使用命名空间避免冲突保持翻译文件结构一致翻译质量使用专业的翻译工具考虑文化差异和习惯定期审查和更新翻译性能优化按需加载语言包缓存翻译结果避免频繁的语言切换用户体验自动检测设备语言提供语言切换选项保存用户语言偏好测试覆盖测试所有语言的显示检查文本溢出问题验证RTL布局常见问题：翻译缺失设置fallback语言使用翻译管理工具定期检查翻译完整性文本溢出使用flex布局提供文本截断选项为不同语言调整布局动态加载使用代码分割懒加载语言包预加载常用语言通过完善的国际化实现，Expo应用可以更好地服务全球用户，提升用户体验和市场竞争力。

Lottie 动画支持多种动画类型和效果，以下是详细的分类和说明：1. 基础动画类型位置动画{ "p": { "a": 1, "k": [ { "i": {x: 0.833, y: 0.833}, "o": {x: 0.167, y: 0.167}, "t": 0, "s": [100, 100, 0] }, { "t": 60, "s": [400, 300, 0] } ] }}缩放动画{ "s": { "a": 1, "k": [ { "t": 0, "s": [100, 100, 100] }, { "t": 60, "s": [150, 150, 100] } ] }}旋转动画{ "r": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 360 } ] }}不透明度动画{ "o": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 30, "s": 100 }, { "t": 60, "s": 0 } ] }}2. 形状动画路径变形动画{ "ks": { "k": [ { "t": 0, "i": [[0, 0], [0, 0], [0, 0]], "o": [[0, 0], [0, 0], [0, 0]], "v": [[0, 0], [100, 0], [100, 100]] }, { "t": 60, "i": [[0, 0], [0, 0], [0, 0]], "o": [[0, 0], [0, 0], [0, 0]], "v": [[50, 50], [150, 50], [150, 150]] } ] }}圆角矩形动画{ "ty": "rc", "r": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 20 } ] }}椭圆动画{ "ty": "el", "s": { "a": 1, "k": [ { "t": 0, "s": [50, 50] }, { "t": 60, "s": [100, 80] } ] }}星形和多边形动画{ "ty": "sr", "pt": { "a": 1, "k": [ { "t": 0, "s": 5 }, { "t": 60, "s": 8 } ] }, "or": { "a": 1, "k": [ { "t": 0, "s": 50 }, { "t": 60, "s": 80 } ] }}3. 颜色和渐变动画填充颜色动画{ "ty": "fl", "c": { "a": 1, "k": [ { "t": 0, "s": [1, 0, 0, 1] // 红色 }, { "t": 60, "s": [0, 0, 1, 1] // 蓝色 } ] }}描边颜色动画{ "ty": "st", "c": { "a": 1, "k": [ { "t": 0, "s": [0, 0, 0, 1] }, { "t": 60, "s": [1, 1, 1, 1] } ] }}渐变动画{ "ty": "gf", "g": { "p": 1, // 线性渐变 "k": { "a": 1, "k": [ { "t": 0, "g": [ { "p": 0, "c": [1, 0, 0, 1] }, { "p": 1, "c": [0, 0, 1, 1] } ] }, { "t": 60, "g": [ { "p": 0, "c": [0, 1, 0, 1] }, { "p": 1, "c": [1, 1, 0, 1] } ] } ] } }}4. 文本动画文本内容动画{ "ty": 1, "t": { "d": { "k": [ { "t": 0, "s": { "t": "Hello", "f": "Arial", "s": 50, "j": 1, "tr": 0, "lh": 60, "ls": 0, "fc": [0, 0, 0, 1] } }, { "t": 60, "s": { "t": "World", "f": "Arial", "s": 50, "j": 1, "tr": 0, "lh": 60, "ls": 0, "fc": [0, 0, 0, 1] } } ] } }}文本追踪动画{ "t": { "d": { "k": [ { "t": 0, "s": { "t": "Hello", "ls": 0 } }, { "t": 60, "s": { "t": "Hello", "ls": 50 } } ] } }}5. 3D 变换动画3D 旋转动画{ "rx": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 180 } ] }, "ry": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 90 } ] }, "rz": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 45 } ] }}6. 遮罩和蒙版动画遮罩路径动画{ "ty": "mask", "pt": { "a": 1, "k": [ { "t": 0, "i": [[0, 0], [0, 0]], "o": [[0, 0], [0, 0]], "v": [[0, 0], [100, 0], [100, 100], [0, 100]] }, { "t": 60, "i": [[0, 0], [0, 0]], "o": [[0, 0], [0, 0]], "v": [[50, 50], [150, 50], [150, 150], [50, 150]] } ] }}蒙版不透明度动画{ "ty": "mask", "o": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 100 } ] }}7. 效果动画阴影效果动画{ "ty": 25, "nm": "Drop Shadow", "ef": [ { "ty": 1, "nm": "Shadow Color", "v": { "a": 1, "k": [ { "t": 0, "s": [0, 0, 0, 0.5] }, { "t": 60, "s": [1, 0, 0, 0.8] } ] } }, { "ty": 0, "nm": "Shadow Distance", "v": { "a": 1, "k": [ { "t": 0, "s": 5 }, { "t": 60, "s": 20 } ] } } ]}模糊效果动画{ "ty": 0, "nm": "Gaussian Blur", "ef": [ { "ty": 0, "nm": "Blurriness", "v": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 10 } ] } } ]}8. 复合动画父子层级动画{ "ty": 0, "parent": 1, "ks": { "p": { "a": 1, "k": [ { "t": 0, "s": [0, 0, 0] }, { "t": 60, "s": [100, 100, 0] } ] } }}表达式动画{ "ks": { "p": { "a": 0, "k": [ { "s": true, "ix": 2, "x": "wiggle(5, 20)" // 随机摆动表达式 } ] } }}9. 时间重映射{ "tm": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 30 } ] }}10. 缓动和缓出{ "ks": { "p": { "a": 1, "k": [ { "i": {x: 0.25, y: 1}, // 缓入 "o": {x: 0.75, y: 0}, // 缓出 "t": 0, "s": [0, 0, 0] }, { "t": 60, "s": [100, 100, 0] } ] } }}支持的动画特性总结：基础变换：位置、缩放、旋转、不透明度形状变形：路径变形、圆角、椭圆、多边形颜色动画：填充、描边、渐变文本动画：内容、大小、间距、颜色3D 变换：X/Y/Z 轴旋转、3D 位置遮罩和蒙版：路径、不透明度、混合模式效果：阴影、模糊、发光等复合动画：父子层级、表达式时间控制：时间重映射、缓动函数

Lottie 是一个由 Airbnb 开发的开源库，用于在移动应用和 Web 平台上渲染高质量的动画。它允许设计师在 Adobe After Effects 中创建动画，然后通过 Bodymovin 插件导出为 JSON 格式，开发者可以直接使用这些 JSON 文件在应用中播放动画，而无需编写复杂的动画代码。Lottie 的核心优势在于：跨平台支持：支持 iOS、Android、React Native、Web 等多个平台高性能：使用原生渲染，动画流畅且性能优异小文件体积：JSON 文件通常比 GIF 或视频文件小得多可编程控制：可以通过代码控制动画的播放、暂停、速度等矢量图形：支持缩放而不失真，适合各种屏幕尺寸技术实现方面，Lottie 通过解析 JSON 文件中的动画数据，使用各平台的绘图 API（如 iOS 的 Core Animation、Android 的 Canvas、Web 的 Canvas 或 SVG）来实时渲染动画。JSON 文件包含了图层、形状、路径、关键帧等信息，Lottie 库负责解析这些数据并创建相应的动画对象。Lottie 的工作流程：设计师在 After Effects 中创建动画使用 Bodymovin 插件导出为 JSON 文件开发者将 JSON 文件集成到项目中使用 Lottie 库加载和播放动画Lottie 支持的动画特性包括：形状动画、遮罩、蒙版、渐变、3D 变换、文本动画等。它还支持动态属性修改，允许在运行时更改动画的颜色、文本内容等。在性能优化方面，Lottie 提供了缓存机制、硬件加速、帧率控制等功能，确保动画在各种设备上都能流畅运行。

Lottie 动画相比传统的 GIF、PNG 序列帧和视频格式有显著的性能优势：1. 文件体积Lottie：JSON 文件通常只有几 KB 到几百 KB，压缩率极高GIF：文件体积较大，通常在几百 KB 到几 MBPNG 序列帧：文件体积最大，需要存储每一帧的完整图像视频：体积中等，但编码后仍有较大文件2. 渲染性能Lottie：使用原生绘图 API（Core Animation、Canvas、SVG），支持硬件加速，渲染流畅GIF：解码开销大，不支持硬件加速，容易造成卡顿PNG 序列帧：内存占用高，加载时间长，影响性能视频：解码开销中等，但播放控制不灵活3. 内存占用Lottie：内存占用低，只存储动画数据，不存储位图GIF：需要解码并缓存所有帧，内存占用高PNG 序列帧：需要加载所有图片到内存，内存占用最高视频：需要解码缓存，内存占用中等4. 交互控制Lottie：支持播放、暂停、进度控制、速度调节、反向播放等GIF：无法控制，只能循环播放PNG 序列帧：控制困难，需要手动管理帧视频：基本控制，但交互性有限5. 响应式支持Lottie：矢量图形，任意缩放不失真，适合各种屏幕尺寸GIF：位图格式，缩放会失真PNG 序列帧：位图格式，缩放会失真视频：位图格式，缩放会失真6. 动态修改Lottie：支持运行时修改颜色、文本、路径等属性GIF：无法修改PNG 序列帧：无法修改视频：无法修改7. 加载速度Lottie：文件小，加载快，支持渐进式加载GIF：加载慢，需要完整下载才能播放PNG 序列帧：加载最慢，需要下载所有帧视频：支持流媒体加载，但初始加载仍需时间性能优化建议：使用 Lottie Cache 缓存已加载的动画对于复杂动画，考虑使用 Lottie Composition合理设置动画的帧率和持续时间避免在列表中同时播放多个 Lottie 动画使用 Lottie 的 autoPlay 和 loop 属性控制播放行为