引导页面的移动箭头效果 guide arrow animation

最新推荐文章于 2024-05-20 16:18:49 发布

原创最新推荐文章于 2024-05-20 16:18:49 发布 · 7.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#arrow guide animatio

Android 专栏收录该内容

92 篇文章

订阅专栏

通过定时更新布局中的位置来实现类效果而非平滑的动画，文章详细介绍了布局代码和实现代码，包括初始化视图、监听全局布局变化、执行动画等关键步骤。

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

要实现类似效果

由于动画是非平滑的，所以不能用平移的方式来实现，这里就定时去更新在父布局的位置来是实现

先看布局代码

<RelativeLayout
        android:id="@+id/swipe_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="10dip" 
        android:layout_marginRight="10dip">

        <RelativeLayout
            android:id="@+id/guide_arrow"
            android:layout_width="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_height="20dip" >

            <ImageView
                android:id="@+id/guide_arrow_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:src="@drawable/guide_arrow" />

            <ImageView
                android:id="@+id/guide_arrow_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/guide_arrow_1"
                android:alpha="0.7"
                android:src="@drawable/guide_arrow" />

            <ImageView
                android:id="@+id/guide_arrow_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/guide_arrow_2"
                android:alpha="0.3"
                android:src="@drawable/guide_arrow" />

        </RelativeLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/guide_arrow"
            android:layout_alignParentRight="true"
            android:layout_marginTop="5dip"
            android:textSize="12sp"
            android:textColor="@color/white"
            android:text="@string/swipe_up" />
    </RelativeLayout>

实现代码：

@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.new_guide);


		swipeView = findViewById(R.id.swipe_layout);
		iv1 = (ImageView) findViewById(R.id.guide_arrow_1);
		iv2 = (ImageView) findViewById(R.id.guide_arrow_2);
		iv3 = (ImageView) findViewById(R.id.guide_arrow_3);

		iv1.getViewTreeObserver().addOnGlobalLayoutListener(
				new OnGlobalLayoutListener() {

					@Override
					public void onGlobalLayout() {
						// TODO Auto-generated method stub
						iv1Left = iv1.getLeft();
						iv1Height = iv1.getHeight();
						iv1Right = iv1.getRight();
						iv1Top = iv1.getTop();
						iv1Temp = iv1Top;
						iv1.getViewTreeObserver().removeGlobalOnLayoutListener(
								this);
						handler.post(arrowRunable);
					}
				});
	}

	class ArrowRunable implements Runnable {

		@Override
		public void run() {
			// TODO Auto-generated method stub
			iv1.layout(iv1Left, iv1Temp - iv1Height-1, iv1Right, iv1Temp-1);
			iv2.layout(iv1Left, iv1Temp, iv1Right, iv1Temp + iv1Height);
			iv3.layout(iv1Left, iv1Temp + iv1Height+1, iv1Right, iv1Temp + 2*iv1Height+1);
			iv1Temp -= iv1Height;
			if (iv1Temp + 3 * iv1Height < 0) {
				iv1Temp = iv1Top;
			}
			handler.postDelayed(this, 180);
		}
	}

	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();
		if (handler != null && arrowRunable != null) {
			Logger.d("removeCallbacks");
			handler.removeCallbacks(arrowRunable);
		}
	}

ok，这样应该就可以了，大家有更好的，欢迎交流