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

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

摘要生成于 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,这样应该就可以了,大家有更好的,欢迎交流


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值