kuikly-animation

Original：🇨🇳 Chinese

Translated

Kuikly DSL Animation Development Assistant (Kuikly DSL). Guides users to implement property animations such as transform, opacity, backgroundColor, and frame using both declarative and imperative approaches, covering serial/parallel orchestration and animation cancellation. Used when users need to implement animation effects.

2installs

Sourcetencent-tds/kuiklyui-ai

Added on2026-04-22

NPX Install

npx skill4agent add tencent-tds/kuiklyui-ai kuikly-animation

SKILL.md Content (Chinese)

View Translation Comparison →

Kuikly Animation System Development Assistant (Kuikly DSL). Guides how to implement property animations for opacity, backgroundColor, transform (translation/scaling/rotation/skewing), and frame using declarative animations (animate + reactive variables) and imperative animations (animateToAttr + ViewRef), covering advanced modes such as Animation curve configuration, serial/parallel animation orchestration, animation cancellation and looping. Used when users need to implement animation effects, troubleshoot animation failures, or perform complex animation orchestration in Kuikly.

Kuikly Animation System

Core Concepts

Kuikly animations describe the property transition process of a view from State A to State B. Three core elements:

Animatable properties: transform (translation/scaling/rotation/skewing), opacity, backgroundColor, frame (position and size)
Animation object: Controls animation curve, duration, delay, and whether to loop
Trigger method: Declarative (driven by reactive variables) or imperative (directly calling animateToAttr)

Comparison of Two Animation Approaches

Feature	Declarative Animation	Imperative Animation
Trigger method	Automatically triggered by reactive variable changes	Manually call `animateToAttr`
Core API	`attr { animate(animation, value) }`	`viewRef?.view?.animateToAttr(animation) { ... }`
Applicable scenarios	Simple state transition animations	Complex animation orchestration, serial animations
Completion callback	`event { animationCompletion { } }`	Callback via `completion` parameter
Recommendation	Preferred for simple animations	Recommended for complex animations

Animation Object

Animation Curve Types

kotlin

// Basic curves
Animation.linear(durationS, key = "")        // Linear
Animation.easeIn(durationS, key = "")        // Ease in (slow start, fast end)
Animation.easeOut(durationS, key = "")       // Ease out (fast start, slow end)
Animation.easeInOut(durationS, key = "")     // Ease in-out (slow at both ends, fast in the middle)

// Spring curves (additional parameters: damping, initial velocity)
Animation.springLinear(durationS, damping, velocity, key = "")
Animation.springEaseIn(durationS, damping, velocity, key = "")
Animation.springEaseOut(durationS, damping, velocity, key = "")
Animation.springEaseInOut(durationS, damping, velocity, key = "")

Animation Process Control

kotlin

Animation.linear(0.5f)
    .delay(0.3f)              // Start with 0.3s delay
    .repeatForever(true)      // Infinite loop

Parameter Description

Parameter	Type	Description
durationS	Float	Animation duration (seconds)
key	String	Animation identifier, used to distinguish animations in animationCompletion callback
damping	Float	Spring damping coefficient
velocity	Float	Initial spring velocity

Animatable Properties and Transform Class

Transform Types

Class	Constructor Parameters	Description
`Translate(percentageX, percentageY)`	X/Y translation percentage [-1,1], can exceed range	Translation, supports offsetX/offsetY (dp)
`Scale(x, y)`	Scaling ratio [0, max]	Scaling
`Rotate(angle)`	Angle [-360, 360]	2D rotation (around Z-axis)
`Rotate(angle, xAngle, yAngle)`	Angle of each axis	3D rotation
`Skew(horizontalAngle, verticalAngle)`	Skew angle (-90, 90)	Skewing
`Anchor(x, y)`	Anchor point [0, 1]	Transform center point, default (0.5, 0.5)

transform Method Signatures

kotlin

fun transform(
    rotate: Rotate = Rotate.DEFAULT,
    scale: Scale = Scale.DEFAULT,
    translate: Translate = Translate.DEFAULT,
    anchor: Anchor = Anchor.DEFAULT,
    skew: Skew = Skew.DEFAULT
)

// Convenient overloads (only pass a single transform type)
fun transform(rotate: Rotate)
fun transform(scale: Scale)
fun transform(translate: Translate)
fun transform(skew: Skew)

Quick Start for Declarative Animation

kotlin

var flag by observable(false)

View {
    attr {
        size(100f, 100f)
        backgroundColor(if (ctx.flag) Color.GREEN else Color.RED)
        animate(Animation.linear(0.5f), ctx.flag)
    }
}

// Trigger animation
flag = true

Detailed Usage (animate scope, sibling scope, parent-child scope): See DECLARATIVE_ANIMATION.md

Quick Start for Imperative Animation

kotlin

var viewRef: ViewRef<DivView>? = null

View {
    ref { ctx.viewRef = it }
    attr {
        size(100f, 100f)
        backgroundColor(Color.RED)
    }
}

// Trigger animation
viewRef?.view?.animateToAttr(Animation.linear(0.5f), attrBlock = {
    backgroundColor(Color.GREEN)
}, completion = { finished ->
    // finished: true=completed, false=canceled
})

Detailed Usage: See IMPERATIVE_ANIMATION.md

Advanced Animation Modes

Serial animations, parallel animations, mid-animation start, animation cancellation, etc.: See ANIMATION_PATTERNS.md

kuikly-animation

NPX Install

Tags

SKILL.md Content (Chinese)

Kuikly Animation System

Core Concepts

Comparison of Two Animation Approaches

Animation Object

Animation Curve Types

Animation Process Control

Parameter Description

Animatable Properties and Transform Class

Transform Types

transform Method Signatures

Quick Start for Declarative Animation

Quick Start for Imperative Animation

Advanced Animation Modes