kuikly-animation

Kuikly DSL 动画开发助手(Kuikly DSL)。指导使用声明式和命令式两种方式实现 transform、opacity、backgroundColor、frame 等属性动画,涵盖串行/并行编排与动画取消。当用户需要实现动画效果时使用。

By tencent-tds · 368 installs

npx skills add tencent-tds/kuiklyui-ai --skill kuikly-animation

Source repository · Upstream listing

Kuikly 动画系统开发助手(Kuikly DSL)。指导如何使用声明式动画(animate + 响应式变量)和命令式动画(animateToAttr + ViewRef)实现 opacity、backgroundColor、transform(位移/缩放/旋转/倾斜)、frame 等属性动画,涵盖 Animation 曲线配置、串行/并行动画编排、动画取消与循环等高级模式。当用户在 Kuikly 中需要实现动画效果、排查动画不生效、进行复杂动画编排时使用。 Kuikly 动画系统 核心概念 Kuikly 动画描述视图从 状态 A 到 状态 B 的属性过渡过程。三大要素: 1. 可动画属性 :transform(位移/缩放/旋转/倾斜)、opacity、backgroundColor、frame(位置和大小) 2. Animation 对象 :控制动画曲线、时长、延迟、是否循环 3. 触发方式 :声明式(响应式变量驱动)或命令式(直接调用 animateToAttr) 两种动画方式对比 特性 声明式动画 命令式动画 触发方式 响应式变量变化自动触发 手动调用 animateToAttr 核心 API attr { animate(animation, value) } viewRef?.view?.animateToAttr(animation) { ... } 适用场景 简单状态切换动画 复杂动画编排、串行动画 结束回调 event { animationCompletion { } } completion 参数回调 推荐度 简单动画首选 复杂动画推荐 Animation 对象 动画曲线类型 动画过程控制 参数说明 参数 类型 说明 durationS Float 动画持续时间(秒) key String 动画标识,animationCompletion 回调中用于区分动画 damping Float 弹簧阻尼系数 velocity Float 弹簧初始速度 可动画属性与 Transform 类 Transform 类型 类 构造参数 说明 Translate(percentageX, percentageY) X/Y 位移百分比 [ 1,1],可超出 位移,支持 offsetX/offsetY (dp) Scale(x, y) 缩放比例 [0, max] 缩放 Rotate(angle) 角度 [ 360, 360] 2D 旋转(围绕 Z 轴) Rotate(angle, xAngle, yAngle) 各轴角度 3D 旋转 Skew(horizontalAngle, verticalAngle) 倾斜角度 ( 90, 90) 倾斜 Anchor(x, y) 锚点 [0, 1] transform 中心点,默认 (0.5, 0.5) transform 方法签名 声明式动画快速入门 详细用法 (animate 作用域、同级作用域、父子作用域):见 [DECLARATIVE ANIMATION.md](references/DECLARATIVE ANIMATION.md) 命令式动画快速入门 详细用法 :见 [IMPERATIVE ANIMATION.md](references/IMPERATIVE ANIMATION.md) 高级动画模式 串行动画、并行动画、动画中途启动、动画取消等:见 [ANIMATION PATTERNS.md](references/ANIMATION PATTERNS.md)