You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Android中两个View持续交叉淡入淡出的实现与运行问题咨询

实现两张图片持续交叉淡入淡出的Alpha动画方案

我来分享下我用Animation类实现这个效果的具体思路和细节哈:

  • 单图动画逻辑:给每张图片都做了一套「淡入→保持显示→淡出」的完整Alpha动画流程,并且设置了动画结束后自动重置重启,确保可以循环执行
  • 双图时序配合:第二张图片用了和第一张完全相同的动画配置,但给它加了延迟启动的设置——刚好卡在第一张图片开始淡出的节点启动自己的淡入动画,这样就形成了完美的交叉效果:
    1. Image1淡入后持续显示
    2. Image1缓慢淡出时,Image2同步淡入并持续显示
    3. Image2淡出时,Image1再次淡入,循环往复

如果应用在无用户干扰的情况下运行,这个循环会一直稳定执行,不会出现中断。不过要是遇到用户交互(比如页面切后台、控件重新绘制),可能得额外处理动画的暂停/恢复逻辑,避免出现两张图动画不同步的问题。

给你贴个简单的代码片段参考(以Android为例):

// 构建Image1的完整动画集
Animation alphaInAnim1 = new AlphaAnimation(0.0f, 1.0f);
alphaInAnim1.setDuration(1000); // 淡入时长1秒
alphaInAnim1.setFillAfter(true); // 保持淡入后的状态

Animation alphaOutAnim1 = new AlphaAnimation(1.0f, 0.0f);
alphaOutAnim1.setDuration(1000); // 淡出时长1秒
alphaOutAnim1.setStartOffset(2000); // 保持显示2秒后开始淡出
alphaOutAnim1.setFillAfter(true);

AnimationSet animSet1 = new AnimationSet(true);
animSet1.addAnimation(alphaInAnim1);
animSet1.addAnimation(alphaOutAnim1);
animSet1.setRepeatCount(Animation.INFINITE);
animSet1.setRepeatMode(Animation.RESTART);

// 构建Image2的动画集,和Image1逻辑一致但延迟启动
Animation alphaInAnim2 = new AlphaAnimation(0.0f, 1.0f);
alphaInAnim2.setDuration(1000);
alphaInAnim2.setFillAfter(true);

Animation alphaOutAnim2 = new AlphaAnimation(1.0f, 0.0f);
alphaOutAnim2.setDuration(1000);
alphaOutAnim2.setStartOffset(2000);
alphaOutAnim2.setFillAfter(true);

AnimationSet animSet2 = new AnimationSet(true);
animSet2.addAnimation(alphaInAnim2);
animSet2.addAnimation(alphaOutAnim2);
animSet2.setStartOffset(3000); // 延迟3秒启动,刚好衔接Image1的淡出
animSet2.setRepeatCount(Animation.INFINITE);
animSet2.setRepeatMode(Animation.RESTART);

// 给图片绑定动画
imageView1.startAnimation(animSet1);
imageView2.startAnimation(animSet2);

这里要注意setStartOffset的时间得根据你的动画时长精准计算,确保两张图的淡入淡出衔接自然,不会出现空白或者生硬重叠的情况。如果是在自定义View里实现,也可以结合属性动画重写onDraw来做,但用Animation类的方案更轻量,适合这种简单的循环交叉场景。

内容的提问来源于stack exchange,提问作者Scott Johansen

火山引擎 最新活动