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)