动画效果 | Smartchart开发手册

简介 #

SmartChart 支持通过 CSS 动画让大屏元素更生动，包括旋转、变形、颜色渐变等效果。将 CSS 动画类名赋给组件即可应用，无需引入额外库。

自动旋转效果 #

在"模板"的style中加入以下样式

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.Rotate {
    -webkit-animation: spin 3s linear 3s 5 alternate;
    animation: spin 3s linear infinite;
}

如需任意组件自动旋转, 只需将Rotate这个类给到这个组件即可, 比如图形

<img class="Rotate" src="https://www.smartchart.cn/media/editor/smc162_20220407150432307320.png">

也可以让图形容器旋转：

/* 让0号容器旋转 */
#container_0 { animation: spin 5s linear infinite; }

组件变形 #

常见变形沿着Y轴, 其它变形方式自已搜索, 比如需要0号,1号图形变形的样式写法

#container_0{transform:skewY(10deg);}
#container_1{transform:skewY(-10deg);}

变色效果 #

@keyframes changeColor {
0% {color: #f00;}
25% {color: #0f0;}
50% {color: #00f;}
75% {color: #ff0;}
100% {color: #f00;}
}
.Colorchange {animation: changeColor 3s infinite;}

效果如下: 输入图片说明

闪烁/呼吸灯效果 #

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}
.Blink { animation: blink 1.5s ease-in-out infinite; }

动画属性速查 #

animation: 名称 时长 速度函数 延迟 次数 方向;
/* 例：animation: spin 3s linear 0s infinite normal */

/* 常用速度函数 */
linear        /* 匀速 */
ease-in-out   /* 先慢后快再慢 */

/* 次数 */
infinite      /* 无限循环 */
3             /* 执行3次 */