效果图:
原理是viewpager实现切换，然后每个View中的控件加入动画:
private void InitViewPager() {
viewPager=(ViewPager) findViewById(R.id.vPager);
views=new ArrayList<View>();
LayoutInflater inflater=getLayoutInflater();
view1=inflater.inflate(R.layout.layout_tutorial_1, null);
view2=inflater.inflate(R.layout.layout_tutorial_2, null);
view3=inflater.inflate(R.layout.layout_tutorial_3, null);
view4=inflater.inflate(R.layout.layout_tutorial_4, null);
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
viewPager.setAdapter(new MyViewPagerAdapter(views));
viewPager.setCurrentItem(0);
viewPager.setOnPageChangeListener(new MyOnPageChangeListener());
InitTextView();
}我们看layout_tutorail_1的xml:
<?xml version="1.0" encoding="UTF-8"?> <LinearLayout android:gravity="center" android:orientation="vertical" android:background="@android:color/white" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:id="@+id/t1_fixed" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="15.0dip" android:src="@drawable/tutorial1_fixed" /> <RelativeLayout android:id="@+id/center_layout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerInParent="true"> <ImageView android:id="@+id/t1_icon1" android:background="@drawable/t1_frame_animation" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="180.0dip" android:layout_marginTop="53.0dip" /> <ImageView android:id="@+id/t1_icon2" android:visibility="visible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="30.0dip" android:src="@drawable/tutorial1_icon3" android:layout_below="@id/t1_icon1" android:layout_centerHorizontal="true" /> <ImageView android:id="@+id/t1_static" android:visibility="visible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tutorial1_static" android:layout_centerHorizontal="true" /> <ImageView android:id="@+id/t1_text" android:visibility="visible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10.0dip" android:src="@drawable/tutorial1_text" android:layout_below="@id/t1_static" android:layout_centerHorizontal="true" /> </RelativeLayout> <ImageView android:id="@+id/t1_next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20.0dip" android:src="@drawable/tutorial_next" /> </LinearLayout>
private void initAnimationForEachView(int page) {
if(page == 0) {
t1_icon1.setImageResource(R.drawable.t1_frame_animation);
t1_icon1_animationDrawable = (AnimationDrawable) t1_icon1
.getDrawable();
t1_icon1_animationDrawable.start();
Animation tutorail_rotate = AnimationUtils.loadAnimation(TutorailActivity.this, R.anim.tutorail_rotate);
t1_icon2.startAnimation(tutorail_rotate);
Animation tutorail_scalate = AnimationUtils.loadAnimation(TutorailActivity.this, R.anim.tutorail_scalate);
t1_fixed.startAnimation(tutorail_scalate);
Animation tutorail_bottom = AnimationUtils.loadAnimation(TutorailActivity.this, R.anim.tutorail_bottom);
t1_next.startAnimation(tutorail_bottom);
}
}看rotate动画怎么实现:
<?xml version="1.0" encoding="UTF-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:duration="800" android:pivotX="50.0%" android:pivotY="50.0%" android:fillAfter="false" android:fromXScale="0.0" android:toXScale="1.2" android:fromYScale="0.0" android:toYScale="1.2" /> <rotate android:duration="3000" android:fromDegrees="0.0" android:toDegrees="359.0" android:pivotX="50.0%" android:pivotY="50.0%" android:repeatCount="infinite" /> </set>