动画

简介

Deft支持通过CSS定义动画。

定义动画

与Web中的@keyframes不同，在Deft中，需要通过animation_cteate定义动画。

示例

// 创建一个旋转动画，动画名称为my-rotate
animation_create("my-rotate", {
    // 开始帧
    "0": {
        transform: 'rotate(0deg)'
    },
    // 结束帧
    "1": {
        transform: 'rotate(360deg)'
    }
});

注意：动画名称应该全局唯一

应用动画

和Web CSS动画类似，Deft通过css应用动画，支持以下CSS属性：

animation-name 动画名称，由animation_create函数定义

animation-duration 动画时间，单位毫秒

animation-iteration-count 动画循环次数，默认为1

示例

<Button style={{
    animationName: 'my-rotate',
    animationDuration: 2000,
}}>MyButton</Button>