Android实现箭头无限循环上升的简单动画

最新推荐文章于 2024-08-30 22:48:38 发布

pigdreams

最新推荐文章于 2024-08-30 22:48:38 发布

阅读量6.6k

点赞数

分类专栏： android UI 文章标签： android animation

本文链接：https://blog.youkuaiyun.com/pigdreams/article/details/88210853

版权

本文介绍了如何在Android中实现一个简单的箭头无限循环上升的动画效果。通过使用两张箭头图片并同时进行向上平移动画，使得箭头在到达区域顶部时无缝衔接，重新从底部出现。虽然存在缺点，如非连续循环，但因其简单易懂的实现方式而具有一定的实用价值。文章提供了布局设置、动画实现和Activity代码，鼓励读者探讨更优的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求说明

一个箭头图片在某个区域做上升的动画，到区域顶部时，消失的部分又从底部出现，如此循环往复。

先看实现的效果图，如下。
在这里插入图片描述
缺点:实际上并不是连贯的循环重复，而是第二次上升的箭头消失并没有再从底部出来，这是用简单动画实现的劣势。

优点:简单，便于理解和实现。

原理说明

用两张图片箭头一起做向上平移的动画，就可实现该功能。

一张图片放在运动区域下方，另一张图片放在运动区域的两部位置下方，然后一起使用同一个平移相同距离的动画，使之实现上述效果。
在这里插入图片描述

代码实现

首先布局设定好ImageView的具体宽高，然后用marginBottom负数的方式使之置于运动区域下方，第二个箭头margin的距离是运动区域的高度+自身的高度。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".animation.ArrowMoveActivity"
    tools:showIn="@layout/activity_arrow_move">

    <FrameLayout
        android:id="@+id/fl_move_area"
        android:background="@color/color_list_divider"