Egret -- 颜色缓动（使用Tween更改fillColor值闪烁）

最新推荐文章于 2020-11-19 18:37:19 发布

honey199396

最新推荐文章于 2020-11-19 18:37:19 发布

阅读量4.2k

点赞数

分类专栏： Egret 文章标签： Egret 颜色缓动 Tween 闪烁

本文链接：https://blog.csdn.net/honey199396/article/details/80354771

版权

Egret 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

如果我们想将一个Rect的颜色从ColorA变换为ColorB，而且是缓动变换的，使用如下方法会发生闪烁问题：

/** 颜色变化 */
    public colorTo(target: eui.Rect, targetColor: number, duration: number, delay: number, callback = null) {
        egret.Tween.get(target).wait(delay).to({fillColor: targetColor}, duration);
     }

这里写图片描述
发生闪烁原理，该Tween是将Target的fillColor值从ColorA改变到ColorB，这个过程中RGB值是混乱的，所以发生了闪烁，正确做法是分别更改颜色的RGB值到目标RGB值就不会发生闪烁。

自己写一个缓动方法：


    /** 颜色变化 */
    public colorTo(target: eui.Rect, targetColor: number, duration: number, delay: number, callback = null) {
        // 将16进制颜色分割成rgb值
        let spliceColor = (color) => {
            let result = {r: -1, g: -1, b: -1};
            result.b = color % 256;
            result.g = Math.floor((color / 256)) % 256;
            result.r = Math.floor((color / 256) / 256);
            return result;
        }

        // 将rgb值合并成颜色值
        let mergeColor = (rgb: {r: number, g: number, b: number}) => {
            return Math.floor(((rgb.r * 256) + rgb.g) * 256 + rgb.b);
        }

        // 目标rgb值
        let targetRGB = spliceColor(targetColor);
        // 当前rgb值
        let curRGB = spliceColor(target.fillColor);
        // 单帧时间，当前使用30帧每秒来运行
        let deltaTime = 1000 / 30;
        let timer = 0;
        // target.fillColor = targetColor;
        egret.Tween.get(target).wait(delay).call(function(){
            let roopCount = duration / deltaTime;
            let disR = Math.floor((targetRGB.r - curRGB.r) / roopCount);
            let disG = Math.floor((targetRGB.g - curRGB.g) / roopCount);
            let disB = Math.floor((targetRGB.b - curRGB.b) / roopCount);

            let interval = egret.setInterval(function(){
                timer += deltaTime;
                if(timer < duration){
                    curRGB = {r: curRGB.r + disR, g: curRGB.g + disG, b: curRGB.b + disB};
                    console.log(curRGB);
                    target.fillColor = mergeColor(curRGB);
                } else {
                    target.fillColor = targetColor;
                    egret.clearInterval(interval);
                    if(callback) {
                        callback();
                    }
                }
            }, this, deltaTime);
        });
    }