Android中两个View持续交叉淡入淡出的实现与运行问题咨询
实现两张图片持续交叉淡入淡出的Alpha动画方案
我来分享下我用Animation类实现这个效果的具体思路和细节哈:
- 单图动画逻辑:给每张图片都做了一套「淡入→保持显示→淡出」的完整Alpha动画流程,并且设置了动画结束后自动重置重启,确保可以循环执行
- 双图时序配合:第二张图片用了和第一张完全相同的动画配置,但给它加了延迟启动的设置——刚好卡在第一张图片开始淡出的节点启动自己的淡入动画,这样就形成了完美的交叉效果:
- Image1淡入后持续显示
- Image1缓慢淡出时,Image2同步淡入并持续显示
- 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




