3.4.0版本渐隐渐显如何做?

  • Creator 版本: 3.4.0

  • 目标平台: Edge

  • 重现方式:

方式1:

tween(this.sprite.color)
    .to(1, {a: 0})
    .start()

结果:对a属性缓动无效,无反应,无报错

方式2:

 tween(this.sprite)
    .to(1, {color: color(255, 255, 255, 0)})
    .start()

结果:有问题,在变化过程中会出现五彩斑斓的颜色

方式3:在sprite所在节点添加UIOpacity组件

tween(this.sprite.getComponent(UIOpacity))
    .to(1, { opacity: 0 })
    .start()

结果:效果正常,但官方不推荐。参考链接: UIOpacity 组件参考 · GitBook (cocos.com)

不知道该咋办了 :mask: :mask:

1赞

tween(node.getComponent(UIOpacity)).to(0.5, { opacity: 0 }).start();
我是这样

1赞

要添加个UIOpacity组件

可以参考一下这个

感谢,测试后确实可行。
由于官方文档中的描述,不推荐渲染节点下再添加UIOpacity组件,所以一直没去尝试。

在渲染节点上采用UIOpacity做,是引擎的一个bug

	tween(target).call(() => {
			target.setScale(1, 1);
		}).to(0.3, { scale: v3(0, 0, 0) }, { easing: this._easingName }).call(() => {
			this._isRuning = false;
			resolve(true);
		}).start();
		let opaComp = target.getComponent(UIOpacity);
		if (!opaComp) {
			opaComp = target.addComponent(UIOpacity);
		}
		tween(opaComp).call(() => {
			opaComp.opacity = 255;
		}).to(0.3, { opacity: 0 }, { easing: this._easingName }).start();

但是没法保证2个动画同步

:rofl:我也是用了第三种方法,现在才知道是不推荐的

感谢反馈!
这个问题确实存在,也感谢您尝试了这么多种方式:

方式1 的问题在于我们的 color 暂时不支持 单独设置 alpha 值,所以暂时是没有效果的。

方式2 的问题是由于 tween 系统带来的问题,tween 系统会对值进行插值运算,但是和不凑巧的是,color 的各个颜色通道值只是我们为了方便理解的一个封装过的值,而实际存储 color 的值为其 _val,所以对于 tween 来说,他的 lerp 是针对 _val 值进行插值运算的,所以会出现颜色的五彩斑斓变化。

方式3 目前是可以使用的,但是为何我们不推荐使用呢,这是由于我们在系统设计中认为组件本身有 color 值,那么可以直接控制 color 来完成效果,而 UIOpacity 是毫无必要的,且会造成两个数据来源,所以我们不推荐使用,但由于之前两个方式存在问题,可以暂时使用这种方式。

对于这个问题,我们内部已经建立了 issue 进行跟踪,在未来的版本中会提供 tween 的方法来解决这个问题,并进一步增强 tween 的可拓展性,敬请期待!

未来的版本能具体到哪个版本吗?笃定一些,给个确切答复呗

用动画组件做吧 :rofl:

        const originColor = this.sprite.color;
        const targetAlpha = { value: 255 };
        tween(targetAlpha)
            .to(
                1,
                { value: 0 },
                {
                    onUpdate: (target, ratio) => {
                        this.sprite.color = new Color(originColor.r, originColor.g, originColor.b, (ratio ?? 1) * 255);
                    },
                }
            )
            .start();

这种方式?

2赞

??让我知道一个新的运算符

如果左操作数的值不为 null,则 null 合并运算符 ?? 返回该值;
否则,它会计算右操作数并返回其结果。
如果左操作数的计算结果为非 null,则 ?? 运算符不会计算其右操作数。

为了让用户体验流畅的感觉,大部分情况是需要缩放位移配合alpha同步变化,但是这种目前在cocos里面就感觉是世界难题一样

感谢大佬让我学会了onUpdate的使用场景

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。