关于组件变色类呼吸效果的研究

之前看到过一种效果，类似下图，尝试在Smartbi中实现

采用方式：宏代码

概要原理：定时器循环修改组件样式；保证颜色以A->B->C->B->A进行循环

初步实现效果：

———————————————————————————————————————

思考：初步具有了呼吸效果。

    若想实现不间断的呼吸效果，需得到两个rgba的中间数据。

    应以步长的形式获得，这样能保证代码中try部分只写一个rgba值，然后通过步长来控制；同时阴影也可以通过此步长来控制

参考：【仪表盘】地图实现循环高亮效果 - Smartbi Insight V11帮助中心 -

          【仪表盘】根据占比设置柱图中柱子的颜色 - Smartbi Insight V11帮助中心 -

附相关代码（事件为onBeforeRender）：

function main(page: IPage, portlet: IEChartsPortlet) {

    var options = portlet.getChartOptions();

    var series = options.series[0];

    var sint = 1;//此参数为变化依据，为不同值是更改不同的series样式

    var threshold = 1;//此为阈值变化依据，控制sint参数以正弦形式变化

    var interval = setInterval(function () {

        try {

            if (sint == 1) {

                series.lineStyle = {

                    "normal": {

                        "color": "rgba(30,144,255,1)",

                        "shadowColor": "rgba(30,144,255,1)",

                        "shadowBlur": 5

                    }

                }

            } else if(sint == 0.9) { 

                series.lineStyle = {

                    "normal": {

                        "color": "rgba(30,144,255,0.9)",

                        "shadowColor": "rgba(30,144,255,0.9)",

                        "shadowBlur": 10

                    }

                }

            } else if(sint == 0.8) { 

                series.lineStyle = {

                    "normal": {

                        "color": "rgba(30,144,255,0.8)",

                        "shadowColor": "rgba(30,144,255,0.8)",

                        "shadowBlur": 15

                    }

                }

            } else { 

                series.lineStyle = {

                    "normal": {

                        "color": "rgba(30,144,255,0.7)",

                        "shadowColor": "rgba(30,144,255,0.7)",

                        "shadowBlur": 20

                    }

                }

            }    

        } catch (e) {

            console.error(e);

        } finally { 

            portlet.setChartOptions(options);

            //让数据在阈值内以正弦形式变化

            if (sint == 1) {

                threshold = -threshold;

                sint = sint + 0.1 * threshold;

            } else if (sint <= 0.71) {

                threshold = -threshold;

                sint = sint + 0.1*threshold;

            } else { 

                sint = sint + 0.1*threshold;

            }

        }

    } , 1000)

}

 

若想实现不间断的呼吸效果，需得到两个rgba的中间数据。