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

本文主要是介绍引导页面的移动箭头效果 guide arrow animation，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

要实现类似效果

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

先看布局代码

<RelativeLayoutandroid: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"><RelativeLayoutandroid:id="@+id/guide_arrow"android:layout_width="wrap_content"android:layout_alignParentRight="true"android:layout_height="20dip" ><ImageViewandroid:id="@+id/guide_arrow_1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:src="@drawable/guide_arrow" /><ImageViewandroid: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" /><ImageViewandroid: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><TextViewandroid: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>

实现代码：

@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.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() {@Overridepublic void onGlobalLayout() {// TODO Auto-generated method stubiv1Left = iv1.getLeft();iv1Height = iv1.getHeight();iv1Right = iv1.getRight();iv1Top = iv1.getTop();iv1Temp = iv1Top;iv1.getViewTreeObserver().removeGlobalOnLayoutListener(this);handler.post(arrowRunable);}});}class ArrowRunable implements Runnable {@Overridepublic void run() {// TODO Auto-generated method stubiv1.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);}}@Overrideprotected void onDestroy() {// TODO Auto-generated method stubsuper.onDestroy();if (handler != null && arrowRunable != null) {Logger.d("removeCallbacks");handler.removeCallbacks(arrowRunable);}}

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

这篇关于引导页面的移动箭头效果 guide arrow animation的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---