用途:该技能用于创建让用户感到温暖、受欢迎、愿意互动的界面动画,核心是温和、不具压迫感的运动,让用户感到舒适并主动参与。
主要能力:以迪士尼动画十二原则为框架,逐条给出友好化的实现取向。挤压与拉伸采用10-20%的柔和形变;预备动作100-150ms,温和预告意图;舞台调度强调开放、邀请式构图;连续动作保留轻微自发性以显人性化;跟随与重叠动作自然柔和收尾;缓入缓出使用平滑曲线,入场用ease-out;弧线采用自然放松的曲线;次要动作如轻挥手、点头;时长控制在200-350ms的对话式节奏;夸张程度10-20%;扎实造型用柔和圆润形态;吸引力体现在暖色与圆角。
时长与缓动建议:欢迎淡入250-350ms用ease-out;滑入300-400ms用ease-out;悬停响应150-200ms用ease-out;展开/揭示250-350ms用ease-in-out。CSS缓动变量为:--friendly-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --friendly-enter: cubic-bezier(0.0, 0, 0.2, 1); --friendly-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);
欢迎式模式:提供friendly-wave与friendly-appear两个关键帧示例,前者通过旋转角度变化模拟挥手,后者以透明度与缩放位移实现柔和出现。
易亲近线索:悬停时给予温和回应;动画朝向用户而非远离;使用柔和阴影而非硬边;元素应显得可触及;避免压迫或对抗性运动。
适用场景:客服界面、引导流程、社区平台、医疗门户、教育应用、小微企业网站、个人作品集、聊天机器人与助手。
限制:资料未提供具体框架或库的安装方式、浏览器兼容性、性能开销与无障碍适配细节,暂未提供。